root/public/javascripts/scriptaculous/test/functional/sortable_test.html

Revision 1, 9.4 kB (checked in by falcon, 17 years ago)

Version one -> initial work from the laptop.
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4<head>
5  <title>script.aculo.us sortable functional test file</title>
6  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
7  <script src="../../lib/prototype.js" type="text/javascript"></script>
8  <script src="../../src/scriptaculous.js" type="text/javascript"></script>
9  <script src="../../src/unittest.js" type="text/javascript"></script>
10  <link rel="stylesheet" href="../test.css" type="text/css" />
11  <style type="text/css" media="screen">
12    #thelist li { background: green; margin:5px; padding: 30px; }
13    div.dropmarker {
14     height:6px;
15     width:200px;
16     background: url(dropmarker.png) left top;
17     margin-top:-3px;
18     margin-left:-5px;
19     z-index:1000;
20     overflow: hidden;
21    }
22  </style>
23  <script type="text/javascript" charset="utf-8">
24    var callsToOnUpdate = 0;
25  </script>
26</head>
27<body>
28<ul id="thelist">
29<li id="thelist_1">Hey there! I'm item#1</li>
30<li id="thelist_2">Hey there! I'm item#2</li>
31<li id="thelist_3">Hey there! I'm item#3</li>
32</ul>
33
34<a href="#" onclick="Sortable.create('thelist',{onUpdate:function(){$('debug').update(++callsToOnUpdate+' call(s) to onUpdate')}});return false;">Create sortable</a> |
35<a href="#" onclick="Sortable.destroy('thelist');return false;">Destroy sortable</a> |
36<a href="#" onclick="alert(Sortable.serialize('thelist'));return false;">Serialize sortable</a>
37
38<ul id="thehandlelist">
39<li id="thehandlelist_1">Hey there! I'm item#1<span class="handle">HANDLE</span>
40<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
41<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
42<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
43<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
44<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
45<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
46<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
47<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
48<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
49<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
50<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
51<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
52<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
53<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
54<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
55<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
56<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
57</li>
58<li id="thehandlelist_2">Hey there! I'm item#2<span class="handle">HANDLE</span>
59<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
60<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
61<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
62<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
63<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
64<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
65<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
66<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
67<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
68<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
69<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
70<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
71<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
72<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
73<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
74<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
75<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
76</li>
77<li id="thehandlelist_3">Hey there! I'm item#3<span class="handle">HANDLE</span>
78<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
79<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
80<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
81<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
82<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
83<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
84<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
85<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
86<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
87<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
88<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
89<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
90<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
91<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
92<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
93<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
94<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
95</li>
96</ul>
97
98<a href="#" onclick="Sortable.create('thehandlelist',{handle:'handle',onUpdate:function(){$('debug').update(++callsToOnUpdate+' call(s) to onUpdate')}});return false;">Create sortable</a> |
99<a href="#" onclick="Sortable.destroy('thehandlelist');return false;">Destroy sortable</a> |
100<a href="#" onclick="alert(Sortable.serialize('thehandlelist'));return false;">Serialize sortable</a>
101
102<p id="debug">no calls to onUpdate</p>
103
104<ul id="sortable_elements_handles">
105  <li id="s_1">s1 <span class="handle" id="h_1">handle</span></li>
106  <li id="s_2">s2 <span class="handle" id="h_2">handle</span></li>
107  <li id="s_3">s3 <span class="handle" id="h_3">handle</span></li>
108  <li id="s_4">s4 <span class="handle" id="h_4">handle</span></li>
109  <li id="s_5">s5 <span class="handle" id="h_5">handle</span></li>
110  <li id="s_6">s6 <span class="handle" id="h_6">handle</span></li>
111  <li id="s_7">s7 <span class="handle" id="h_7">handle</span></li>
112  <li id="s_8">s8 <span class="handle" id="h_8">handle</span></li>
113  <li id="s_9">s9 <span class="handle" id="h_9">handle</span></li>
114  <li id="s_10">s10 <span class="handle" id="h_10">handle</span></li>
115</ul>
116
117<script type="text/javascript" charset="utf-8">
118  function initializePreselected(){
119    Sortable.create('sortable_elements_handles',{
120      handle: 'handle',
121      handles: ['h_1','h_2','h_3','h_4','h_5','h_6','h_7','h_8','h_9','h_10'],
122      elements: ['s_1','s_2','s_3','s_4','s_5','s_6','s_7','s_8','s_9','s_10']
123    });
124  }
125  function initializeNormal(){
126    Sortable.create('sortable_elements_handles',{
127      handle: 'handle'
128    });
129  }
130  function benchmark(method,times){
131    var now = new Date();
132    times.times(method);
133    $('benchmark').update((new Date()-now)+'ms');
134  }
135</script>
136
13720 times: <a href="#" onclick="benchmark(function(){initializePreselected()},20);return false">Init with Preselection</a> |
138<a href="#" onclick="benchmark(function(){initializeNormal()},20);return false">Init normally</a> <span id="benchmark"></span>
139
140</body>
141</html>
Note: See TracBrowser for help on using the browser.