root/other-projects/tipple-android/i-greenstone-server-files/greenstone/webapps/greenstone3/interfaces/default/js/jquery-ui-1.8.15/demos/selectable/serialize.html @ 26899

Revision 26899, 1.8 KB (checked in by davidb, 7 years ago)

Tipple reborn after Chris's Summer of Code 2013

Line 
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="utf-8">
5    <title>jQuery UI Selectable - Serialize</title>
6    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7    <script src="../../jquery-1.6.2.js"></script>
8    <script src="../../ui/jquery.ui.core.js"></script>
9    <script src="../../ui/jquery.ui.widget.js"></script>
10    <script src="../../ui/jquery.ui.mouse.js"></script>
11    <script src="../../ui/jquery.ui.selectable.js"></script>
12    <link rel="stylesheet" href="../demos.css">
13   
14    <style>
15    #feedback { font-size: 1.4em; }
16    #selectable .ui-selecting { background: #FECA40; }
17    #selectable .ui-selected { background: #F39814; color: white; }
18    #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
19    #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
20    </style>
21    <script>
22    $(function() {
23        $( "#selectable" ).selectable({
24            stop: function() {
25                var result = $( "#select-result" ).empty();
26                $( ".ui-selected", this ).each(function() {
27                    var index = $( "#selectable li" ).index( this );
28                    result.append( " #" + ( index + 1 ) );
29                });
30            }
31        });
32    });
33    </script>
34</head>
35<body>
36
37<div class="demo">
38
39<p id="feedback">
40<span>You've selected:</span> <span id="select-result">none</span>.
41</p>
42
43<ol id="selectable">
44    <li class="ui-widget-content">Item 1</li>
45    <li class="ui-widget-content">Item 2</li>
46    <li class="ui-widget-content">Item 3</li>
47    <li class="ui-widget-content">Item 4</li>
48    <li class="ui-widget-content">Item 5</li>
49    <li class="ui-widget-content">Item 6</li>
50</ol>
51
52</div><!-- End demo -->
53
54
55
56<div class="demo-description">
57<p>Write a function that fires on the <code>stop</code> event to collect the index values of selected items.  Present values as feedback, or pass as a data string.</p>
58</div><!-- End demo-description -->
59
60</body>
61</html>
Note: See TracBrowser for help on using the browser.