tests/manual/scrollview-dom.html

	scrollview-dom.html revision f4093e4718eac9fb141f68315b22f18502ac8933
280a8a0544b4aeb52414d20e8c6e6c5b1108562eTinderbox User<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
59602f2a7c4e4809941583bed3e94cd26e628f1aTinderbox User<html>
6fe48fb46e53ffc37542853a1edb74cb481b7d94Automatic Updater    <head>
5affecff6e148a8e124d03f5dbac0da11e30dcc5Tinderbox User        <title>ScrollView Example</title>
19558a04decde0e7261d489d92d04ad88104217bTinderbox User        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
827f8cccb5280f4da66c46186e792d1cb9d73503Mark Andrews        <link rel="stylesheet" href="/build/cssreset/reset-min.css" type="text/css" media="screen" title="no title" charset="utf-8">
827f8cccb5280f4da66c46186e792d1cb9d73503Mark Andrews
c57668a2fbbe558c1bd21652813616f2f517c469Tinderbox User        <script src="/build/yui/yui.js" type="text/javascript" charset="utf-8"></script>
03ebc228ee3725738b067b6bd7082a9a731822a1Tinderbox User
287a6a8f9040dc43560cd69cddf83bfc0f53b76fTinderbox User        <style>
dedefc0bdbb4e6e39eeb98aa2fc6883efec2ddb0Mark Andrews        #scrollview-bounding {
8de3f14f1c300c3e1ed99084cc03485b42c92bf1Tinderbox User            xborder:dotted 2px orange;
e5a6871cd0635ecdb2bf792316a2d8c53206f4b2Tinderbox User            height:500px;
950d203b64f512b85fcc093ee1e9e3e531a1aea3Tinderbox User        }
b886b04d8d2b085cbf3e1bf4442dee87f43ba5e4Tinderbox User
03ebc228ee3725738b067b6bd7082a9a731822a1Tinderbox User        #scrollview-content {
3759f10fc543747668b1ca4b4671f35b0dea8445Francis Dupont            white-space:nowrap;
e676a596869d8a80a644c99a848afb53d1c5975eMark Andrews        }
c651f15b30f1dae5cc2f00878fb5da5b3a35a468Mark Andrews
3759f10fc543747668b1ca4b4671f35b0dea8445Francis Dupont        #scrollview-content li{
d5637bdbb931ff79fced3d4858d83212ea58ed15Tinderbox User            display:inline-block;
c651f15b30f1dae5cc2f00878fb5da5b3a35a468Mark Andrews            width:298px;
c651f15b30f1dae5cc2f00878fb5da5b3a35a468Mark Andrews            height:298px;
3759f10fc543747668b1ca4b4671f35b0dea8445Francis Dupont            border:1px solid red;
d5637bdbb931ff79fced3d4858d83212ea58ed15Tinderbox User            color:black;
c651f15b30f1dae5cc2f00878fb5da5b3a35a468Mark Andrews            font-size:40px;
9ecb5d33470ebfb3719a1b8d56bcefdf4b27f7b2Tinderbox User            opacity: 0.5;
0eb371ca0dab50ae3462e98794a6126198c52f4bMark Andrews            background-image: -webkit-linear-gradient(top, red, white, blue);
9ecb5d33470ebfb3719a1b8d56bcefdf4b27f7b2Tinderbox User            text-align:center;
e813f036c8251b6d9d2a72fa84f80c2c9d2795afMark Andrews        }
30370d905e9be3be7d9b947fd432bacecbb13bb9Evan Hunt        </style>
0eb371ca0dab50ae3462e98794a6126198c52f4bMark Andrews
9ecb5d33470ebfb3719a1b8d56bcefdf4b27f7b2Tinderbox User        <script type="text/javascript" charset="utf-8">
efb0e886f18894a1d2489f1ad74ad14b579e11c7Mark Andrews        YUI({
e813f036c8251b6d9d2a72fa84f80c2c9d2795afMark Andrews            debug: true,
30370d905e9be3be7d9b947fd432bacecbb13bb9Evan Hunt            filter:"raw"
0eb371ca0dab50ae3462e98794a6126198c52f4bMark Andrews        }).use('scrollview-base', 'scrollview-paginator', function(Y) {
9ecb5d33470ebfb3719a1b8d56bcefdf4b27f7b2Tinderbox User
0eb371ca0dab50ae3462e98794a6126198c52f4bMark Andrews            for (var j=0; j<100; j++){
9ecb5d33470ebfb3719a1b8d56bcefdf4b27f7b2Tinderbox User                Y.one("#scrollview-content ul").append("<li>" + j + "</li>");
e813f036c8251b6d9d2a72fa84f80c2c9d2795afMark Andrews            }
30370d905e9be3be7d9b947fd432bacecbb13bb9Evan Hunt
0eb371ca0dab50ae3462e98794a6126198c52f4bMark Andrews            var scrollView = new Y.ScrollView({
015055b6e23f5c08f6a5b34726f90b62597e9e45Tinderbox User                id: "scrollview",
03ebc228ee3725738b067b6bd7082a9a731822a1Tinderbox User                srcNode : '#scrollview-content',
aa9c561961e9d877946ebaa8795fa2be054ab7bfEvan Hunt                width: "300px"
dc238a06bffa79de141ee7655765e2df91498a8aTinderbox User            });
827f8cccb5280f4da66c46186e792d1cb9d73503Mark Andrews
aa9c561961e9d877946ebaa8795fa2be054ab7bfEvan Hunt            scrollView.plug(Y.Plugin.ScrollViewPaginator, {
9513a2a6670951f5cf5477fcfec9f933fcaff628Automatic Updater                selector: 'li',
3759f10fc543747668b1ca4b4671f35b0dea8445Francis Dupont                optimizeDOM: true
9513a2a6670951f5cf5477fcfec9f933fcaff628Automatic Updater            });
aa9c561961e9d877946ebaa8795fa2be054ab7bfEvan Hunt
dc238a06bffa79de141ee7655765e2df91498a8aTinderbox User            scrollView.render();
827f8cccb5280f4da66c46186e792d1cb9d73503Mark Andrews        });
aa9c561961e9d877946ebaa8795fa2be054ab7bfEvan Hunt        </script>
710bce1a85c96e85ca1a90471382055acd29d51fTinderbox User    </head>
9513a2a6670951f5cf5477fcfec9f933fcaff628Automatic Updater
3759f10fc543747668b1ca4b4671f35b0dea8445Francis Dupont    <body class="yui3-skin-sam">
9513a2a6670951f5cf5477fcfec9f933fcaff628Automatic Updater        <div>
0eb371ca0dab50ae3462e98794a6126198c52f4bMark Andrews            <div id="scrollview-content">
cdfc81e048bd34c1d628380247bda6b80a89e20eAutomatic Updater                <ul></ul>
e813f036c8251b6d9d2a72fa84f80c2c9d2795afMark Andrews            </div>
30370d905e9be3be7d9b947fd432bacecbb13bb9Evan Hunt        </div>
0eb371ca0dab50ae3462e98794a6126198c52f4bMark Andrews    </body>
0eb371ca0dab50ae3462e98794a6126198c52f4bMark Andrews</html>