summaryrefslogtreecommitdiff
path: root/demos/tizen-winsets/widgets/listviewcontrols.html
blob: add7e2f546e160ea5aafbe5436e5ebabc6505447 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
  <div data-role="page" data-add-back-btn="true" id="listviewcontrols-demo" data-add-back-btn="true">
            <div data-role="header">
                <h1>Listview controls</h1>
                <fieldset data-role="controlgroup">
		<div data-role="fieldcontain">
                    <label for="listviewcontrols-demo-toggler">listviewcontrols mode:</label>
                    <select id="listviewcontrols-demo-toggler" data-role="slider">
                        <option value="edit">edit</option>
                        <option value="view">view</option>
                    </select>
                 </div>
                 </fieldset>
            </div>
            <div class="content" data-role="content" data-scroll="y">
                <form id="listviewcontrols-demo-control-panel"
                      style="padding-bottom: 14px;"
                      data-listviewcontrols-show-in="edit">
                    <p>These are the controls which can operate over all of
                    the items in the listview. Note that if you filter the
                    list, these controls will only affect the currently-visible
                    items. Also note that we're using autodividers here too :)</p>

                    <fieldset data-role="controlgroup">
                        <input type="checkbox" id="listviewcontrols-demo-checkbox-uber" />
                        <label for="listviewcontrols-demo-checkbox-uber">Select all</label>
                    </fieldset>
                </form>

		  <ul data-role="listview"
                    data-listviewcontrols="#listviewcontrols-demo-control-panel"
                    data-listviewcontrols-options='{"mode":"edit"}'
                    id="listviewcontrols-demo-listview"
                    data-filter="true"
                    data-autodividers="alpha"
                    data-autodividers-selector="span">
                    <li>
                        <fieldset data-role="controlgroup" data-listviewcontrols-show-in="edit">
                            <input type="checkbox" id="listviewcontrols-demo-checkbox-1" />
                            <label for="listviewcontrols-demo-checkbox-1">Greg</label>
                        </fieldset>
                        <span data-listviewcontrols-show-in="view">Greg</span>
                    </li>
                    <li>
                        <fieldset data-role="controlgroup" data-listviewcontrols-show-in="edit">
                            <input type="checkbox" id="listviewcontrols-demo-checkbox-2" />
                            <label for="listviewcontrols-demo-checkbox-2">Greta</label>
                        </fieldset>
                        <span data-listviewcontrols-show-in="view">Greta</span>
                    </li>
                    <li>
                        <fieldset data-role="controlgroup" data-listviewcontrols-show-in="edit">
                            <input type="checkbox" id="listviewcontrols-demo-checkbox-3" />
                            <label for="listviewcontrols-demo-checkbox-3">Pete</label>
                        </fieldset>
                        <span data-listviewcontrols-show-in="view">Pete</span>
                    </li>
                    <li>
                        <fieldset data-role="controlgroup" data-listviewcontrols-show-in="edit">
                            <input type="checkbox" id="listviewcontrols-demo-checkbox-4" />
                            <label for="listviewcontrols-demo-checkbox-4">Phil</label>
                        </fieldset>
                        <span data-listviewcontrols-show-in="view">Phil</span>
                    </li>
                    <li>
                        <fieldset data-role="controlgroup" data-listviewcontrols-show-in="edit">
                            <input type="checkbox" id="listviewcontrols-demo-checkbox-5" />
                            <label for="listviewcontrols-demo-checkbox-5">Sue</label>
                        </fieldset>
                        <span data-listviewcontrols-show-in="view">Sue</span>
                    </li>
                </ul>
            </div>
            <div data-role="footer">
                <h4>Web UI Framework - Widgets gallery</h4>
            </div>
        </div>
<!-- /page -->