This repository has been archived by the owner on Apr 12, 2018. It is now read-only.
/
index.html.haml
136 lines (135 loc) · 7.36 KB
/
index.html.haml
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
-@title = "jQuery Mobile Framework - DST Test"
-@manifest = "/manifest"
= render :partial => "index.js.haml", :format => :js
#home.type-interior{"data-role" => "page"}
%div{"data-role" => "header", "data-theme" => "b"}
%a.ui-btn-right{"data-icon" => "arrow-r", "data-iconpos" => "right", "data-direction" => "slide", :href => "#native"} Native
%h1 jQuery DST Test Page
%a.ui-btn-left{"data-icon" => "home", "data-iconpos" => "notext", :href => "/mobile/experiments/main", :rel => "external"} Home
/ /header
%div{"data-role" => "content"}
.content-primary
%h2
%img{:src => "/images/icons/24x24/working.png"}
Using jQuery mobile form elements
%form.dst{:name => "jq_dst_testform"}
%div{"data-role" => "fieldcontain"}
%label{:for => "name"} Text Input:
%input#name{:name => "name", :type => "text", :value => ""}
%div{"data-role" => "fieldcontain"}
%fieldset{"data-role" => "controlgroup", "data-type" => "horizontal"}
%legend Radio Input:
%input#radio-choice-1{:name => "radio_input", :type => "radio", :value => "choice-1"}
%label{:for => "radio-choice-1"} Option 1
%input#radio-choice-2{:name => "radio_input", :type => "radio", :value => "choice-2"}
%label{:for => "radio-choice-2"} Option 2
%input#radio-choice-3{:name => "radio_input", :type => "radio", :value => "choice-3"}
%label{:for => "radio-choice-3"} Option 3
%div{"data-role" => "fieldcontain"}
%fieldset{"data-role" => "controlgroup"}
%legend Checkbox Input:
%input#checkbox{:name => "checkbox_input", :type => "checkbox"}
%label{:for => "checkbox"} Check it
%div{"data-role" => "fieldcontain"}
%label{:for => "textarea"} Textarea Input:
%textarea#textarea{:cols => "40", :name => "textarea", :rows => "8"}
%p
%input#store{:type => "button", :value => "Store"}
%input#recall{:type => "button", :value => "Recall"}
%input#reset{:type => "reset", :value => "Reset Form"}
.content-secondary
.ui-body-b
%div{"data-collapsed" => "true", "data-role" => "collapsible", "data-theme" => "b"}
%h3 More HTML5 and CSS3 Experiments in this section
%ul{"data-dividertheme" => "d", "data-role" => "listview", "data-theme" => "c"}
%li{"data-role" => "list-divider"} HTML5 and CSS3 Experiments
%li
%a{:href => "/mobile/experiments/canvas", :rel => "external"}
%img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/html5.png"}
HTML5 - Canvas
%li
%a{:href => "/mobile/experiments/canvas2", :rel => "external"}
%img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/html5.png"}
HTML5 - Canvas 2
%li
%a{:href => "/mobile/experiments/converter", :rel => "external"}
%img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/html5.png"}
HTML5 - Offline Converter Application
%li
%a{:href => "/mobile/experiments/list_items", :rel => "external"}
%img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/working.png"}
HTML5 - Offline Shopping List (based on Railscast 248)
%li{"data-theme" => "a"}
%a{:href => "/mobile/experiments/dst_test", :rel => "external"}
%img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/html5.png"}
HTML5 - jQuery DST Plugin
%li
%a{:href => "/mobile/experiments/media_queries", :rel => "external"}
%img.ui-li-icon{:alt => "Tablet", :src => "/images/icons/16x16/css3.png"}
CSS3 - Using Media Queries
/ / content
/ / page
#native.type-interior{"data-role" => "page"}
%div{"data-role" => "header", "data-theme" => "b"}
%h1 jQuery DST Test Page
%a.ui-btn-left{"data-icon" => "arrow-l", "data-direction" => "reverse", :href => "#jqm"} Original
/ /header
%div{"data-role" => "content"}
.content-primary
%h2 Using native form elements for checkbox & radio buttons
%form.dst{:name => "jq_dst_testform"}
%div{"data-role" => "fieldcontain"}
%label{:for => "name"} Text Input:
%input#name{:name => "name", :type => "text", :value => ""}
%div{"data-role" => "fieldcontain"}
%fieldset{"data-role" => "controlgroup"}
%legend Radio Input:
%input#radio_input-1{"data-role" => "none", :name => "radio_input", :type => "radio", :value => "choice-1"}
%label{:for => "radio_input-1"} 1
%input#radio_input-2{"data-role" => "none", :name => "radio_input", :type => "radio", :value => "choice-2"}
%label{:for => "radio_input-2"} 2
%input#radio_input-3{"data-role" => "none", :name => "radio_input", :type => "radio", :value => "choice-3"}
%label{:for => "radio_input-3"} 3
%div{"data-role" => "fieldcontain"}
%fieldset{"data-role" => "controlgroup"}
%legend Checkbox Input:
%input#checkbox1.custom{"data-role" => "none", :name => "checkbox_input", :type => "checkbox"}
%div{"data-role" => "fieldcontain"}
%label{:for => "textarea"} Textarea Input:
%textarea#textarea{:cols => "40", :name => "textarea", :rows => "8"}
%p
%input#store{:type => "button", :value => "Store"}
%input#recall{:type => "button", :value => "Recall"}
%input#reset{:type => "reset", :value => "Reset Form"}
.content-secondary
.ui-body-b
%div{"data-collapsed" => "true", "data-role" => "collapsible", "data-theme" => "b"}
%h3 More HTML5 and CSS3 Experiments in this section
%ul{"data-dividertheme" => "d", "data-role" => "listview", "data-theme" => "c"}
%li{"data-role" => "list-divider"} HTML5 and CSS3 Experiments
%li
%a{:href => "/mobile/experiments/canvas", :rel => "external"}
%img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/html5.png"}
HTML5 - Canvas
%li
%a{:href => "/mobile/experiments/canvas2", :rel => "external"}
%img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/html5.png"}
HTML5 - Canvas 2
%li
%a{:href => "/mobile/experiments/converter", :rel => "external"}
%img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/html5.png"}
HTML5 - Offline Converter Application
%li
%a{:href => "/mobile/experiments/list_items", :rel => "external"}
%img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/working.png"}
HTML5 - Offline Shopping List (based on Railscast 248)
%li{"data-theme" => "a"}
%a{:href => "/mobile/experiments/dst_test", :rel => "external"}
%img.ui-li-icon{:alt => "HTML5", :src => "/images/icons/16x16/html5.png"}
HTML5 - jQuery DST Plugin
%li
%a{:href => "/mobile/experiments/media_queries", :rel => "external"}
%img.ui-li-icon{:alt => "Tablet", :src => "/images/icons/16x16/css3.png"}
CSS3 - Using Media Queries
/ / content
/ / page