tests/manual/scrollview-dom.html

	scrollview-dom.html revision 8e13c83ce63d62a3d331fa7fda05d5ff73c77f0f
012a352f4b26cfd874db8d06debc495c2303e8b2Bob Halley<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
178f6ad061e54bc5babfca3577f72058fa0797c1Bob Halley<html>
5c144477062a5df657acee41a82051d38537fd38Tinderbox User    <head>
bf8267aa453e5d2a735ed732a043b77a0b355b20Mark Andrews        <title>ScrollView Example</title>
bf8267aa453e5d2a735ed732a043b77a0b355b20Mark Andrews        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
bf8267aa453e5d2a735ed732a043b77a0b355b20Mark Andrews        <link rel="stylesheet" href="/build/cssreset/reset-min.css" type="text/css" media="screen" title="no title" charset="utf-8">
bf8267aa453e5d2a735ed732a043b77a0b355b20Mark Andrews
bf8267aa453e5d2a735ed732a043b77a0b355b20Mark Andrews        <script src="/build/yui/yui.js" type="text/javascript" charset="utf-8"></script>
bf8267aa453e5d2a735ed732a043b77a0b355b20Mark Andrews
bf8267aa453e5d2a735ed732a043b77a0b355b20Mark Andrews        <style>
bf8267aa453e5d2a735ed732a043b77a0b355b20Mark Andrews        #scrollview-bounding {
bf8267aa453e5d2a735ed732a043b77a0b355b20Mark Andrews            xborder:dotted 2px orange;
bf8267aa453e5d2a735ed732a043b77a0b355b20Mark Andrews            height:500px;
bf8267aa453e5d2a735ed732a043b77a0b355b20Mark Andrews        }
bf8267aa453e5d2a735ed732a043b77a0b355b20Mark Andrews
bf8267aa453e5d2a735ed732a043b77a0b355b20Mark Andrews        #scrollview-content {
b897c52f865b2fc4e220e2110b874e59c716456bBob Halley            white-space:nowrap;
ea94d370123a5892f6c47a97f21d1b28d44bb168Tinderbox User        }
9c3531d72aeaad6c5f01efe6a1c82023e1379e4dDavid Lawrence
af9dbf1ccdd53933aaae9300d13ce0965d39b067Evan Hunt        #scrollview-content li{
af9dbf1ccdd53933aaae9300d13ce0965d39b067Evan Hunt            display:inline-block;
af9dbf1ccdd53933aaae9300d13ce0965d39b067Evan Hunt            width:298px;
af9dbf1ccdd53933aaae9300d13ce0965d39b067Evan Hunt            height:298px;
af9dbf1ccdd53933aaae9300d13ce0965d39b067Evan Hunt            border:1px solid red;
0b72c791466d0807bcf22522b5ddb7da902c2720Bob Halley            color:black;
460b427411b72da26b1836b9424e2e70d65d9394David Lawrence            font-size:40px;
0b72c791466d0807bcf22522b5ddb7da902c2720Bob Halley            opacity: 0.5;
0b72c791466d0807bcf22522b5ddb7da902c2720Bob Halley            background-image: -webkit-linear-gradient(top, red, white, blue);
af9dbf1ccdd53933aaae9300d13ce0965d39b067Evan Hunt            text-align:center;
0b72c791466d0807bcf22522b5ddb7da902c2720Bob Halley        }
0b72c791466d0807bcf22522b5ddb7da902c2720Bob Halley        </style>
b897c52f865b2fc4e220e2110b874e59c716456bBob Halley
0b72c791466d0807bcf22522b5ddb7da902c2720Bob Halley        <script type="text/javascript" charset="utf-8">
0b72c791466d0807bcf22522b5ddb7da902c2720Bob Halley        YUI({
c7b785510e3f517a0c98c0b6b6e6ad8f359e9e4cMark Andrews            debug: true,
af9dbf1ccdd53933aaae9300d13ce0965d39b067Evan Hunt            filter:"raw"
0b72c791466d0807bcf22522b5ddb7da902c2720Bob Halley        }).use('scrollview-base', 'scrollview-paginator', function(Y) {
b897c52f865b2fc4e220e2110b874e59c716456bBob Halley
af9dbf1ccdd53933aaae9300d13ce0965d39b067Evan Hunt            for (var j=0; j<100; j++){
0b72c791466d0807bcf22522b5ddb7da902c2720Bob Halley                Y.one("#scrollview-content ul").append("<li>" + j + "</li>");
0b72c791466d0807bcf22522b5ddb7da902c2720Bob Halley            }
af9dbf1ccdd53933aaae9300d13ce0965d39b067Evan Hunt
af9dbf1ccdd53933aaae9300d13ce0965d39b067Evan Hunt            var scrollView = new Y.ScrollView({
af9dbf1ccdd53933aaae9300d13ce0965d39b067Evan Hunt                id: "scrollview",
af9dbf1ccdd53933aaae9300d13ce0965d39b067Evan Hunt                srcNode : '#scrollview-content',
af9dbf1ccdd53933aaae9300d13ce0965d39b067Evan Hunt                width: "300px"
af9dbf1ccdd53933aaae9300d13ce0965d39b067Evan Hunt            });
af9dbf1ccdd53933aaae9300d13ce0965d39b067Evan Hunt
af9dbf1ccdd53933aaae9300d13ce0965d39b067Evan Hunt            scrollView.plug(Y.Plugin.ScrollViewPaginator, {
af9dbf1ccdd53933aaae9300d13ce0965d39b067Evan Hunt                selector: 'li'
af9dbf1ccdd53933aaae9300d13ce0965d39b067Evan Hunt            });
460b427411b72da26b1836b9424e2e70d65d9394David Lawrence
460b427411b72da26b1836b9424e2e70d65d9394David Lawrence            scrollView.render();
18483fce5b9d1e02748bdcb916014cedea654f78Mark Andrews
18483fce5b9d1e02748bdcb916014cedea654f78Mark Andrews            console.log(scrollView.pages._pgOff);
18483fce5b9d1e02748bdcb916014cedea654f78Mark Andrews        });
18483fce5b9d1e02748bdcb916014cedea654f78Mark Andrews        </script>
18483fce5b9d1e02748bdcb916014cedea654f78Mark Andrews    </head>
18483fce5b9d1e02748bdcb916014cedea654f78Mark Andrews
18483fce5b9d1e02748bdcb916014cedea654f78Mark Andrews    <body class="yui3-skin-sam">
460b427411b72da26b1836b9424e2e70d65d9394David Lawrence        <div>
0b72c791466d0807bcf22522b5ddb7da902c2720Bob Halley            <div id="scrollview-content">
12e63bfe1d111ccb57f482b28d56c785cccc7cf7David Lawrence                <ul></ul>
12e63bfe1d111ccb57f482b28d56c785cccc7cf7David Lawrence            </div>
af9dbf1ccdd53933aaae9300d13ce0965d39b067Evan Hunt        </div>
12e63bfe1d111ccb57f482b28d56c785cccc7cf7David Lawrence    </body>
12e63bfe1d111ccb57f482b28d56c785cccc7cf7David Lawrence</html>