← Back to branch summary

~ubuntu-branches/ubuntu/raring/maas/raring-updates

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/docs/imageloader/imageloader-class-names.html

  • Committer: Package Import Robot
  • Author(s): Andres Rodriguez
  • Date: 2012-07-03 17:42:37 UTC
  • mfrom: (1.1.13)
  • Revision ID: package-import@ubuntu.com-20120703174237-p8l0keuuznfg721k
Tags: 0.1+bzr709+dfsg-0ubuntu1
* New Upstream release
* debian/control:
  - Depends on python-celery, python-tempita, libjs-yui3-{full,min},
    libjs-raphael
* debian/maas.install:
  - Install apiclient, celeryconfig.py, maas-import-pxe-files, preseeds_v2.
  - Update to install various files from chroot, rather tha manually copy
    them from the source.
* debian/maas.links: symlink celeryconfig.py
* debian/maas.maas-celery.upstart: Add job.
* debian/rules:
  - Install celery upstart job.
  - Do not install jslibs as packages are now used.
  - Drop copying of maas_local_settings_sample.py as source now ships
    a maas_local_settings.py
* debian/patches:
  - 04-maas-http-fix.patch: Drop. Merged upstream.
  - 01-fix-database-settings.patch: Refreshed.
  - 99_enums_js.patch: Added until creation of enum.js / build process
    is fixed.
* debian/maas.postinst: Update bzr version to correctly handle upgrades.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/jslibs/yui/3.4.1/docs/imageloader/imageloader-class-names.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Using ImageLoader with CSS Class Names</title>
6
 
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
7
 
    <link rel="stylesheet" href="../assets/css/main.css">
8
 
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
9
 
    <script src="../../build/yui/yui-min.js"></script>
10
 
</head>
11
 
<body>
12
 
 
13
 
<div id="doc">
14
 
    <h1>Example: Using ImageLoader with CSS Class Names</h1>
15
 
 
16
 
    
17
 
 
18
 
    <div class="yui3-g">
19
 
        <div id="main" class="yui3-u">
20
 
            <div class="content"><div class="intro">
21
 
 
22
 
  <p>
23
 
    The <a href="http://developer.yahoo.com/yui/imageloader/">ImageLoader Utility</a> allows you an alternate method of 
24
 
    using CSS class names to load images.
25
 
  </p>
26
 
 
27
 
  <p>
28
 
    Hover over each image to show its triggers and limit. Try tripping the triggers to see the load reactions. 
29
 
    Refresh the page to reset the images.
30
 
  </p>
31
 
 
32
 
</div>
33
 
 
34
 
<div class="example">
35
 
  <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
36
 
 
37
 
  <style>
38
 
 
39
 
  .everything { position:relative; height:420px; }
40
 
  .everything div { border:1px solid #888; }
41
 
  .topmain { position:absolute; top:10px; left:120px; height:75px; width:100px; }
42
 
  .duo1 { position:absolute; top:130px; left:20px; height:67px; width:100px; }
43
 
  .duo2 { position:absolute; top:130px; left:220px; height:53px; width:100px; }
44
 
  .scroll { position:absolute; top:320px; left:120px; height:72px; width:100px; }
45
 
 
46
 
  .yui3-imgload-maingroup,
47
 
  .yui3-imgload-duogroup,
48
 
  .yui3-imgload-scrollgroup { background:none !important; }
49
 
 
50
 
  </style>
51
 
 
52
 
 
53
 
  <div class='everything' id='everything'>
54
 
    <div class='topmain yui3-imgload-maingroup' id='topmain' style='background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg");' title='group 1; mouseover image; 2 sec limit'></div>
55
 
    <div class='duo1 yui3-imgload-duogroup' id='duo1' style='background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg");' title='group 2; mouseover left image, or click on right image; 4 sec limit'></div>
56
 
    <div class='duo2 yui3-imgload-duogroup' id='duo2' style='background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/katatjuta.jpg");' title='group 2; mouseover left image, or click on right image; 4 sec limit'></div>
57
 
    <div class='scroll' title='group 3; scroll; no time limit'>
58
 
      <img id='scrollImg' class='yui3-imgload-scrollgroup' style='background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/morraine.jpg");' src='http://l.yimg.com/a/i/us/tr/b/1px_trans.gif' width='100' height='72' />
59
 
    </div>
60
 
  </div>
61
 
 
62
 
  <script>
63
 
 
64
 
    YUI({filter:"debug", logInclude: {"imageloader":true, "example":true}}).use("imageloader", function(Y) {
65
 
 
66
 
        var mainGroup = new Y.ImgLoadGroup({ name: 'group 1', timeLimit: 2, className: 'yui3-imgload-maingroup' });
67
 
        mainGroup.addTrigger('#topmain', 'mouseover');
68
 
 
69
 
        var duoGroup = new Y.ImgLoadGroup({ name: 'group 2', timeLimit: 4, className: 'yui3-imgload-duogroup' });
70
 
        duoGroup.addTrigger('#duo1', 'mouseover').addTrigger('#duo2', 'click');
71
 
 
72
 
        var scrollGroup = new Y.ImgLoadGroup({ name: 'group 3', className: 'yui3-imgload-scrollgroup' });
73
 
        scrollGroup.addTrigger(window, 'scroll');
74
 
 
75
 
    });
76
 
 
77
 
  </script>
78
 
 
79
 
  <!--END SOURCE CODE FOR EXAMPLE =============================== -->
80
 
</div>
81
 
 
82
 
<h2>Using CSS Class Names to Load Images</h2>
83
 
 
84
 
<p>
85
 
  Instead of registering specific image ids/URLs with a group, you can simply tag the group with a CSS class. 
86
 
  The group will later use this class name to identify which DOM elements belong to the group. 
87
 
  Each group should have one corresponding class. Each class must have a <code>background:none</code> CSS definition 
88
 
  at the top of the page, as in this example:
89
 
  <h5>CSS</h5>
90
 
<pre class="code prettyprint">.yui3-imgload-maingroup,
91
 
.yui3-imgload-duogroup,
92
 
.yui3-imgload-scrollgroup{ 
93
 
  background:none !important; 
94
 
}</pre>
95
 
 
96
 
  <h5>HTML</h5>
97
 
<pre class="code prettyprint">&lt;div class=&#x27;topmain yui-imgload-maingroup&#x27; id=&#x27;topmain&#x27; style=&#x27;background-image:url(&quot;http:&#x2F;&#x2F;developer.yahoo.com&#x2F;yui&#x2F;docs&#x2F;assets&#x2F;examples&#x2F;exampleimages&#x2F;small&#x2F;museum.jpg&quot;);&#x27;&gt;&lt;&#x2F;div&gt;
98
 
&lt;div class=&#x27;duo1 yui-imgload-duogroup&#x27; id=&#x27;duo1&#x27; style=&#x27;background-image:url(&quot;http:&#x2F;&#x2F;developer.yahoo.com&#x2F;yui&#x2F;docs&#x2F;assets&#x2F;examples&#x2F;exampleimages&#x2F;small&#x2F;uluru.jpg&quot;);&#x27;&gt;&lt;&#x2F;div&gt;
99
 
&lt;div class=&#x27;duo2 yui-imgload-duogroup&#x27; id=&#x27;duo2&#x27; style=&#x27;background-image:url(&quot;http:&#x2F;&#x2F;developer.yahoo.com&#x2F;yui&#x2F;docs&#x2F;assets&#x2F;examples&#x2F;exampleimages&#x2F;small&#x2F;katatjuta.jpg&quot;);&#x27;&gt;&lt;&#x2F;div&gt;
100
 
&lt;div class=&#x27;scroll&#x27;&gt;
101
 
  &lt;img id=&#x27;scrollImg&#x27; class=&#x27;yui-imgload-scrollgroup&#x27; style=&#x27;background-image:url(&quot;http:&#x2F;&#x2F;developer.yahoo.com&#x2F;yui&#x2F;docs&#x2F;assets&#x2F;examples&#x2F;exampleimages&#x2F;small&#x2F;morraine.jpg&quot;);&#x27; src=&#x27;http:&#x2F;&#x2F;l.yimg.com&#x2F;a&#x2F;i&#x2F;us&#x2F;tr&#x2F;b&#x2F;1px_trans.gif&#x27; width=&#x27;100&#x27; height=&#x27;72&#x27; &#x2F;&gt;
102
 
&lt;&#x2F;div&gt;</pre>
103
 
 
104
 
</p>
105
 
 
106
 
<p>
107
 
  A few things to note. First, the images have class names matching those in the style definitions above.
108
 
</p>
109
 
 
110
 
<p>
111
 
  Second, the image URL is set in the <code>background-image</code> of the elements. The <code>background:none</code> 
112
 
  defined earlier in the CSS will be removed by the ImageLoader Utility JavaScript when the images are eventually loaded.
113
 
</p>
114
 
 
115
 
<p>
116
 
  Third, since the <code>&lt;img&gt;</code> element displays its images through the <code>background-image</code>, 
117
 
  its size won't change when the image is loaded. Therefore the <code>width</code>/<code>height</code> needs to be set in the HTML. 
118
 
  And since that gives the image a substantial size, the browsers would show a missing-image icon if the <code>src</code> 
119
 
  attribute were not specified. Therefore we need to set one; a transparent one so that the background image will show through.
120
 
</p>
121
 
 
122
 
<p>
123
 
  This brings up an important limitation with this approach: you cannot alter the natural size of the image. 
124
 
  Because the image is displayed as a background image, the browser will not resize the image according to the 
125
 
  <code>width</code>/<code>height</code> of the <code>&lt;img&gt;</code> element.
126
 
</p>
127
 
 
128
 
<p>
129
 
  Now let's turn to the JavaScript. Since the image URLs are already specified in the HTML, we don't need them in the JS. 
130
 
  All each group needs to know is the CSS class name that will identify the images.
131
 
</p>
132
 
 
133
 
<pre class="code prettyprint">var mainGroup = new Y.ImgLoadGroup({ name: &#x27;group 1&#x27;, timeLimit: 2, className: &#x27;yui-imgload-maingroup&#x27; });
134
 
mainGroup.addTrigger(&#x27;#topmain&#x27;, &#x27;mouseover&#x27;);
135
 
 
136
 
var duoGroup = new Y.ImgLoadGroup({ name: &#x27;group 2&#x27;, timeLimit: 4, className: &#x27;yui-imgload-duogroup&#x27; });
137
 
duoGroup.addTrigger(&#x27;#duo1&#x27;, &#x27;mouseover&#x27;).addTrigger(&#x27;#duo2&#x27;, &#x27;click&#x27;);
138
 
 
139
 
var scrollGroup = new Y.ImgLoadGroup({ name: &#x27;group 3&#x27;, className: &#x27;yui-imgload-scrollgroup&#x27; });
140
 
scrollGroup.addTrigger(window, &#x27;scroll&#x27;);</pre>
141
 
 
142
 
 
143
 
<p>
144
 
  Note that you are free to combine this class-name approach with the other. 
145
 
  The same group can have some images identified by class name and others by registering ids/URLs.
146
 
</p></div>
147
 
        </div>
148
 
 
149
 
        <div id="sidebar" class="yui3-u">
150
 
            
151
 
 
152
 
            
153
 
                <div class="sidebox">
154
 
                    <div class="hd">
155
 
                        <h2 class="no-toc">Examples</h2>
156
 
                    </div>
157
 
 
158
 
                    <div class="bd">
159
 
                        <ul class="examples">
160
 
                            
161
 
                                
162
 
                                    <li data-description="Demonstrates the basic features and operation of the ImageLoader Utility, deferring the loading of images until specific events happen or specific time limits expire.">
163
 
                                        <a href="basic-features.html">Basic Features of the ImageLoader Utility</a>
164
 
                                    </li>
165
 
                                
166
 
                            
167
 
                                
168
 
                                    <li data-description="Loading images above the fold immediately while deferring the loading of images below the fold.">
169
 
                                        <a href="below-fold.html">Loading Images Below the Fold</a>
170
 
                                    </li>
171
 
                                
172
 
                            
173
 
                                
174
 
                                    <li data-description="Using CSS class names to target specific images for deferred loading.">
175
 
                                        <a href="imageloader-class-names.html">Using ImageLoader with CSS Class Names</a>
176
 
                                    </li>
177
 
                                
178
 
                            
179
 
                        </ul>
180
 
                    </div>
181
 
                </div>
182
 
            
183
 
 
184
 
            
185
 
        </div>
186
 
    </div>
187
 
</div>
188
 
 
189
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
190
 
<script>prettyPrint();</script>
191
 
 
192
 
</body>
193
 
</html>