← Back to branch summary

~launchpad-pqm/lazr-js/toolchain

« back to all changes in this revision

Viewing changes to examples/combo.html

  • Committer: Sidnei da Silva
  • Date: 2009-11-13 22:21:42 UTC
  • mto: This revision was merged to the branch mainline in revision 154.
  • Revision ID: sidnei.da.silva@canonical.com-20091113222142-qh398snd11bkrcb1
- Combo service and combo example

Show diffs side-by-side

added added

removed removed

Lines of Context:
examples/combo.html
 
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 
2
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
3
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
4
<head>
 
5
  <title>LAZR JS Examples: Combo Loader</title>
 
6
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 
7
 
 
8
  <script type="text/javascript" src="../build/yui/yui.js"></script>
 
9
  <script type="text/javascript" src="../build/lazr/lazr-meta.js"></script>
 
10
  <script type="text/javascript">
 
11
      var LAZR_YUI_CONFIG = {
 
12
          filter: "min",
 
13
          comboBase: "http://localhost:9876/combo?",
 
14
          root: "",
 
15
          combine: true,
 
16
          modules: LAZR_MODULES,
 
17
      };
 
18
  </script>
 
19
 
 
20
</head>
 
21
 
 
22
<body class="yui-skin-sam">
 
23
<h1>The lazr.overlay module</h1>
 
24
 
 
25
<h2>Drawing a fancy border around widgets</h2>
 
26
 
 
27
<p>
 
28
  <code>lazr</code> provides an overlay implementation which draws a rounded-corner,
 
29
drop-shadow frame around the widget content. Closing the overlay is done by
 
30
either using the close button, pressing Escape, or clicking outside the overlay.
 
31
The click outside the overlay (which dismisses it) will <em>not</em> be passed
 
32
through to the HTML underneath.</p>
 
33
 
 
34
<h2>Demonstration</h2>
 
35
<p>This link is <a href="javascript: alert('I was clicked')">not clickable 
 
36
while the overlay is showing</a></p>
 
37
<p><a href="#" id="re-open">Re-open the overlay to test again</a></p>
 
38
 
 
39
<h2>Subclasses: things you must know</h2>
 
40
<p>Subclasses <em>must</em> call this class's <code>bindUI</code> if they override
 
41
it: use an incantation like <code>this.constructor.superclass.bindUI.call(this)</code>
 
42
in the subclass's <code>bindUI</code>.</p>
 
43
<p>Subclasses <em>must</em> implement the <code>-hidden</code> style for their
 
44
box themselves. If you subclass <code>PrettyOverlay</code> as 
 
45
<code>MySuperOverlay</code> then you need to add</p>
 
46
<pre>
 
47
.yui-mysuperoverlay-hidden {
 
48
  visibility: hidden
 
49
}
 
50
</pre>
 
51
<p>to your CSS. (<code>PrettyOverlay</code> itself can't do this because although
 
52
YUI adds <code>.yui-prettyoverlay</code> to the className of the 
 
53
<code>boundingBox</code>, it does <em>not</em> add 
 
54
<code>.yui-prettyoverlay-hidden</code> when hiding the widget.)</p>
 
55
 
 
56
<h2>Usage</h2>
 
57
<h3>Subclassing (probably what you want)</h3>
 
58
<pre>
 
59
YUI().use('lazr.overlay', function(Y) {
 
60
 
 
61
    var MyThing = function() {
 
62
        MyThing.superclass.constructor.apply(this, arguments);
 
63
    };
 
64
    Y.extend(MyThing, Y.lazr.PrettyOverlay, {
 
65
      bindUI: function() {
 
66
        // call PrettyOverlay's bindUI
 
67
        this.constructor.superclass.bindUI.call(this);
 
68
        // and do my own binding
 
69
        ...
 
70
      }
 
71
    });
 
72
 
 
73
    var thing = new MyThing({
 
74
      bodyContent: 'hello',
 
75
      headerContent: 'heading',
 
76
      align: {
 
77
        points: [Y.WidgetPositionExt.CC, Y.WidgetPositionExt.CC]
 
78
      },
 
79
      progressbar: true,
 
80
      progress: 12
 
81
    });
 
82
    thing.render();
 
83
});
 
84
</pre>
 
85
 
 
86
<h3>Instantiating directly (probably not what you want)</h3>
 
87
<pre>
 
88
YUI().use('lazr.overlay', function(Y) {
 
89
    var overlay = new Y.lazr.PrettyOverlay({
 
90
      bodyContent: 'hello',
 
91
      headerContent: 'heading',
 
92
      align: {
 
93
        points: [Y.WidgetPositionExt.CC, Y.WidgetPositionExt.CC]
 
94
      },
 
95
      progressbar: true,
 
96
      progress: 12
 
97
    });
 
98
    overlay.render();
 
99
});
 
100
</pre>
 
101
 
 
102
<h2>Limitations</h2>
 
103
<p>You can only specify <code>progressbar: {true, false}</code> in the initial
 
104
config object; it cannot be altered once <code>renderUI()</code> has been called.</p>
 
105
<p>Your progress bar will only appear if you have <code>headerContent</code>.</p>
 
106
 
 
107
 
 
108
<script type="text/javascript">
 
109
YUI(LAZR_YUI_CONFIG).use('loader', 'cssbase', 'cssfonts', 'cssreset', 'lazr.overlay', function(Y) {
 
110
    var overlay = new Y.lazr.PrettyOverlay({
 
111
      bodyContent: 'hello',
 
112
      headerContent: '<h2>heading</h2>',
 
113
      steptitle: 'First step',
 
114
      align: {
 
115
        points: [Y.WidgetPositionExt.CC, Y.WidgetPositionExt.CC]
 
116
      },
 
117
      progressbar: true,
 
118
      progress: 12
 
119
    });
 
120
    overlay.render();
 
121
 
 
122
    Y.on('click', function(e) {
 
123
      overlay.show();
 
124
    }, '#re-open');
 
125
});
 
126
</script>
 
127
 
 
128
</body>
 
129
</html>