03982206 by Yashwant

Mobile templte view example file delete

1 parent 9238933e
Showing 34 changed files with 3 additions and 3940 deletions
...@@ -714,7 +714,7 @@ class FrameworkDbSchema extends Migration { ...@@ -714,7 +714,7 @@ class FrameworkDbSchema extends Migration {
714 array ( 714 array (
715 'id' => 1, 715 'id' => 1,
716 'username' => 'admin', 716 'username' => 'admin',
717 'password' => '$2y$10$3IMlygICC0e0A0yZpbes.OiWPg41e0r71MkUOLRbSH5bNPlFqOayS', 717 'password' => '$2y$10$rMIU1gBhkyJ4eGSTLOzpJu8AcWDxqkh.P1VKtxxpyGI2uoYRrsyIq',
718 'fullname' => 'Admin', 718 'fullname' => 'Admin',
719 'email' => '[email protected]', 719 'email' => '[email protected]',
720 'status' => 'Active', 720 'status' => 'Active',
......
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>nativeDroid II - jQueryMobile Template</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
7
8 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
9 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
10 <link rel="stylesheet" href="/vendor/waves/waves.min.css" />
11 <link rel="stylesheet" href="/vendor/wow/animate.css" />
12 <link rel="stylesheet" href="/css/nativedroid2.css" />
13
14 <style>
15 /* Prevent FOUC */
16 body { opacity: 0; }
17 </style>
18
19 </head>
20 <body>
21
22 <div data-role="page">
23
24 <nd2-include data-src="/examples/fragments/panel.left.html"></nd2-include>
25
26 <div data-role="header" data-position="fixed" class="wow fadeIn">
27 <a href="#leftpanel" class="ui-btn ui-btn-left wow fadeIn" data-wow-delay='0.8s'><i class="zmdi zmdi-menu"></i></a>
28 <h1 class="wow fadeIn" data-wow-delay='0.4s'>Autocomplete</h1>
29 </div>
30
31 <div role="main" class="ui-content wow fadeIn" data-inset="false" data-wow-delay="0.2s">
32
33
34 <ul data-role="listview" data-filter="true" data-filter-reveal="false" data-filter-placeholder="Searching for birds...">
35 <li data-role='list-divider'>Tinamous</li>
36 <li><a href="/wiki/Great_Tinamou" title="Great Tinamou">Great Tinamou</a></li>
37 <li><a href="/wiki/Andean_Tinamou" title="Andean Tinamou">Andean Tinamou</a></li>
38 <li><a href="/wiki/Elegant_Crested_Tinamou" title="Elegant Crested Tinamou">Elegant Crested Tinamou</a></li>
39 <li><a href="/wiki/Little_Tinamou" title="Little Tinamou">Little Tinamou</a></li>
40 <li><a href="/wiki/Slaty-breasted_Tinamou" title="Slaty-breasted Tinamou">Slaty-breasted Tinamou</a></li>
41 <li><a href="/wiki/Thicket_Tinamou" title="Thicket Tinamou">Thicket Tinamou</a></li>
42 <li data-role='list-divider'>Waterfowls</li>
43 <li><a href="/wiki/Southern_Screamer" title="Southern Screamer">Southern Screamer</a></li>
44 <li><a href="/wiki/Horned_Screamer" title="Horned Screamer">Horned Screamer</a></li>
45 <li><a href="/wiki/Magpie-goose" title="Magpie-goose" class="mw-redirect">Magpie-goose</a></li>
46 <li><a href="/wiki/Swan_Goose" title="Swan Goose">Swan Goose</a></li>
47 <li><a href="/wiki/White-faced_Whistling_Duck" title="White-faced Whistling Duck">White-faced Whistling Duck</a></li>
48 <li><a href="/wiki/Greater_White-fronted_Goose" title="Greater White-fronted Goose">Greater White-fronted Goose</a></li>
49 <li><a href="/wiki/Greylag_Goose" title="Greylag Goose">Greylag Goose</a></li>
50 <li><a href="/wiki/Bar-headed_Goose" title="Bar-headed Goose">Bar-headed Goose</a></li>
51 <li><a href="/wiki/Snow_Goose" title="Snow Goose">Snow Goose</a></li>
52 <li><a href="/wiki/Hawaiian_Goose" title="Hawaiian Goose" class="mw-redirect">Nene</a></li>
53 <li><a href="/wiki/Canada_Goose" title="Canada Goose">Canada Goose</a></li>
54 <li><a href="/wiki/Brent_Goose" title="Brent Goose" class="mw-redirect">Brent Goose</a> (Brant)</li>
55 <li><a href="/wiki/Barnacle_Goose" title="Barnacle Goose">Barnacle Goose</a></li>
56 <li><a href="/wiki/Canada_Goose" title="Canada Goose">Canada Goose</a></li>
57 <li><a href="/wiki/Cackling_Goose" title="Cackling Goose">Cackling Goose</a></li>
58 <li><a href="/wiki/Red-breasted_Goose" title="Red-breasted Goose">Red-breasted Goose</a></li>
59 <li><a href="/wiki/Hawaiian_Goose" title="Hawaiian Goose" class="mw-redirect">Hawaiian Goose</a></li>
60 <li><a href="/wiki/N%C4%93n%C4%93-nui" title="Nēnē-nui">Woods-walking Goose</a></li>
61 <li><a href="/wiki/Black_Swan" title="Black Swan">Black Swan</a></li>
62 <li><a href="/wiki/Mute_Swan" title="Mute Swan">Mute Swan</a></li>
63 <li><a href="/wiki/Whooper_Swan" title="Whooper Swan">Whooper Swan</a></li>
64 <li><a href="/wiki/Tundra_Swan" title="Tundra Swan">Tundra Swan</a></li>
65 <li><a href="/wiki/Magellanic_Flightless_Steamer_Duck" title="Magellanic Flightless Steamer Duck" class="mw-redirect">Magellanic Flightless Steamer Duck</a></li>
66 <li><a href="/wiki/Spur-winged_Goose" title="Spur-winged Goose">Spur-winged Goose</a></li>
67 <li><a href="/wiki/Egyptian_Goose" title="Egyptian Goose">Egyptian Goose</a></li>
68 <li><a href="/wiki/Blue_Duck" title="Blue Duck">Blue Duck</a></li>
69 <li><a href="/wiki/Orinoco_Goose" title="Orinoco Goose">Orinoco Goose</a></li>
70 <li><a href="/wiki/Andean_Goose" title="Andean Goose">Andean Goose</a></li>
71 <li><a href="/wiki/African_Pygmy_Goose" title="African Pygmy Goose">African Pygmy Goose</a></li>
72 <li><a href="/wiki/Common_Shelduck" title="Common Shelduck">Common Shelduck</a></li>
73 <li><a href="/wiki/Pink-eared_Duck" title="Pink-eared Duck">Pink-eared Duck</a></li>
74 <li><a href="/wiki/Muscovy_Duck" title="Muscovy Duck">Muscovy Duck</a></li>
75 <li><a href="/wiki/Wood_Duck" title="Wood Duck">Wood Duck</a></li>
76 <li><a href="/wiki/Mandarin_Duck" title="Mandarin Duck">Mandarin Duck</a></li>
77 <li><a href="/wiki/Gadwall" title="Gadwall">Gadwall</a></li>
78 <li><a href="/wiki/American_Wigeon" title="American Wigeon">American Wigeon</a></li>
79 <li><a href="/wiki/Mallard" title="Mallard">Mallard</a></li>
80 <li><a href="/wiki/Northern_Shoveler" title="Northern Shoveler">Northern Shoveler</a></li>
81 <li><a href="/wiki/Brown_Teal" title="Brown Teal">Brown Teal</a></li>
82 <li><a href="/wiki/Northern_Pintail" title="Northern Pintail">Northern Pintail</a></li>
83 <li><a href="/wiki/Common_Teal" title="Common Teal" class="mw-redirect">Common Teal</a></li>
84 <li><a href="/wiki/Marbled_Duck" title="Marbled Duck">Marbled Duck</a></li>
85 <li><a href="/wiki/Common_Pochard" title="Common Pochard">Common Pochard</a></li>
86 <li><a href="/wiki/Tufted_Duck" title="Tufted Duck">Tufted Duck</a></li>
87 <li><a href="/wiki/Greater_Scaup" title="Greater Scaup">Greater Scaup</a></li>
88 <li><a href="/wiki/King_Eider" title="King Eider">King Eider</a></li>
89 <li><a href="/wiki/Harlequin_Duck" title="Harlequin Duck">Harlequin Duck</a></li>
90 <li><a href="/wiki/Black_Scoter" title="Black Scoter">Black Scoter</a></li>
91 <li><a href="/wiki/Long-tailed_Duck" title="Long-tailed Duck">Long-tailed Duck</a></li>
92 <li><a href="/wiki/Common_Goldeneye" title="Common Goldeneye">Common Goldeneye</a></li>
93 <li><a href="/wiki/Smew" title="Smew">Smew</a></li>
94 <li><a href="/wiki/Common_Merganser" title="Common Merganser">Common Merganser</a></li>
95 <li><a href="/wiki/Black-headed_Duck" title="Black-headed Duck">Black-headed Duck</a></li>
96 <li><a href="/wiki/Ruddy_Duck" title="Ruddy Duck">Ruddy Duck</a></li>
97 <li><a href="/wiki/Musk_Duck" title="Musk Duck">Musk Duck</a></li>
98 <li data-role='list-divider'>Birds of Prey</li>
99 <li><a href="/wiki/Turkey_Vulture" title="Turkey Vulture">Turkey Vulture</a></li>
100 <li><a href="/wiki/King_Vulture" title="King Vulture">King Vulture</a></li>
101 <li><a href="/wiki/Black_Vulture" title="Black Vulture">Black vulture</a></li>
102 <li><a href="/wiki/California_Condor" title="California Condor">California Condor</a></li>
103 <li><a href="/wiki/Andean_Condor" title="Andean Condor">Andean Condor</a></li>
104 <li><a href="/wiki/Northern_Caracara" title="Northern Caracara" class="mw-redirect">Northern Crested Caracara</a></li>
105 <li><a href="/wiki/African_Pygmy-falcon" title="African Pygmy-falcon" class="mw-redirect">Pygmy Falcon</a></li>
106 <li><a href="/wiki/Common_Kestrel" title="Common Kestrel">Common Kestrel</a></li>
107 <li><a href="/wiki/Yellow-headed_Caracara" title="Yellow-headed Caracara">Yellow-headed Caracara</a></li>
108 <li><a href="/wiki/Laughing_Falcon" title="Laughing Falcon">Laughing Falcon</a></li>
109 <li><a href="/wiki/Greater_Kestrel" title="Greater Kestrel">Greater Kestrel</a></li>
110 <li><a href="/wiki/Merlin_(bird)" title="Merlin (bird)">Merlin</a></li>
111 <li><a href="/wiki/American_Kestrel" title="American Kestrel">American Kestrel</a></li>
112 <li><a href="/wiki/Eurasian_Hobby" title="Eurasian Hobby">Eurasian Hobby</a></li>
113 <li><a href="/wiki/Lanner_Falcon" title="Lanner Falcon">Lanner Falcon</a></li>
114 <li><a href="/wiki/Gyrfalcon" title="Gyrfalcon">Gyrfalcon</a></li>
115 <li><a href="/wiki/Prairie_Falcon" title="Prairie Falcon">Prairie Falcon</a></li>
116 <li><a href="/wiki/Peregrine_Falcon" title="Peregrine Falcon">Peregrine Falcon</a></li>
117 <li><a href="/wiki/Secretary_Bird" title="Secretary Bird" class="mw-redirect">Secretary Bird</a></li>
118 <li><a href="/wiki/Osprey" title="Osprey">Osprey</a></li>
119 <li><a href="/wiki/European_Honey_Buzzard" title="European Honey Buzzard">European Honey Buzzard</a></li>
120 <li><a href="/wiki/Swallow-tailed_Kite" title="Swallow-tailed Kite">Swallow-tailed Kite</a></li>
121 <li><a href="/wiki/Snail_Kite" title="Snail Kite">Snail Kite</a></li>
122 <li><a href="/wiki/Mississippi_Kite" title="Mississippi Kite">Mississippi Kite</a></li>
123 <li><a href="/wiki/Red_Kite" title="Red Kite">Red Kite</a></li>
124 <li><a href="/wiki/White-tailed_Eagle" title="White-tailed Eagle">White-tailed Eagle</a></li>
125 <li><a href="/wiki/Black_Kite" title="Black Kite">Black Kite</a></li>
126 <li><a href="/wiki/Brahminy_Kite" title="Brahminy Kite">Brahminy Kite</a></li>
127 <li><a href="/wiki/African_Fish_Eagle" title="African Fish Eagle">African Fish Eagle</a></li>
128 <li><a href="/wiki/Bald_Eagle" title="Bald Eagle">Bald Eagle</a></li>
129 <li><a href="/wiki/Palm-nut_Vulture" title="Palm-nut Vulture">Palm-nut Vulture</a></li>
130 <li><a href="/wiki/Bearded_Vulture" title="Bearded Vulture">Bearded Vulture</a></li>
131 <li><a href="/wiki/Steller%27s_Sea_Eagle" title="Steller's Sea Eagle">Steller's Sea Eagle</a></li>
132 <li><a href="/wiki/Egyptian_Vulture" title="Egyptian Vulture">Egyptian Vulture</a></li>
133 <li><a href="/wiki/White-backed_Vulture" title="White-backed Vulture">White-backed Vulture</a></li>
134 <li><a href="/wiki/Indian_Vulture" title="Indian Vulture">Indian Vulture</a></li>
135 <li><a href="/wiki/Griffon_Vulture" title="Griffon Vulture">Griffon Vulture</a></li>
136 <li><a href="/wiki/R%C3%BCppell%27s_Vulture" title="Rüppell's Vulture">Rüppell's Vulture</a></li>
137 <li><a href="/wiki/Lappet-faced_Vulture" title="Lappet-faced Vulture">Lappet-faced Vulture</a></li>
138 <li><a href="/wiki/Black-chested_Snake-eagle" title="Black-chested Snake-eagle" class="mw-redirect">Black-chested Snake-eagle</a></li>
139 <li><a href="/wiki/Crested_Serpent_Eagle" title="Crested Serpent Eagle">Crested Serpent Eagle</a></li>
140 <li><a href="/wiki/Western_Marsh_Harrier" title="Western Marsh Harrier">Western Marsh Harrier</a></li>
141 <li><a href="/wiki/Bateleur" title="Bateleur">Bateleur</a></li>
142 <li><a href="/wiki/Pied_Harrier" title="Pied Harrier">Pied Harrier</a></li>
143 <li><a href="/wiki/Harrier_Hawk" title="Harrier Hawk" class="mw-redirect">African Harrier Hawk</a></li>
144 <li><a href="/wiki/Hen_Harrier" title="Hen Harrier">Northern Harrier</a></li>
145 <li><a href="/wiki/Lizard_Buzzard" title="Lizard Buzzard">Lizard Buzzard</a></li>
146 <li><a href="/wiki/Spotted_Harrier" title="Spotted Harrier">Spotted Harrier</a></li>
147 <li><a href="/wiki/Grey_Goshawk" title="Grey Goshawk">Grey Goshawk</a></li>
148 <li><a href="/wiki/Dark_Chanting_Goshawk" title="Dark Chanting Goshawk">Dark Chanting Goshawk</a></li>
149 <li><a href="/wiki/Little_Sparrowhawk" title="Little Sparrowhawk">Little Sparrowhawk</a></li>
150 <li><a href="/wiki/Besra" title="Besra">Besra</a></li>
151 <li><a href="/wiki/Eurasian_Sparrowhawk" title="Eurasian Sparrowhawk">Eurasian Sparrowhawk</a></li>
152 <li><a href="/wiki/Cooper%27s_Hawk" title="Cooper's Hawk">Cooper's Hawk</a></li>
153 <li><a href="/wiki/Northern_Goshawk" title="Northern Goshawk">Northern Goshawk</a></li>
154 <li><a href="/wiki/Grasshopper_Buzzard" title="Grasshopper Buzzard">Grasshopper Buzzard</a></li>
155 <li><a href="/wiki/Crane_Hawk" title="Crane Hawk">Crane Hawk</a></li>
156 <li><a href="/wiki/Plumbeous_Hawk" title="Plumbeous Hawk">Plumbeous Hawk</a></li>
157 <li><a href="/wiki/Common_Black_Hawk" title="Common Black Hawk">Common Black Hawk</a></li>
158 <li><a href="/wiki/Savanna_Hawk" title="Savanna Hawk">Savanna Hawk</a></li>
159 <li><a href="/wiki/White_Hawk" title="White Hawk">White Hawk</a></li>
160 <li><a href="/wiki/Harris%27s_Hawk" title="Harris's Hawk">Harris' Hawk</a></li>
161 <li><a href="/wiki/Black-collared_Hawk" title="Black-collared Hawk">Black-collared Hawk</a></li>
162 <li><a href="/wiki/Solitary_Eagle" title="Solitary Eagle" class="mw-redirect">Solitary Eagle</a></li>
163 <li><a href="/wiki/Red-shouldered_Hawk" title="Red-shouldered Hawk">Red-shouldered Hawk</a></li>
164 <li><a href="/wiki/Swainson%27s_Hawk" title="Swainson's Hawk">Swainson's Hawk</a></li>
165 <li><a href="/wiki/Gal%C3%A1pagos_Hawk" title="Galápagos Hawk" class="mw-redirect">Galápagos Hawk</a></li>
166 <li><a href="/wiki/Zone-tailed_Hawk" title="Zone-tailed Hawk">Zone-tailed Hawk</a></li>
167 <li><a href="/wiki/Red-tailed_Hawk" title="Red-tailed Hawk">Red-tailed Hawk</a></li>
168 <li><a href="/wiki/Common_Buzzard" title="Common Buzzard">Common Buzzard</a></li>
169 <li><a href="/wiki/Ferruginous_Hawk" title="Ferruginous Hawk">Ferruginous Hawk</a></li>
170 <li><a href="/wiki/Long-legged_Buzzard" title="Long-legged Buzzard">Long-legged Buzzard</a></li>
171 <li><a href="/wiki/Harpy_Eagle" title="Harpy Eagle">Harpy Eagle</a></li>
172 <li><a href="/wiki/Philippine_Eagle" title="Philippine Eagle">Philippine Eagle</a></li>
173 <li><a href="/wiki/Crested_Eagle" title="Crested Eagle">Crested Eagle</a></li>
174 <li><a href="/wiki/Black_Eagle" title="Black Eagle">Indian Black Eagle</a></li>
175 <li><a href="/wiki/Greater_Spotted_Eagle" title="Greater Spotted Eagle">Greater Spotted Eagle</a></li>
176 <li><a href="/wiki/Eastern_Imperial_Eagle" title="Eastern Imperial Eagle">Eastern Imperial Eagle</a></li>
177 <li><a href="/wiki/Golden_Eagle" title="Golden Eagle">Golden Eagle</a></li>
178 <li><a href="/wiki/Wedge-tailed_Eagle" title="Wedge-tailed Eagle">Wedge-tailed Eagle</a></li>
179 <li><a href="/wiki/Verreaux%27s_Eagle" title="Verreaux's Eagle">Verreaux's Eagle</a></li>
180 <li><a href="/wiki/Wahlberg%27s_Eagle" title="Wahlberg's Eagle">Wahlberg's Eagle</a></li>
181 <li><a href="/wiki/Black-and-white_Hawk-eagle" title="Black-and-white Hawk-eagle" class="mw-redirect">Black-and-white Hawk-eagle</a></li>
182 <li><a href="/wiki/Martial_Eagle" title="Martial Eagle">Martial Eagle</a></li>
183 <li><a href="/wiki/Philippine_Hawk-eagle" title="Philippine Hawk-eagle" class="mw-redirect">Philippine Hawk-eagle</a></li>
184 <li><a href="/wiki/Crowned_Eagle" title="Crowned Eagle">Crowned Eagle</a></li>
185 </ul>
186
187
188 </div>
189
190 </div>
191
192 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
193 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
194 <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
195 <script src="/vendor/waves/waves.min.js"></script>
196 <script src="/vendor/wow/wow.min.js"></script>
197 <script src="/js/nativedroid2.js"></script>
198 <script src="/nd2settings.js"></script>
199
200 </body>
201 </html>
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>nativeDroid II - jQueryMobile Template</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6
7 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
8 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
9 <link rel="stylesheet" href="/vendor/waves/waves.min.css" />
10 <link rel="stylesheet" href="/vendor/wow/animate.css" />
11 <link rel="stylesheet" href="/css/nativedroid2.css" />
12
13 <style>
14 /* Prevent FOUC */
15 body { opacity: 0; }
16 </style>
17
18 </head>
19 <body>
20
21 <div data-role="page">
22
23 <nd2-include data-src="/examples/fragments/panel.left.html"></nd2-include>
24
25
26 <div data-role="header" data-position="fixed" class="wow fadeIn">
27 <a href="#leftpanel" class="ui-btn ui-btn-left wow fadeIn" data-wow-delay='0.8s'><i class="zmdi zmdi-menu"></i></a>
28 <h1 class="wow fadeIn" data-wow-delay='0.4s'>Buttons</h1>
29 </div>
30
31
32 <div role="main" class="ui-content wow fadeIn" data-wow-delay="0.2s" data-inset="false">
33
34
35 <div class="row">
36
37 <div class="col-xs-12 col-sm-6 col-md-4">
38 <div class="box">
39 <h4>Default .ui-btn</h4>
40 <hr>
41
42 <h6>Active</h6>
43 <a href="#" class="ui-btn">Anchor Link Button</a>
44 <button class="ui-btn">Button</button>
45
46 <a href="#" class="ui-btn clr-primary">Primary Button</a>
47 <a href="#" class="ui-btn clr-warning">Warning Button</a>
48
49
50 <h6>Raised (.ui-btn-raised)</h6>
51 <a href="#" class="ui-btn ui-btn-raised">Default Button Raised</a>
52 <a href="#" class="ui-btn ui-btn-raised clr-primary">Primary Button Raised</a>
53 <a href="#" class="ui-btn ui-btn-raised clr-warning">Warning Button Raised</a>
54 <a href="#" class="ui-btn ui-btn-raised ui-disabled">Raised Disabled</a>
55
56
57 <h6>Disabled</h6>
58 <a href="#" class="ui-btn ui-disabled">Anchor Link Button (.ui-disabled)</a>
59 <button class="ui-btn" disabled>Button (attribute 'disabled')</button>
60
61 <h6>.ui-btn-inline</h6>
62 <a href="#" class="ui-btn ui-btn-inline">Anchor inline</a>
63 <button class="ui-btn ui-btn-inline">Button inline</button>
64
65 <h6>.ui-mini</h6>
66 <a href="#" class="ui-btn ui-mini">Anchor mini</a>
67 <button class="ui-btn ui-mini">Button mini</button>
68
69 <h6>.ui-mini + inline</h6>
70 <a href="#" class="ui-btn ui-mini ui-btn-inline">Anchor mini inline</a>
71 <button class="ui-btn ui-mini ui-btn-inline">Button mini inline</button>
72
73 </div>
74 </div>
75 <div class="col-xs-12 col-sm-6 col-md-4">
76 <div class="box">
77 <h4>.ui-btn with Icons</h4>
78 <hr>
79
80 <h6>Active</h6>
81 <a href="#" class="ui-btn ui-btn-icon-left"><i class='zmdi zmdi-plus'></i> add this item</a>
82 <button class="ui-btn"><i class="zmdi zmdi-delete ui-pull-left"></i> add to trash</button>
83
84 <a href="#" class="ui-btn ui-btn-icon-right"><i class='zmdi zmdi-unfold-less'></i> shrink</a>
85 <button class="ui-btn"><i class="zmdi ui-pull-right zmdi-unfold-more"></i> expand</button>
86
87 <a href="#" class="ui-btn"><i class='zmdi zmdi-folder-outline'></i> open folder</a>
88 <button class="ui-btn"><i class="zmdi zmdi-mail-send"></i> submit form</button>
89
90 <a href="#" class="ui-btn ui-btn-icon-block"><i class='zmdi zmdi-edit zmd-2x'></i>edit article</a>
91
92
93 <h6>Disabled</h6>
94
95 <a href="#" class="ui-btn ui-btn-icon-left ui-disabled"><i class='zmdi zmdi-plus'></i> add this item</a>
96 <button class="ui-btn" disabled><i class="zmdi zmdi-delete ui-pull-left"></i> add to trash</button>
97
98 <a href="#" class="ui-btn ui-btn-icon-right ui-disabled"><i class='zmdi zmdi-unfold-less'></i> shrink</a>
99 <button class="ui-btn" disabled><i class="zmdi ui-pull-right zmdi-unfold-more"></i> expand</button>
100
101 <a href="#" class="ui-btn ui-disabled"><i class='zmdi zmdi-folder-outline'></i> open folder</a>
102 <button class="ui-btn" disabled><i class="zmdi zmdi-mail-send"></i> submit form</button>
103
104 <a href="#" class="ui-btn ui-btn-icon-block ui-disabled"><i class='zmdi zmdi-edit zmd-2x'></i>edit article</a>
105
106
107 <h6>.ui-btn-inline</h6>
108
109 <a href="#" class="ui-btn ui-btn-inline ui-btn-icon-left"><i class='zmdi zmdi-plus'></i> add this item</a>
110 <button class="ui-btn ui-btn-inline"><i class="zmdi zmdi-delete ui-pull-left"></i> add to trash</button>
111
112 <a href="#" class="ui-btn ui-btn-inline ui-btn-icon-right"><i class='zmdi zmdi-unfold-less'></i> shrink</a>
113 <button class="ui-btn ui-btn-inline"><i class="zmdi ui-pull-right zmdi-unfold-more"></i> expand</button>
114
115 <a href="#" class="ui-btn ui-btn-inline"><i class='zmdi zmdi-folder-outline'></i> open folder</a>
116 <button class="ui-btn ui-btn-inline"><i class="zmdi zmdi-mail-send"></i> submit form</button>
117
118 <a href="#" class="ui-btn ui-btn-inline ui-btn-icon-block"><i class='zmdi zmdi-edit zmd-2x'></i>edit article</a>
119
120
121 <h6>.ui-mini</h6>
122
123 <a href="#" class="ui-btn ui-mini ui-btn-icon-left"><i class='zmdi zmdi-plus'></i> add this item</a>
124 <button class="ui-btn ui-mini"><i class="zmdi zmdi-delete ui-pull-left"></i> add to trash</button>
125
126 <a href="#" class="ui-btn ui-mini ui-btn-icon-right"><i class='zmdi zmdi-unfold-less'></i> shrink</a>
127 <button class="ui-btn ui-mini"><i class="zmdi ui-pull-right zmdi-unfold-more"></i> expand</button>
128
129 <a href="#" class="ui-btn ui-mini"><i class='zmdi zmdi-folder-outline'></i> open folder</a>
130 <button class="ui-btn ui-mini"><i class="zmdi zmdi-mail-send"></i> submit form</button>
131
132 <a href="#" class="ui-btn ui-mini ui-btn-icon-block"><i class='zmdi zmdi-edit zmd-2x'></i>edit article</a>
133
134 <h6>.ui-mini + inline</h6>
135
136 <a href="#" class="ui-btn ui-mini ui-btn-inline ui-btn-icon-left"><i class='zmdi zmdi-plus'></i> add this item</a>
137 <button class="ui-btn ui-mini ui-btn-inline"><i class="zmdi zmdi-delete ui-pull-left"></i> add to trash</button>
138
139 <a href="#" class="ui-btn ui-mini ui-btn-inline ui-btn-icon-right"><i class='zmdi zmdi-unfold-less'></i> shrink</a>
140 <button class="ui-btn ui-mini ui-btn-inline"><i class="zmdi ui-pull-right zmdi-unfold-more"></i> expand</button>
141
142 <a href="#" class="ui-btn ui-mini ui-btn-inline"><i class='zmdi zmdi-folder-outline'></i> open folder</a>
143 <button class="ui-btn ui-mini ui-btn-inline"><i class="zmdi zmdi-mail-send"></i> submit form</button>
144
145 <a href="#" class="ui-btn ui-mini ui-btn-inline ui-btn-icon-block"><i class='zmdi zmdi-edit zmd-2x'></i>edit article</a>
146
147
148 </div>
149 </div>
150 <div class="col-xs-12 col-sm-6 col-md-4">
151 <div class="box">
152
153 <h4>.ui-btn only Icons</h4>
154 <hr>
155
156 <h6>Active</h6>
157
158 <a href="#" class="ui-btn ui-btn-inline"><i class='zmdi zmdi-plus zmd-2x'></i></a>
159 <button class="ui-btn ui-btn-inline"><i class="zmdi zmdi-delete zmd-2x"></i></button>
160
161 <a href="#" class="ui-btn ui-btn-inline ui-mini"><i class='zmdi zmdi-cut zmd-2x'></i></a>
162 <button class="ui-btn ui-btn-inline ui-mini"><i class="zmdi zmdi-money zmd-2x"></i></button>
163
164 <a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-mic-off zmd-2x'></i></a>
165 <button class="ui-btn ui-btn-inline ui-btn-fab"><i class="zmdi zmdi-replay zmd-2x"></i></button>
166
167 <a href="#" class="ui-btn ui-btn-inline ui-btn-fab ui-mini"><i class='zmdi zmdi-phone zmd-2x'></i></a>
168 <button class="ui-btn ui-btn-inline ui-btn-fab ui-mini"><i class="zmdi zmdi-file-text zmd-2x"></i></button>
169
170
171 <a href="#" class="ui-btn ui-btn-inline ui-btn-raised"><i class='zmdi zmdi-plus zmd-2x'></i></a>
172 <button class="ui-btn ui-btn-inline ui-btn-raised"><i class="zmdi zmdi-delete zmd-2x"></i></button>
173
174 <a href="#" class="ui-btn ui-btn-inline ui-mini ui-btn-raised clr-primary"><i class='zmdi zmdi-cut zmd-2x'></i></a>
175 <button class="ui-btn ui-btn-inline ui-mini ui-btn-raised clr-warning"><i class="zmdi zmdi-money zmd-2x"></i></button>
176
177 <a href="#" class="ui-btn ui-btn-inline ui-btn-fab ui-btn-raised clr-primary"><i class='zmdi zmdi-mic-off zmd-2x'></i></a>
178 <button class="ui-btn ui-btn-inline ui-btn-fab ui-btn-raised clr-warning"><i class="zmdi zmdi-replay zmd-2x"></i></button>
179
180 <a href="#" class="ui-btn ui-btn-inline ui-btn-fab ui-mini ui-btn-raised clr-primary"><i class='zmdi zmdi-phone zmd-2x'></i></a>
181 <button class="ui-btn ui-btn-inline ui-btn-fab ui-mini ui-btn-raised clr-warning"><i class="zmdi zmdi-file-text zmd-2x"></i></button>
182
183
184 <h6>Disabled</h6>
185
186 <a href="#" class="ui-btn ui-btn-inline ui-disabled"><i class='zmdi zmdi-plus zmd-2x'></i></a>
187 <button class="ui-btn ui-btn-inline ui-disabled" disabled><i class="zmdi zmdi-delete zmd-2x"></i></button>
188
189 <a href="#" class="ui-btn ui-btn-inline ui-disabled ui-mini"><i class='zmdi zmdi-cut zmd-2x'></i></a>
190 <button class="ui-btn ui-btn-inline ui-mini ui-disabled" disabled><i class="zmdi zmdi-money zmd-2x"></i></button>
191
192 <a href="#" class="ui-btn ui-btn-inline ui-disabled ui-btn-fab"><i class='zmdi zmdi-mic-off zmd-2x'></i></a>
193 <button class="ui-btn ui-btn-inline ui-btn-fab ui-disabled" disabled><i class="zmdi zmdi-replay zmd-2x"></i></button>
194
195 <a href="#" class="ui-btn ui-btn-inline ui-btn-fab ui-disabled ui-mini"><i class='zmdi zmdi-phone zmd-2x'></i></a>
196 <button class="ui-btn ui-btn-inline ui-btn-fab ui-mini ui-disabled" disabled><i class="zmdi zmdi-file-text zmd-2x"></i></button>
197
198 <a href="#" class="ui-btn ui-btn-inline ui-btn-fab ui-disabled ui-mini ui-btn-raised"><i class='zmdi zmdi-phone zmd-2x'></i></a>
199 <button class="ui-btn ui-btn-inline ui-btn-fab ui-mini ui-btn-raised ui-disabled" disabled><i class="zmdi zmdi-file-text zmd-2x"></i></button>
200
201
202 </div>
203 </div>
204
205 </div>
206
207
208 </div>
209
210 </div>
211
212 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
213 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
214 <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
215 <script src="/vendor/waves/waves.min.js"></script>
216 <script src="/vendor/wow/wow.min.js"></script>
217 <script src="/js/nativedroid2.js"></script>
218 <script src="/nd2settings.js"></script>
219
220 </body>
221 </html>
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>nativeDroid II - jQueryMobile Template</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6
7 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
8 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
9 <link rel="stylesheet" href="/vendor/waves/waves.min.css" />
10 <link rel="stylesheet" href="/css/nativedroid2.css" />
11
12 <style>
13 /* Prevent FOUC */
14 body { opacity: 0; }
15 </style>
16
17 </head>
18 <body>
19
20 <div data-role="page">
21
22 <nd2-include data-src="/examples/fragments/panel.left.html"></nd2-include>
23
24 <div data-role="header" data-position="fixed" class="wow fadeIn">
25 <a href="#leftpanel" class="ui-btn ui-btn-left wow fadeIn" data-wow-delay='0.8s'><i class="zmdi zmdi-menu"></i></a>
26 <h1 class="wow fadeIn" data-wow-delay='0.4s'>Collapsible &amp; Accordion</h1>
27 </div>
28
29 <div role="main" class="ui-content wow fadeIn" data-wow-delay="0.2s" data-inset="false">
30
31 <h4>Collapsible</h4>
32
33 <div data-role="collapsible" data-inset="false">
34 <h4>Collapsible Listview</h4>
35 <ul data-role="listview">
36 <li><a href="#">Lorem ipsum dolor</a></li>
37 <li><a href="#">sit amet</a></li>
38 <li><a href="#">consectetur adipisicing</a></li>
39 <li><a href="#">elit sed do eiusmod</a></li>
40 <li><a href="#">tempor incididunt.</a></li>
41 </ul>
42 </div>
43
44 <div data-role="collapsible" data-inset="false">
45 <h4>Collapsible Content</h4>
46 <div>
47 <h4>Wow, thats cool.</h4>
48 <p>Im a collapsible content.</p>
49 </div>
50 </div>
51
52 <hr />
53
54 <h4>Accordions</h4>
55
56 <div data-role="collapsible-set" data-inset="false">
57 <div data-role="collapsible">
58 <h3>Content</h3>
59 <div class='inset'>
60 <h4>Wow, thats cool.</h4>
61 </div>
62 </div>
63 <div data-role="collapsible">
64 <h3>Listview</h3>
65 <div>
66 <ul data-role="listview">
67 <li>Cats</li>
68 <li>Dogs</li>
69 <li>Lizards</li>
70 <li>Snakes</li>
71 </ul>
72 </div>
73 </div>
74 </div>
75
76
77
78 </div>
79
80 </div>
81
82 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
83 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
84 <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
85 <script src="/vendor/waves/waves.min.js"></script>
86 <script src="/js/nativedroid2.js"></script>
87 <script src="/nd2settings.js"></script>
88
89 </body>
90 </html>
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>nativeDroid II - jQueryMobile Template</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6
7 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
8 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
9 <link rel="stylesheet" href="/vendor/waves/waves.min.css" />
10 <link rel="stylesheet" href="/vendor/wow/animate.css" />
11 <link rel="stylesheet" href="/css/nativedroid2.css" />
12
13 <style>
14 /* Prevent FOUC */
15 body { opacity: 0; }
16 </style>
17
18 </head>
19 <body>
20
21 <div data-role="page">
22
23 <nd2-include data-src="/examples/fragments/panel.left.html"></nd2-include>
24
25 <div data-role="header" data-position="fixed" class="wow fadeIn">
26 <a href="#leftpanel" class="ui-btn ui-btn-left wow fadeIn" data-wow-delay='0.8s'><i class="zmdi zmdi-menu"></i></a>
27 <h1 class="wow fadeIn" data-wow-delay='0.4s'>Dialog &amp; Popup</h1>
28 </div>
29
30 <div role="main" class="ui-content wow fadeIn" data-wow-delay="0.2s" data-inset="false">
31
32 <h2>Popup Dialog</h2>
33 <a href="#popupDialog" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="pop"><i class='lIcon fa fa-external-link'></i> Open popup dialog</a>
34
35 <div data-role="popup" id="popupDialog">
36
37 <div data-role="header">
38 <h1 class='nd-title'>Delete from library?</h1>
39 </div>
40
41 <div data-role="content">
42 <p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
43 <a href="dialog/index.html" data-rel="back" data-role="button" data-inline="true" class="ui-btn ui-btn-primary"><i class='zmdi zmdi-check'></i> Sounds good</a>
44 <a href="dialog/index.html" data-rel="back" data-role="button" data-inline="true" class="ui-btn ui-btn-primary"><i class='zmdi zmdi-cancel'></i> Cancel</a>
45
46 </div>
47 </div>
48
49 </div>
50
51 </div>
52
53 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
54 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
55 <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
56 <script src="/vendor/waves/waves.min.js"></script>
57 <script src="/vendor/wow/wow.min.js"></script>
58 <script src="/js/nativedroid2.js"></script>
59 <script src="/nd2settings.js"></script>
60
61 </body>
62 </html>
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>nativeDroid II - jQueryMobile Template</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6
7 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
8 <link rel="stylesheet" href="/vendor/jquerymobile/jquery.mobile.min.css" />
9 <link rel="stylesheet" href="/vendor/waves/waves.min.css" />
10 <link rel="stylesheet" href="/vendor/wow/animate.css" />
11 <link rel="stylesheet" href="/css/nativedroid2.css" />
12
13 <style>
14 /* Prevent FOUC */
15 body { opacity: 0; }
16 </style>
17
18 </head>
19 <body>
20
21 <div data-role="page" class="nd2-no-menu-swipe">
22
23 <nd2-include data-src="/examples/fragments/panel.left.html"></nd2-include>
24
25 <div data-role="header" data-position="fixed" class="wow fadeIn">
26 <a href="#leftpanel" class="ui-btn ui-btn-left wow fadeIn" data-wow-delay='0.8s'><i class="zmdi zmdi-menu"></i></a>
27 <h1 class="wow fadeIn" data-wow-delay='0.4s'>Forms</h1>
28 </div>
29
30 <div role="main" class="ui-content wow fadeIn" data-inset="false" data-wow-delay="0.2s">
31
32
33 <form>
34
35
36 <div class="row">
37
38 <div class="col-xs-12 col-sm-6 col-md-4">
39 <div class="box">
40
41 <fieldset data-role="controlgroup">
42 <legend>Checkboxes</legend>
43 <input type="checkbox" name="checkbox-1a" id="checkbox-1ab" checked="">
44 <label for="checkbox-1ab">Cheetos</label>
45 <input type="checkbox" name="checkbox-2a" id="checkbox-2ab">
46 <label for="checkbox-2ab">Doritos</label>
47 <input type="checkbox" name="checkbox-3a" id="checkbox-3ab">
48 <label for="checkbox-3ab">Fritos</label>
49 <input type="checkbox" name="checkbox-4a" id="checkbox-4ab">
50 <label for="checkbox-4ab">Sun Chips</label>
51 </fieldset>
52
53 <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
54 <legend>Checkboxes horizontal</legend>
55 <input type="checkbox" name="checkbox-6" id="checkbox-6b">
56 <label for="checkbox-6b">b</label>
57 <input type="checkbox" name="checkbox-7" id="checkbox-7b" checked="">
58 <label for="checkbox-7b"><em>i</em></label>
59 <input type="checkbox" name="checkbox-8" id="checkbox-8b">
60 <label for="checkbox-8b">u</label>
61 </fieldset>
62
63 <fieldset data-role="controlgroup">
64 <legend>Radio Buttons</legend>
65 <input type="radio" name="radio-choice-1" id="radio-choice-1b" value="choice-1" checked="checked">
66 <label for="radio-choice-1b">Cat</label>
67 <input type="radio" name="radio-choice-1" id="radio-choice-2b" value="choice-2">
68 <label for="radio-choice-2b">Dog</label>
69 <input type="radio" name="radio-choice-1" id="radio-choice-3b" value="choice-3">
70 <label for="radio-choice-3b">Hamster</label>
71 <input type="radio" name="radio-choice-1" id="radio-choice-4b" value="choice-4">
72 <label for="radio-choice-4b">Lizard</label>
73 </fieldset>
74
75 <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
76 <legend>Radio Buttons</legend>
77 <input type="radio" name="radio-choice-a" id="radio-choice-ab" value="choice-a" checked="checked">
78 <label for="radio-choice-ab">Select</label>
79 <input type="radio" name="radio-choice-a" id="radio-choice-bb" value="choice-b">
80 <label for="radio-choice-bb">one</label>
81 <input type="radio" name="radio-choice-a" id="radio-choice-cb" value="choice-c">
82 <label for="radio-choice-cb">thing</label>
83 <input type="radio" name="radio-choice-a" id="radio-choice-db" value="choice-d">
84 <label for="radio-choice-db">here!</label>
85 </fieldset>
86
87 </div>
88
89 </div>
90 <div class="col-xs-12 col-sm-6 col-md-4">
91 <div class="box">
92
93 <label for="name2b">Text Input:</label>
94 <input type="text" name="name2" id="name2b" value="" data-clear-btn="true" placeholder="Type your text here...">
95
96 <label for="inputDate">Input type Date:</label>
97 <input type="date" name="inputDate" id="inputDate" value="" data-clear-btn="true" placeholder="">
98
99 <label for="inputColor">Input type Color:</label>
100 <input type="color" name="inputColor" id="inputColor" value="" data-clear-btn="true" placeholder="">
101
102 <label for="inputDatetime">Input type datetime:</label>
103 <input type="datetime" name="inputDatetime" id="inputDatetime" value="" data-clear-btn="true" placeholder="">
104
105 <label for="inputEmail">Input type email:</label>
106 <input type="email" name="inputEmail" id="inputEmail" value="" data-clear-btn="true" placeholder="">
107
108 <label for="inputMonth">Input type month:</label>
109 <input type="month" name="inputMonth" id="inputMonth" value="" data-clear-btn="true" placeholder="">
110
111 <label for="inputTime">Input type time:</label>
112 <input type="time" name="inputTime" id="inputTime" value="" data-clear-btn="true" placeholder="">
113
114 <label for="inputUrl">Input type url:</label>
115 <input type="url" name="inputUrl" id="inputUrl" value="" data-clear-btn="true" placeholder="">
116
117 <label for="inputWeek">Input type week:</label>
118 <input type="week" name="inputWeek" id="inputWeek" value="" data-clear-btn="true" placeholder="">
119
120 <label for="textarea2b">Textarea:</label>
121 <textarea cols="40" rows="8" name="textarea2" id="textarea2b" placeholder="This is a textarea"></textarea>
122
123
124 </div>
125
126 </div>
127 <div class="col-xs-12 col-sm-6 col-md-4">
128 <div class="box">
129
130
131 <label for="flip2b">Flip switch:</label>
132 <select name="flip2" id="flip2b" data-role="flipswitch">
133 <option value="off">Off</option>
134 <option value="on">On</option>
135 </select>
136
137 <label for="slider2b">Slider:</label>
138 <input type="range" name="slider2" id="slider2b" value="0" min="0" max="100" data-highlight="true">
139
140 <div data-role='rangeslider'>
141 <label for='rangeslider1a'>RangeSlider:</label>
142 <input type='range' name='range1a' id='range1a' min='0' max='100' value='40'>
143 <label for='rangeslider1b'>RangeSlider:</label>
144 <input type='range' name='range1b' id='range1b' min='0' max='100' value='80'>
145 </div>
146
147 <label for="select-choice-1b" class="select">Select</label>
148 <select name="select-choice-1" id="select-choice-1b" data-native-menu="false">
149 <option value="javascript">JavaScript</option>
150 <option value="css">CSS</option>
151 <option value="html">HTML</option>
152 <option value="csharp">C#</option>
153 <option value="java">Java</option>
154 </select>
155
156 <label for="select-choice-8b" class="select">Multi-select</label>
157 <select name="select-choice-8" id="select-choice-8b" multiple="multiple" data-icon="grid" data-iconpos="left" data-native-menu="false">
158 <option>Choose a few options:</option>
159 <optgroup label="USPS">
160 <option value="standard" selected="">Standard: 7 day</option>
161 <option value="rush">Rush: 3 days</option>
162 <option value="express">Express: next day</option>
163 <option value="overnight">Overnight</option>
164 </optgroup>
165 <optgroup label="FedEx">
166 <option value="firstOvernight">First Overnight</option>
167 <option value="expressSaver">Express Saver</option>
168 <option value="ground">Ground</option>
169 </optgroup>
170 </select>
171
172 </div>
173
174 </div>
175 </div>
176
177 </form>
178
179
180 </div>
181
182 </div>
183
184 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
185 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
186 <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
187 <script src="/vendor/waves/waves.min.js"></script>
188 <script src="/vendor/wow/wow.min.js"></script>
189 <script src="/js/nativedroid2.js"></script>
190 <script src="/nd2settings.js"></script>
191
192 </body>
193 </html>
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>nativeDroid II - jQueryMobile Template</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6
7 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
8 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
9 <link rel="stylesheet" href="/vendor/waves/waves.min.css" />
10 <link rel="stylesheet" href="/vendor/wow/animate.css" />
11 <link rel="stylesheet" href="/css/nativedroid2.css" />
12
13 <style>
14 /* Prevent FOUC */
15 body { opacity: 0; }
16 </style>
17
18 </head>
19 <body>
20
21 <div data-role="page">
22
23 <nd2-include data-src="/examples/fragments/panel.left.html"></nd2-include>
24
25
26 <div data-role="header" data-position="fixed" class="wow fadeIn">
27 <a href="http://flexboxgrid.com/" class="ui-btn ui-btn-right wow fadeIn" data-wow-delay='1.2s'><i class="zmdi zmdi-link"></i></a>
28 <a href="#leftpanel" class="ui-btn ui-btn-left wow fadeIn" data-wow-delay='0.8s'><i class="zmdi zmdi-menu"></i></a>
29 <h1 class="wow fadeIn" data-wow-delay='0.4s'>Flexboxgrid</h1>
30 </div>
31
32
33 <div role="main" class="ui-content wow fadeIn" data-wow-delay="0.2s" data-inset="false">
34
35
36 <h5 class="nd2-headline">Simple Flexbox Grid System</h5>
37 <p>
38 Alternative to the Grid System of jQueryMobile nativeDroid II included the popular and easy to learn, modern css flexbox Grid System from <a href="http://flexboxgrid.com">flexboxgrid.com</a>.
39 </p>
40 <p>
41 The syntax is almost identical to Twitter Bootstrap's Grid System with the benefits of css flexbox.
42 </p>
43 <p>
44 For more Information we refer to its <a href="http://flexboxgrid.com/">official Documentation</a>.
45 </p>
46
47
48 </div>
49
50 </div>
51
52 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
53 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
54 <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
55 <script src="/vendor/waves/waves.min.js"></script>
56 <script src="/vendor/wow/wow.min.js"></script>
57 <script src="/js/nativedroid2.js"></script>
58 <script src="/nd2settings.js"></script>
59
60 </body>
61 </html>
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>nativeDroid II - jQueryMobile Template</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6
7 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
8 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
9 <link rel="stylesheet" href="/vendor/waves/waves.min.css" />
10 <link rel="stylesheet" href="/css/nativedroid2.css" />
11
12 <style>
13 /* Prevent FOUC */
14 body { opacity: 0; }
15 </style>
16
17 </head>
18 <body>
19
20 <div data-role="page">
21
22 <nd2-include data-src="/examples/fragments/panel.left.html"></nd2-include>
23
24 <div data-role="panel" id="bottomsheet" class="ui-bottom-sheet ui-bottom-sheet-list" data-animate="false" data-position='bottom' data-display="overlay">
25 <nd2-include data-src="/examples/fragments/bottom.sheet.html"></nd2-include>
26 </div>
27
28
29 <div data-role="panel" id="bottomsheetblock" class="ui-bottom-sheet" data-animate="false" data-position='bottom' data-display="overlay">
30 <nd2-include data-src="/examples/fragments/bottom.sheet.html"></nd2-include>
31 </div>
32
33 <div data-role="header" data-position="fixed" class="wow fadeIn">
34 <a href="#bottomsheetblock" class="ui-btn ui-btn-right wow fadeIn" data-wow-delay='1.2s'><i class="zmdi zmdi-more-vert"></i></a>
35 <a href="#leftpanel" class="ui-btn ui-btn-left wow fadeIn" data-wow-delay='0.8s'><i class="zmdi zmdi-menu"></i></a>
36 <h1 class="wow fadeIn" data-wow-delay='0.4s'>Header &amp; Footer</h1>
37 </div>
38
39 <div role="main" class="ui-content wow fadeIn" data-inset="false" data-wow-delay="0.2s">
40
41 <h4>Header Example</h4>
42 <p>See an animated example on the top. You can simply remove the WOW.js-Tags to avoid animation.</p>
43
44 <h4>Footer Example</h4>
45 <p>See bottom :-)</p>
46
47 <h4>Extra: bottom-sheet</h4>
48 <p>Click the top-right-corner</p>
49
50
51 </div>
52
53 <div data-role="footer" data-position="fixed">
54
55 <div class="row center-xs">
56 <div class="col-xs-4">
57 <div class="box">
58 <a href="#" class="ui-btn ui-mini nd2-btn-icon-block"><i class='zmdi zmdi-edit'></i> edit</a>
59 </div>
60 </div>
61 <div class="col-xs-4">
62 <div class="box">
63 <a href="#" class="ui-btn ui-mini nd2-btn-icon-block"><i class='zmdi zmdi-plus'></i> add</a>
64 </div>
65 </div>
66 <div class="col-xs-4">
67 <div class="box">
68 <a href="#" class="ui-btn ui-mini nd2-btn-icon-block"><i class='zmdi zmdi-minus'></i> remove</a>
69 </div>
70 </div>
71 </div>
72
73
74 </div>
75
76 </div>
77
78
79 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
80 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
81 <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
82 <script src="/vendor/waves/waves.min.js"></script>
83 <script src="/js/nativedroid2.js"></script>
84 <script src="/nd2settings.js"></script>
85
86 </body>
87 </html>
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>nativeDroid II - jQueryMobile Template</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6
7 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
8 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
9 <link rel="stylesheet" href="/vendor/waves/waves.min.css" />
10 <link rel="stylesheet" href="/vendor/wow/animate.css" />
11 <link rel="stylesheet" href="/css/nativedroid2.css" />
12
13 <style>
14 /* Prevent FOUC */
15 body { opacity: 0; }
16 </style>
17
18 </head>
19 <body>
20
21 <div data-role="page">
22
23 <nd2-include data-src="/examples/fragments/panel.left.html"></nd2-include>
24
25 <div data-role="header" data-position="fixed" class="wow fadeIn">
26 <a href="#leftpanel" class="ui-btn ui-btn-left wow fadeIn" data-wow-delay='0.8s'><i class="zmdi zmdi-menu"></i></a>
27 <h1 class="wow fadeIn" data-wow-delay='0.4s'>Listview</h1>
28 </div>
29
30
31 <div role="main" class="ui-content wow fadeIn" data-inset="false" data-wow-delay="0.2s">
32
33 <ul data-role="listview" data-icon="false">
34 <li data-role="list-divider">
35 Friends
36 </li>
37 <li>
38 <a href="#">
39 <img src="//lorempixel.com/150/150/people/1/" class="ui-thumbnail ui-thumbnail-circular" />
40 <h2>Ethel Chancy</h2>
41 <p>[email protected]</p>
42 </a>
43 </li>
44 <li>
45 <a href="#">
46 <img src="//lorempixel.com/150/150/people/2/" class="ui-thumbnail ui-thumbnail-circular" />
47 <h2>Lorean Gainer</h2>
48 <p>[email protected]</p>
49 </a>
50 </li>
51 <li>
52 <a href="#">
53 <img src="//lorempixel.com/150/150/people/3/" class="ui-thumbnail ui-thumbnail-circular" />
54 <h2>Juliet Gieseke</h2>
55 <p>[email protected]</p>
56 </a>
57 </li>
58 </ul>
59
60 <hr />
61
62 <ul data-role="listview" data-icon="false">
63 <li data-role="list-divider">
64 Work
65 </li>
66 <li>
67 <a href="#">
68 <img src="//lorempixel.com/150/150/people/6/" class="ui-thumbnail ui-thumbnail-circular" />
69 <h2>Gale Cecil</h2>
70 <p>[email protected]</p>
71 </a>
72 </li>
73 <li>
74 <a href="#">
75 <img src="//lorempixel.com/150/150/people/5/" class="ui-thumbnail ui-thumbnail-circular" />
76 <h2>Bernard Desrosier</h2>
77 <p>[email protected]</p>
78 </a>
79 </li>
80 <li>
81 <a href="#">
82 <img src="//lorempixel.com/150/150/people/7/" class="ui-thumbnail ui-thumbnail-circular" />
83 <h2>Emerita Scholl</h2>
84 <p>[email protected]</p>
85 </a>
86 </li>
87 <li>
88 <a href="#">
89 <img src="//lorempixel.com/150/150/people/8/" class="ui-thumbnail ui-thumbnail-circular" />
90 <h2>Elmer Eyer</h2>
91 <p>[email protected]</p>
92 </a>
93 </li>
94 <li>
95 <a href="#">
96 <img src="//lorempixel.com/150/150/people/9/" class="ui-thumbnail ui-thumbnail-circular" />
97 <h2>Shona Mckibben</h2>
98 <p>[email protected]</p>
99 </a>
100 </li>
101 <li>
102 <a href="#">
103 <img src="//lorempixel.com/150/150/people/10/" class="ui-thumbnail ui-thumbnail-circular" />
104 <h2>Hilma Mercer</h2>
105 <p>[email protected]</p>
106 </a>
107 </li>
108 </ul>
109
110 <hr />
111
112 <ul data-role="listview" data-icon="false">
113 <li data-role="list-divider">
114 Simple List
115 </li>
116 <li>alpha</li>
117 <li>beta</li>
118 <li>gamma</li>
119 <li>delta</li>
120 <li>epsilon</li>
121 <li>zeta</li>
122 </ul>
123
124 <hr />
125
126 <ol data-role="listview" data-icon="false">
127 <li data-role="list-divider">
128 Ordered List
129 </li>
130 <li>alpha</li>
131 <li>beta</li>
132 <li>gamma</li>
133 <li>delta</li>
134 <li>epsilon</li>
135 <li>zeta</li>
136 </ol>
137
138 <hr />
139
140 <ul data-role="listview" data-icon="false">
141 <li data-role="list-divider">
142 Linked List
143 </li>
144 <li><a href="#">Banana</a></li>
145 <li><a href="#">Blackberry</a></li>
146 <li><a href="#">Tomato</a></li>
147 <li><a href="#">Apple</a></li>
148 </ul>
149
150 <hr />
151
152 <ul data-role="listview" data-icon="false" data-autodividers="true">
153 <li><a href="#">Apple</a></li>
154 <li><a href="#">Banana</a></li>
155 <li><a href="#">Blackberry</a></li>
156 <li><a href="#">Tomato</a></li>
157 </ul>
158
159
160 </div>
161
162 </div>
163
164 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
165 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
166 <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
167 <script src="/vendor/waves/waves.min.js"></script>
168 <script src="/vendor/wow/wow.min.js"></script>
169 <script src="/js/nativedroid2.js"></script>
170 <script src="/nd2settings.js"></script>
171
172 </body>
173 </html>
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>nativeDroid II - jQueryMobile Template</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6
7 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
8 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
9 <link rel="stylesheet" href="/vendor/waves/waves.min.css" />
10 <link rel="stylesheet" href="/vendor/wow/animate.css" />
11 <link rel="stylesheet" href="/css/nativedroid2.css" />
12
13 <style>
14 /* Prevent FOUC */
15 body { opacity: 0; }
16 </style>
17
18 </head>
19 <body>
20
21 <div data-role="page">
22
23 <nd2-include data-src="/examples/fragments/panel.left.html"></nd2-include>
24
25 <div data-role="header" data-position="fixed" class="wow fadeIn">
26 <a href="#leftpanel" class="ui-btn ui-btn-left wow fadeIn" data-wow-delay='0.8s'><i class="zmdi zmdi-menu"></i></a>
27 <h1 class="wow fadeIn" data-wow-delay='0.4s'>Panels</h1>
28 </div>
29
30 <div role="main" class="ui-content wow fadeIn" data-inset="false" data-wow-delay="0.2s">
31
32 See example by clicking the bars on the top left.
33
34 </div>
35
36 </div>
37
38 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
39 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
40 <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
41 <script src="/vendor/waves/waves.min.js"></script>
42 <script src="/vendor/wow/wow.min.js"></script>
43 <script src="/js/nativedroid2.js"></script>
44 <script src="/nd2settings.js"></script>
45
46 </body>
47 </html>
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>nativeDroid II - jQueryMobile Template</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6
7 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
8 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
9 <link rel="stylesheet" href="/vendor/waves/waves.min.css" />
10 <link rel="stylesheet" href="/vendor/wow/animate.css" />
11 <link rel="stylesheet" href="/css/nativedroid2.css" />
12
13 <style>
14 /* Prevent FOUC */
15 body { opacity: 0; }
16 </style>
17
18 </head>
19 <body>
20
21 <div data-role="page">
22
23 <nd2-include data-src="/examples/fragments/panel.left.html"></nd2-include>
24
25
26 <div data-role="header" data-position="fixed" class="wow fadeIn">
27 <a href="#leftpanel" class="ui-btn ui-btn-left wow fadeIn" data-wow-delay='0.8s'><i class="zmdi zmdi-menu"></i></a>
28 <h1 class="wow fadeIn" data-wow-delay='0.4s'>Table</h1>
29 </div>
30
31
32 <div role="main" class="ui-content wow fadeIn" data-wow-delay="0.2s" data-inset="false">
33
34 <table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
35 <thead>
36 <tr>
37 <th data-priority="2">Rank</th>
38 <th>Movie Title</th>
39 <th data-priority="3">Year</th>
40 <th data-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
41 <th data-priority="5">Reviews</th>
42 </tr>
43 </thead>
44 <tbody>
45 <tr>
46 <td>1</td>
47 <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
48 <td>1941</td>
49 <td>100%</td>
50 <td>74</td>
51 </tr>
52 <tr>
53 <td>2</td>
54 <td>Casablanca</td>
55 <td>1942</td>
56 <td>97%</td>
57 <td>64</td>
58 </tr>
59 <tr>
60 <td>3</td>
61 <td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td>
62 <td>1972</td>
63 <td>97%</td>
64 <td>87</td>
65 </tr>
66 <tr>
67 <td>4</td>
68 <td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td>
69 <td>1939</td>
70 <td>96%</td>
71 <td>87</td>
72 </tr>
73 <tr>
74 <td>5</td>
75 <td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td>
76 <td>1962</td>
77 <td>94%</td>
78 <td>87</td>
79 </tr>
80 <tr>
81 <td>6</td>
82 <td><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td>
83 <td>1964</td>
84 <td>92%</td>
85 <td>74</td>
86 </tr>
87 <tr>
88 <td>7</td>
89 <td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a></td>
90 <td>1967</td>
91 <td>91%</td>
92 <td>122</td>
93 </tr>
94 <tr>
95 <td>8</td>
96 <td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td>
97 <td>1939</td>
98 <td>90%</td>
99 <td>72</td>
100 </tr>
101 <tr>
102 <td>9</td>
103 <td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td>
104 <td>1952</td>
105 <td>89%</td>
106 <td>85</td>
107 </tr>
108 <tr>
109 <td>10</td>
110 <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
111 <td>2010</td>
112 <td>84%</td>
113 <td>78</td>
114 </tr>
115 </tbody>
116 </table>
117
118 </div>
119
120 </div>
121
122 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
123 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
124 <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
125 <script src="/vendor/waves/waves.min.js"></script>
126 <script src="/vendor/wow/wow.min.js"></script>
127 <script src="/js/nativedroid2.js"></script>
128 <script src="/nd2settings.js"></script>
129
130 </body>
131 </html>
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>nativeDroid II - jQueryMobile Template</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6
7 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
8 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
9 <link rel="stylesheet" href="/vendor/waves/waves.min.css" />
10 <link rel="stylesheet" href="/vendor/wow/animate.css" />
11 <link rel="stylesheet" href="/css/nativedroid2.css" />
12
13 <style>
14 /* Prevent FOUC */
15 body { opacity: 0; }
16 </style>
17
18 </head>
19 <body>
20
21 <div data-role="page">
22
23 <nd2-include data-src="/examples/fragments/panel.left.html"></nd2-include>
24
25
26 <div data-role="header" data-position="fixed" class="wow fadeIn">
27 <a href="#leftpanel" class="ui-btn ui-btn-left wow fadeIn" data-wow-delay='0.8s'><i class="zmdi zmdi-menu"></i></a>
28 <h1 class="wow fadeIn" data-wow-delay='0.4s'>Text / Typography</h1>
29 </div>
30
31 <div role="main" class="ui-content wow fadeIn" data-wow-delay="0.2s" data-inset="false">
32
33 <h4>General Header (H1 - H6)</h4>
34
35 <h1>Regular 56px / 400 / &lt;h1&gt;</h1>
36 <h2>Regular 34px / 400 / &lt;h2&gt;</h2>
37 <h3>Regular 24px / 400 / &lt;h3&gt;</h3>
38 <h4>Medium 2sp / 500 / &lt;h4&gt;</h4>
39 <h5>Regular 16px / 400 / &lt;h5&gt;</h5>
40 <h6>Regular 14px / 400 / &lt;h6&gt;</h6>
41
42 <hr />
43
44 <h4>Display / Header / Title Sizes</h4>
45
46 <h1 class="nd2-display-4">
47 Light 112px
48 <span class="nd2-subhead">.nd2-display-4</span>
49 </h1>
50
51 <h2 class="nd2-display-3">
52 Regular 56px
53 <span class="nd2-subhead">.nd2-display-3</span>
54 </h2>
55
56 <h3 class="nd2-display-2">
57 Regular 45px
58 <span class="nd2-subhead">.nd2-display-2</span>
59 </h3>
60
61 <h4 class="nd2-display-1">
62 Regular 34px
63 <span class="nd2-subhead">.nd2-display-1</span>
64 </h4>
65
66 <h5 class="nd2-headline">
67 Regular 24px
68 <span class="nd2-subhead">.nd2-headline</span>
69 </h5>
70
71 <h6 class="nd2-title">
72 Medium 2p
73 <span class="nd2-subhead">.nd2-title</span>
74 </h6>
75
76 <h6 class="nd2-subhead">
77 Regular 16px
78 <span class="nd2-subhead">.nd2-subhead</span>
79 </h6>
80
81 <hr />
82
83 <h4>Text Paragraph / Regular 400 / 16px</h4>
84
85 <div class='row'>
86
87 <div class='col-xs-12 col-md-6'>
88 <div class='box'>
89 <p>
90 Typography is the art and technique of arranging type to make written language readable and appealing. The arrangement of type involves selecting typefaces, point size, line length, line-spacing (leading), letter-spacing (tracking), and adjusting the space within letters pairs (kerning). Type design is a closely related craft, sometimes considered part of typography; most typographers do not design typefaces, and some type designers do not consider themselves typographers. In modern times, typography has been put in film, television and online broadcasts to add emotion to communication.
91 <br />(Source: <a href="http://www.wikipedia.org">Wikipedia</a>)
92 </p>
93 </div>
94 </div>
95
96 <div class='col-xs-12 col-md-6'>
97 <div class='box'>
98 <blockquote>
99 <p>You know the golden rule, don't you boy? Those who have the gold make the rules.</p>
100 <footer>Crazy hunch-backed old guy from the movie Aladdin</footer>
101 </blockquote>
102 </div>
103 </div>
104
105 </div>
106
107
108
109 </div>
110
111 </div>
112
113 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
114 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
115 <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
116 <script src="/vendor/waves/waves.min.js"></script>
117 <script src="/vendor/wow/wow.min.js"></script>
118 <script src="/js/nativedroid2.js"></script>
119 <script src="/nd2settings.js"></script>
120
121 </body>
122 </html>
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>nativeDroid II - jQueryMobile Template</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6
7 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
8 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
9 <link rel="stylesheet" href="/vendor/waves/waves.min.css" />
10 <link rel="stylesheet" href="/css/nativedroid2.css" />
11
12 <style>
13 /* Prevent FOUC */
14 body { opacity: 0; }
15 </style>
16
17 </head>
18 <body>
19
20 <div data-role="page">
21
22 <nd2-include data-src="/examples/fragments/panel.left.html"></nd2-include>
23
24
25 <div data-role="panel" id="bottomsheetlist" class="ui-bottom-sheet ui-bottom-sheet-list" data-animate="false" data-position='bottom' data-display="overlay">
26 <nd2-include data-src="/examples/fragments/bottom.sheet.html"></nd2-include>
27 </div>
28
29
30 <div data-role="panel" id="bottomsheetblock" class="ui-bottom-sheet" data-animate="false" data-position='bottom' data-display="overlay">
31 <nd2-include data-src="/examples/fragments/bottom.sheet.html"></nd2-include>
32 </div>
33
34
35 <div data-role="header" data-position="fixed">
36 <a href="#leftpanel" class="ui-btn ui-btn-left"><i class="zmdi zmdi-menu"></i></a>
37 <h1>Bottom Sheet</h1>
38 </div>
39
40 <div role="main" class="ui-content" data-inset="false">
41
42 <span class="nd2-title">What is a Bottom Sheet?</span>
43 <p>Bottom Sheets are like panels. But instead of coming from the left or the right they appear from the bottom.</p>
44
45 <span class="nd2-title">Two different types</span>
46 <p>A bottom Sheet can be presented as a list (items are displayed in rows) or as blocks (items are displayed in floated square-blocks)</p>
47
48 <hr />
49
50 <nd2-ad data-banner="sample.banner"></nd2-ad>
51
52 <span class="nd2-title">Demonstration</span>
53 <p>
54 <a href="#bottomsheetlist" class="ui-btn clr-btn-accent-blue ui-btn-inline"><i class='zmdi zmdi-view-list'></i> open as a list</a>
55 <a href="#bottomsheetblock" class="ui-btn clr-btn-accent-green ui-btn-inline"><i class='zmdi zmdi-view-module'></i> open as blocks</a>
56 </p>
57
58 <nd2-ad data-banner="textlinks.banner"></nd2-ad>
59
60 <span class="nd2-title">Sample-Code</span>
61 <br />
62 <span class="nd2-subhead">Default list item as blocks:</span>
63 <pre>&lt;div data-role="panel" id="bottomsheetblock" <strong>class="ui-bottom-sheet"</strong> data-animate="false" data-position='bottom' data-display="overlay"&gt;...&lt;/div&gt;</pre>
64
65 <span class="nd2-subhead">List item as list:</span>
66 <pre>&lt;div data-role="panel" id="bottomsheetblock" class="ui-bottom-sheet <strong>ui-bottom-sheet-list</strong>" data-animate="false" data-position='bottom' data-display="overlay"&gt;...&lt;/div&gt;</pre>
67
68 <span class="nd2-subhead">Bottom Sheet Content</span>
69 <pre>&lt;div class='<strong>row</strong> around-xs'&gt;
70 &lt;div class='<strong>col-xs-auto</strong>'&gt;
71 &lt;a href='#' class='<strong>ui-bottom-sheet-link</strong> ui-btn ui-btn-inline waves-effect waves-button waves-effect waves-button' data-ajax='false'&gt;
72 &lt;i class='zmdi zmdi-assignment zmd-2x'&gt;&lt;/i&gt;
73 &lt;strong&gt;Clipboard&lt;/strong&gt;
74 &lt;/a&gt;
75 &lt;/div&gt;
76 &lt;div class='<strong>col-xs-auto</strong>'&gt;
77 &lt;a href='#' class='<strong>ui-bottom-sheet-link</strong> ui-btn ui-btn-inline waves-effect waves-button waves-effect waves-button' data-ajax='false'&gt;
78 &lt;i class='zmdi zmdi-fire zmd-2x'&gt;&lt;/i&gt;
79 &lt;strong&gt;Hot Stuff&lt;/strong&gt;
80 &lt;/a&gt;
81 &lt;/div&gt;
82 &lt;div class='<strong>col-xs-auto</strong>'&gt;
83 &lt;a href='#' class='<strong>ui-bottom-sheet-link</strong> ui-btn ui-btn-inline waves-effect waves-button waves-effect waves-button' data-ajax='false'&gt;
84 &lt;i class='zmdi zmdi-cloud-outline-alt zmd-2x'&gt;&lt;/i&gt;
85 &lt;strong&gt;Cloud&lt;/strong&gt;
86 &lt;/a&gt;
87 &lt;/div&gt;
88 &lt;div class='<strong>col-xs-auto</strong>'&gt;
89 &lt;a href='#' class='<strong>ui-bottom-sheet-link</strong> ui-btn ui-btn-inline waves-effect waves-button waves-effect waves-button' data-ajax='false'&gt;
90 &lt;i class='zmdi zmdi-format-color-fill zmd-2x'&gt;&lt;/i&gt;
91 &lt;strong&gt;Fillcolor&lt;/strong&gt;
92 &lt;/a&gt;
93 &lt;/div&gt;
94 &lt;/div&gt;</pre>
95
96
97 </div>
98
99 </div>
100
101 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
102 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
103 <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
104 <script src="/vendor/waves/waves.min.js"></script>
105 <script src="/js/nativedroid2.js"></script>
106 <script src="/nd2settings.js"></script>
107
108 </body>
109 </html>
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>nativeDroid II - jQueryMobile Template</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6
7 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
8 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
9 <link rel="stylesheet" href="/vendor/waves/waves.min.css" />
10 <link rel="stylesheet" href="/css/nativedroid2.css" />
11
12 <style>
13 /* Prevent FOUC */
14 body { opacity: 0; }
15 </style>
16
17 </head>
18 <body>
19
20 <div data-role="page">
21
22 <nd2-include data-src="/examples/fragments/panel.left.html"></nd2-include>
23
24
25 <div data-role="header" data-position="fixed">
26 <a href="#leftpanel" class="ui-btn ui-btn-left"><i class="zmdi zmdi-menu"></i></a>
27 <h1>Cards</h1>
28 </div>
29
30 <div role="main" class="ui-content" data-inset="false">
31
32 <!-- Simple Card !-->
33
34 <div class="nd2-card">
35
36 <div class="card-media">
37 <img src="/img/examples/card_bg_1.jpg">
38 </div>
39
40 <div class="card-supporting-text">
41 Cards are a convenient means of displaying content composed of different elements. They're also well-suited for showcasing elements whose size or supported actions vary, like photos with captions of variable length.
42 </div>
43
44 </div>
45
46
47 <!-- Simple Card with Title !-->
48
49 <div class="nd2-card">
50
51 <div class="card-title has-avatar">
52 <img class="card-avatar" src="//lorempixel.com/200/200/people/9/">
53 <h3 class="card-primary-title">Power of Lavender</h3>
54 <h5 class="card-subtitle">Taken in Provence, France</h5>
55 </div>
56
57 <div class="card-media">
58 <img src="/img/examples/card_bg_2.jpg">
59 </div>
60
61 <div class="card-supporting-text has-action">
62 <strong>Lavandula</strong> (common name lavender) is a genus of 39 known species of flowering plants in the mint family, Lamiaceae. It is native to the Old World and is found from Cape Verde and the Canary Islands, southern Europe across to northern and eastern Africa, the Mediterranean, southwest Asia to southeast India.
63 </div>
64
65 <div class="card-action">
66 <div class="row between-xs">
67 <div class="col-xs-4">
68 <div class="box">
69 <a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-mic'></i></a>
70 <a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-videocam'></i></a>
71 </div>
72 </div>
73 <div class="col-xs-8 align-right">
74 <div class="box">
75 <a href="#" class="ui-btn ui-btn-inline">Action</a>
76 </div>
77 </div>
78 </div>
79 </div>
80
81 </div>
82
83
84
85 <!-- Simple Card No Media !-->
86
87 <div class="nd2-card">
88
89 <div class="card-title has-supporting-text">
90 <h3 class="card-primary-title">Biomaterial</h3>
91 <h5 class="card-subtitle">From Wikipedia, the free encyclopedia</h5>
92 </div>
93
94 <div class="card-supporting-text has-action has-title">
95 A biomaterial is any matter, surface, or construct that interacts with biological systems. As a science, biomaterials is about fifty years old. The study of biomaterials is called biomaterials science. It has experienced steady and strong growth over its history, with many companies investing large amounts of money into the development of new products.
96 </div>
97
98 <div class="card-action">
99 <div class="row between-xs">
100 <div class="col-xs-12">
101 <div class="box">
102 <a href="#" class="ui-btn ui-btn-inline">Applause</a>
103 <a href="#" class="ui-btn ui-btn-inline">Boooh</a>
104 </div>
105 </div>
106 </div>
107 </div>
108
109 </div>
110
111
112 <!-- Media Card with Actions !-->
113
114 <div class="nd2-card">
115
116 <div class="card-media">
117 <img src="/img/examples/card_bg_3.jpg">
118 </div>
119
120 <div class="card-action">
121 <div class="row between-xs">
122 <div class="col-xs-12 align-right">
123 <div class="box">
124 <a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-favorite'></i></a>
125 <a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-bookmark'></i></a>
126 <a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-mail-reply zmd-flip-horizontal'></i></a>
127 </div>
128 </div>
129 </div>
130 </div>
131
132 </div>
133
134
135 <!-- Media Overlay with Background !-->
136
137 <div class="nd2-card">
138
139
140 <div class="card-media">
141 <img src="/img/examples/card_bg_2.jpg">
142
143 <div class='card-media-overlay with-background'>
144
145 <div class="card-title has-supporting-text">
146 <h3 class="card-primary-title">Power of Lavender</h3>
147 <h5 class="card-subtitle">Taken in Provence, France</h5>
148 </div>
149
150 <div class="card-action">
151 <div class="row between-xs">
152 <div class="col-xs-12">
153 <div class="box">
154 <a href="#" class="ui-btn ui-btn-inline">Action 1</a>
155 <a href="#" class="ui-btn ui-btn-inline">Action 2</a>
156 </div>
157 </div>
158 </div>
159 </div>
160
161 </div>
162
163 </div>
164
165
166 </div>
167
168 <div class="row">
169
170 <div class="col-xs-6">
171 <div class="box">
172
173
174 <!-- Media Overlay no Background !-->
175
176 <div class="nd2-card">
177
178
179 <div class="card-media">
180 <img src="/img/examples/card_thumb_2.jpg">
181
182 <div class='card-media-overlay'>
183
184 <div class="card-title has-supporting-text">
185 <h3 class="card-primary-title">Crossing Cranes</h3>
186 </div>
187
188 </div>
189
190 </div>
191
192
193 <div class="card-action">
194 <div class="row between-xs">
195 <div class="col-xs-12 align-right">
196 <div class="box">
197 <a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-favorite'></i></a>
198 <a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-bookmark'></i></a>
199 <a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-mail-reply zmd-flip-horizontal'></i></a>
200 </div>
201 </div>
202 </div>
203 </div>
204
205 </div>
206
207
208 </div>
209 </div>
210
211 <div class="col-xs-6">
212 <div class="box">
213
214 <!-- Media Overlay no Background !-->
215
216 <div class="nd2-card">
217
218
219 <div class="card-media">
220 <img src="/img/examples/card_thumb_1.jpg">
221
222 <div class='card-media-overlay'>
223
224 <div class="card-title has-supporting-text">
225 <h3 class="card-primary-title">The Bridge</h3>
226 </div>
227
228 </div>
229
230 </div>
231
232
233 <div class="card-action">
234 <div class="row between-xs">
235 <div class="col-xs-12 align-right">
236 <div class="box">
237 <a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-favorite'></i></a>
238 <a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-bookmark'></i></a>
239 <a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-mail-reply zmd-flip-horizontal'></i></a>
240 </div>
241 </div>
242 </div>
243 </div>
244
245 </div>
246
247
248 </div>
249 </div>
250
251 </div>
252
253
254 <!-- Simple Card Media Right - small - no action !-->
255
256 <div class="nd2-card card-media-right card-media-small">
257
258
259 <div class="card-media">
260 <img src="/img/examples/card_thumb_1.jpg">
261 </div>
262
263 <div class="card-title">
264 <h3 class="card-primary-title">Bridge</h3>
265 <h5 class="card-subtitle">A bridge is a structure built to span physical obstacles such as a body of water, valley, or road, for the purpose of providing passage over the obstacle.</h5>
266 </div>
267
268 </div>
269
270
271 <!-- Simple Card Media Right - medium - no action !-->
272
273 <div class="nd2-card card-media-right card-media-medium">
274
275
276 <div class="card-media">
277 <img src="/img/examples/card_thumb_3.jpg">
278 </div>
279
280 <div class="card-title">
281 <h3 class="card-primary-title">Building Edge</h3>
282 <h5 class="card-subtitle">Black and White</h5>
283 </div>
284
285
286 </div>
287
288
289
290 <!-- Simple Card Media Right - large - no action !-->
291
292 <div class="nd2-card card-media-right card-media-large">
293
294
295 <div class="card-media">
296 <img src="/img/examples/card_thumb_2.jpg">
297 </div>
298
299 <div class="card-title">
300 <h3 class="card-primary-title">Crossing Cranes</h3>
301 <h5 class="card-subtitle">And I'm a Subline</h5>
302 </div>
303
304
305 </div>
306
307
308
309 <!-- Simple Card Media Right - small !-->
310
311 <div class="nd2-card card-media-right card-media-small">
312
313
314 <div class="card-media">
315 <img src="/img/examples/card_thumb_1.jpg">
316 </div>
317
318 <div class="card-title has-supporting-text">
319 <h3 class="card-primary-title">Bridge</h3>
320 <h5 class="card-subtitle">A bridge is a structure built to span physical obstacles such as a body of water, valley, or road, for the purpose of providing passage over the obstacle.</h5>
321 </div>
322
323 <div class="card-action">
324 <div class="row between-xs">
325 <div class="col-xs-12">
326 <div class="box">
327 <a href="#" class="ui-btn ui-btn-inline">Action 1</a>
328 <a href="#" class="ui-btn ui-btn-inline">Action 2</a>
329 </div>
330 </div>
331 </div>
332 </div>
333
334 </div>
335
336
337 <!-- Simple Card Media Right - medium !-->
338
339 <div class="nd2-card card-media-right card-media-medium">
340
341
342 <div class="card-media">
343 <img src="/img/examples/card_thumb_3.jpg">
344 </div>
345
346 <div class="card-title has-supporting-text">
347 <h3 class="card-primary-title">Building Edge</h3>
348 <h5 class="card-subtitle">Black and White</h5>
349 </div>
350
351 <div class="card-action">
352 <div class="row between-xs">
353 <div class="col-xs-12">
354 <div class="box">
355 <a href="#" class="ui-btn ui-btn-inline">Action 1</a>
356 <a href="#" class="ui-btn ui-btn-inline">Action 2</a>
357 </div>
358 </div>
359 </div>
360 </div>
361
362 </div>
363
364
365
366 <!-- Simple Card Media Right - large !-->
367
368 <div class="nd2-card card-media-right card-media-large">
369
370
371 <div class="card-media">
372 <img src="/img/examples/card_thumb_2.jpg">
373 </div>
374
375 <div class="card-title has-supporting-text">
376 <h3 class="card-primary-title">Crossing Cranes</h3>
377 <h5 class="card-subtitle">And I'm a Subline</h5>
378 </div>
379
380 <div class="card-supporting-text has-action has-title">
381 A biomaterial is any matter, surface, or construct that interacts with biological systems. As a science, biomaterials is about fifty years old. The study of biomaterials is called biomaterials science. It has experienced steady and strong growth over its history, with many companies investing large amounts of money into the development of new products.
382 </div>
383
384 <div class="card-action">
385 <div class="row between-xs">
386 <div class="col-xs-12">
387 <div class="box">
388 <a href="#" class="ui-btn ui-btn-inline">Action 1</a>
389 <a href="#" class="ui-btn ui-btn-inline">Action 2</a>
390 </div>
391 </div>
392 </div>
393 </div>
394
395 </div>
396
397
398 <!-- Simple Card Media Right - small - with text !-->
399
400 <div class="nd2-card card-media-right card-media-small">
401
402
403 <div class="card-media">
404 <img src="/img/examples/card_thumb_1.jpg">
405 </div>
406
407 <div class="card-title has-supporting-text">
408 <h3 class="card-primary-title">Bridge</h3>
409 <h5 class="card-subtitle">A bridge is a structure built to span physical obstacles such as a body of water, valley, or road, for the purpose of providing passage over the obstacle.</h5>
410 </div>
411
412 <div class="card-supporting-text has-action has-title">
413 A biomaterial is any matter, surface, or construct that interacts with biological systems. As a science, biomaterials is about fifty years old. The study of biomaterials is called biomaterials science. It has experienced steady and strong growth over its history, with many companies investing large amounts of money into the development of new products.
414 </div>
415
416 <div class="card-action">
417 <div class="row between-xs">
418 <div class="col-xs-12">
419 <div class="box">
420 <a href="#" class="ui-btn ui-btn-inline">Action 1</a>
421 <a href="#" class="ui-btn ui-btn-inline">Action 2</a>
422 </div>
423 </div>
424 </div>
425 </div>
426
427 </div>
428
429
430 <!-- Simple Card Media Right - medium - with text !-->
431
432 <div class="nd2-card card-media-right card-media-medium">
433
434 <div class="card-media">
435 <img src="/img/examples/card_thumb_3.jpg">
436 </div>
437
438 <div class="card-title has-supporting-text">
439 <h3 class="card-primary-title">Building Edge</h3>
440 <h5 class="card-subtitle">Black and White</h5>
441 </div>
442
443
444 <div class="card-supporting-text has-action has-title">
445 A biomaterial is any matter, surface, or construct that interacts with biological systems. As a science, biomaterials is about fifty years old. The study of biomaterials is called biomaterials science. It has experienced steady and strong growth over its history, with many companies investing large amounts of money into the development of new products.
446 </div>
447
448 <div class="card-action">
449 <div class="row between-xs">
450 <div class="col-xs-12">
451 <div class="box">
452 <a href="#" class="ui-btn ui-btn-inline">Action 1</a>
453 <a href="#" class="ui-btn ui-btn-inline">Action 2</a>
454 </div>
455 </div>
456 </div>
457 </div>
458
459 </div>
460
461
462
463 <!-- Simple Card Media Right - large - with text !-->
464
465 <div class="nd2-card card-media-right card-media-large">
466
467
468 <div class="card-media">
469 <img src="/img/examples/card_thumb_2.jpg">
470 </div>
471
472 <div class="card-title has-supporting-text">
473 <h3 class="card-primary-title">Crossing Cranes</h3>
474 <h5 class="card-subtitle">And I'm a Subline</h5>
475 </div>
476
477 <div class="card-action">
478 <div class="row between-xs">
479 <div class="col-xs-12">
480 <div class="box">
481 <a href="#" class="ui-btn ui-btn-inline">Action 1</a>
482 <a href="#" class="ui-btn ui-btn-inline">Action 2</a>
483 </div>
484 </div>
485 </div>
486 </div>
487
488 </div>
489
490
491
492 <!-- Simple Card Media Left !-->
493
494 <div class="nd2-card card-media-left">
495
496
497 <div class="card-media">
498 <img src="/img/examples/card_thumb_1.jpg">
499 </div>
500
501 <div class="card-action">
502 <div class="row between-xs">
503 <div class="col-xs-12">
504 <div class="box">
505 <a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-favorite'></i></a>
506 <a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-bookmark'></i></a>
507 <a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-mail-reply zmd-flip-horizontal'></i></a>
508 </div>
509 </div>
510 </div>
511 </div>
512
513 </div>
514
515
516
517 <!-- Simple Card :::: !-->
518
519 <div class="nd2-card">
520
521 <div class="card-title has-supporting-text">
522 <h3 class="card-primary-title">Corn Field in Sunset</h3>
523 <h5 class="card-subtitle">Taken in Provence, France</h5>
524 </div>
525
526 <div class="card-media">
527 <img src="/img/examples/card_bg_1.jpg">
528 </div>
529
530 <div class="card-supporting-text has-action">
531 Cards are a convenient means of displaying content composed of different elements. They're also well-suited for showcasing elements whose size or supported actions vary, like photos with captions of variable length.
532 </div>
533
534 <div class="card-action">
535 <div class="row between-xs">
536 <div class="col-xs-4">
537 <div class="box">
538 <a href="#" class="ui-btn ui-btn-inline"><i class='zmdi zmdi-cut'></i></a>
539 </div>
540 </div>
541 <div class="col-xs-8 align-right">
542 <div class="box">
543 <a href="#" class="ui-btn ui-btn-inline">Action</a>
544 <a href="#" class="ui-btn ui-btn-inline">Action</a>
545 </div>
546 </div>
547 </div>
548 </div>
549
550 </div>
551
552 </div>
553
554 </div>
555
556 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
557 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
558 <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
559 <script src="/vendor/waves/waves.min.js"></script>
560 <script src="/js/nativedroid2.js"></script>
561 <script src="/nd2settings.js"></script>
562
563 </body>
564 </html>
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>nativeDroid II - jQueryMobile Template</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6
7 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
8 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
9 <link rel="stylesheet" href="/vendor/waves/waves.min.css" />
10 <link rel="stylesheet" href="/vendor/chartist/style.css" />
11 <link rel="stylesheet" href="/css/nativedroid2.css" />
12
13 <style>
14 /* Prevent FOUC */
15 body { opacity: 0; }
16 </style>
17
18 </head>
19 <body>
20
21 <div data-role="page">
22
23 <nd2-include data-src="/examples/fragments/panel.left.html"></nd2-include>
24
25
26
27 <div data-role="header" data-position="fixed">
28 <a href="#leftpanel" class="ui-btn ui-btn-left"><i class="zmdi zmdi-menu"></i></a>
29 <h1>Charts</h1>
30 </div>
31
32 <div role="main" class="ui-content" data-inset="false">
33
34 <span class="nd2-title">chartist.js</span>
35 <p>
36 This is an example page for charts using the <a href="https://gionkunz.github.io/chartist-js/examples.html">chartist.js</a>-Library. The main benefits with chartist.js is, that its wonderfully responsive and easy to create individual styling.
37 </p>
38
39 <span class="nd2-title">Line Charts</span>
40 <div class="row">
41 <div class="col-xs-12 col-md-4">
42 <div class="box">
43 <div class="nd2-chart ct-chart"></div>
44 </div>
45 </div>
46 <div class="col-xs-12 col-md-4">
47 <div class="box">
48 <div class="nd2-chart ct-chart2"></div>
49 </div>
50 </div>
51 <div class="col-xs-12 col-md-4">
52 <div class="box">
53 <div class="nd2-chart ct-chart3"></div>
54 </div>
55 </div>
56 </div>
57
58
59 <span class="nd2-title">Bar Charts</span>
60 <div class="row">
61 <div class="col-xs-12 col-md-4">
62 <div class="box">
63 <div class="nd2-chart nd2-chart-large ct-barchart"></div>
64 </div>
65 </div>
66 <div class="col-xs-12 col-md-4">
67 <div class="box">
68 <div class="nd2-chart nd2-chart-large ct-barchart2"></div>
69 </div>
70 </div>
71 <div class="col-xs-12 col-md-4">
72 <div class="box">
73 <div class="nd2-chart nd2-chart-large ct-barchart3"></div>
74 </div>
75 </div>
76 </div>
77
78
79 <span class="nd2-title">Pie Charts</span>
80 <div class="row">
81 <div class="col-xs-12 col-md-4">
82 <div class="box">
83 <div class="nd2-chart ct-piechart"></div>
84 </div>
85 </div>
86 <div class="col-xs-12 col-md-4">
87 <div class="box">
88 <div class="nd2-chart ct-piechart2"></div>
89 </div>
90 </div>
91 <div class="col-xs-12 col-md-4">
92 <div class="box">
93 <div class="nd2-chart ct-piechart3"></div>
94 </div>
95 </div>
96 </div>
97
98 <hr />
99
100 <span class="nd2-title">Chart Themes</span>
101 <p>
102 Usually charts with class <em>.nd2-chart</em> will be themed with the primary color. You can overwrite this behavior individually for any chart-block by adding a class called <em>.clr-theme-COLORNAME</em>. You can set any color specified in the <a href="/info/colors_and_styles.html">Color section</a>.
103 </p>
104
105 <div class="row">
106 <div class="col-xs-12 col-md-4">
107 <div class="box">
108 <span class="nd2-title">.clr-theme-lime</span>
109 <div class="nd2-chart clr-theme-lime ct-chart-theme"></div>
110 </div>
111 </div>
112 <div class="col-xs-12 col-md-4">
113 <div class="box">
114 <span class="nd2-title">.clr-theme-pink</span>
115 <div class="nd2-chart clr-theme-pink nd2-chart-large ct-barchart-theme"></div>
116 </div>
117 </div>
118 <div class="col-xs-12 col-md-4">
119 <div class="box">
120 <span class="nd2-title">.clr-theme-indigo</span>
121 <div class="nd2-chart clr-theme-indigo ct-piechart-theme"></div>
122 </div>
123 </div>
124 </div>
125
126 </div>
127
128 </div>
129
130 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
131 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
132 <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
133 <script src="/vendor/waves/waves.min.js"></script>
134 <script src="/vendor/chartist/chartist.min.js"></script>
135 <script src="/js/nativedroid2.js"></script>
136 <script src="/nd2settings.js"></script>
137
138 <script type="text/javascript">
139
140 // Themes
141
142
143
144
145 // Example 1
146
147 new Chartist.Line('.ct-chart', {
148 labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
149 series: [
150 [12, 9, 7, 8, 5],
151 [2, 1, 3.5, 7, 3],
152 [1, 3, 4, 5, 6]
153 ]
154 },{
155 showPoint: false,
156 showArea: false,
157 fullWidth: true,
158 chartPadding: {
159 right: 40
160 },
161 lineSmooth: Chartist.Interpolation.cardinal({
162 tension: 0.1
163 })
164 });
165
166
167 new Chartist.Line('.ct-chart-theme', {
168 labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
169 series: [
170 [12, 9, 7, 8, 5],
171 [2, 1, 3.5, 7, 3],
172 [1, 3, 4, 5, 6]
173 ]
174 },{
175 showPoint: false,
176 showArea: false,
177 fullWidth: true,
178 chartPadding: {
179 right: 40
180 },
181 lineSmooth: Chartist.Interpolation.cardinal({
182 tension: 0.1
183 })
184 });
185
186 // Example 2
187
188
189 new Chartist.Line('.ct-chart2', {
190 labels: ['1', '2', '3', '4', '5', '6'],
191 series: [
192 {
193 name: 'Binary',
194 data: [2, 4, 8, 16, 32, 16]
195 },
196 {
197 name: 'Degressive',
198 data: [18, 11, 8, 6, 5, 2]
199 },
200 {
201 name: 'Golden section',
202 data: [1, 1.618, 2.618, 4.236, 6.854, 11.09]
203 },
204 {
205 name: 'Fibonacci sequence',
206 data: [1, 2, 3, 5, 8, 13]
207 }
208 ]
209 },{
210 showArea: true,
211 showLine: false,
212 showPoint: false,
213 lineSmooth: Chartist.Interpolation.cardinal({
214 tension: 0.1
215 })
216 });
217
218 var $chart2 = $('.ct-chart2');
219
220 var $toolTip = $chart2
221 .append('<div class="tooltip"></div>')
222 .find('.tooltip')
223 .hide();
224
225 $chart2.on('mouseenter', '.ct-point', function() {
226 var $point = $(this),
227 value = $point.attr('ct:value'),
228 seriesName = $point.parent().attr('ct:series-name');
229 $toolTip.html(seriesName + '<br>' + value).show();
230 });
231
232 $chart2.on('mouseleave', '.ct-point', function() {
233 $toolTip.hide();
234 });
235
236 $chart2.on('mousemove', function(event) {
237 $toolTip.css({
238 left: (event.offsetX || event.originalEvent.layerX) - $toolTip.width() / 2 - 10,
239 top: (event.offsetY || event.originalEvent.layerY) - $toolTip.height() - 40
240 });
241 });
242
243 // Example 3
244
245 new Chartist.Line('.ct-chart3', {
246 labels: [1, 2, 3, 4, 5],
247 series: [
248 [28,41,33,-28,-13],
249 [67,82,50,-3,-70],
250 [33,20,44,-41,-30],
251 [13,45,27,-15,-45],
252 [35,19,27,-30,-27],
253 [12,6,4,-78,-43]
254 ]
255 }, {
256 showArea: true,
257 showLine: false,
258 showPoint: false,
259 fullWidth: true,
260 axisX: {
261 showLabel: false,
262 showGrid: false
263 },
264 lineSmooth: Chartist.Interpolation.simple({
265 divisor: 2
266 })
267 });
268
269 // Bar Chart Example 1
270
271 var bc1_data = {
272 labels: ['W1', 'W2', 'W3', 'W4', 'W5'],
273 series: [
274 [28,41,33,28,13],
275 [67,82,50,3,70],
276 [33,20,44,41,30],
277 [13,45,27,15,45],
278 [35,19,27,30,27],
279 [28,41,33,28,13],
280 [67,82,50,3,70],
281 [33,20,44,41,30]
282 ]
283 };
284
285 var bc1_options = {
286 seriesBarDistance: 7,
287 horizontalBars: true,
288 axisX: {
289 labelInterpolationFnc: function(value, index) {
290 return index % 2 === 0 ? value : null;
291 }
292 }
293 };
294
295 new Chartist.Bar('.ct-barchart', bc1_data, bc1_options);
296
297 // Bar Chart Example 2
298
299 var bc2_data = {
300 labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
301 series: [
302 [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
303 [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4],
304 [2, 4, 6, 8, 4, 3, 1, 3, 5, 3, 4, 5],
305 [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
306 ]
307 };
308
309 var bc2_options = {
310 seriesBarDistance: 7
311 };
312
313 var bc2 = new Chartist.Bar('.ct-barchart2', bc2_data, bc2_options);
314 new Chartist.Bar('.ct-barchart-theme', bc2_data, bc2_options);
315
316 // Bar Chart Example 3
317
318 new Chartist.Bar('.ct-barchart3', {
319 labels: ['Q1', 'Q2', 'Q3', 'Q4','Y'],
320 series: [
321 [13,45,27,15,45],
322 [35,19,27,30,27],
323 [67,82,50,3,70],
324 [33,20,44,41,30],
325 [13,45,27,15,45],
326 [35,19,27,30,27],
327 [13,45,27,15,45],
328 [35,19,27,30,27],
329 [67,82,50,3,70],
330 [33,20,44,41,30],
331 [13,45,27,15,45],
332 [35,19,27,30,27],
333 [13,45,27,15,45],
334 [35,19,27,30,27],
335 [67,82,50,3,70],
336 [33,20,44,41,30],
337 [13,45,27,15,45],
338 [35,19,27,30,27]
339 ]
340 }, {
341 stackBars: true,
342 axisY: {
343 labelInterpolationFnc: function(value) {
344 return (value / 1000) + 'k';
345 }
346 }
347 }).on('draw', function(data) {
348 if(data.type === 'bar') {
349 data.element.attr({
350 style: 'stroke-width: 30px'
351 });
352 }
353 });
354
355 // Pie Chart Example 1
356
357 var pc1_data = {
358 series: [5, 3, 4]
359 };
360
361 var pc1_sum = function(a, b) { return a + b };
362
363 new Chartist.Pie('.ct-piechart', pc1_data, {
364 labelInterpolationFnc: function(value) {
365 return Math.round(value / pc1_data.series.reduce(pc1_sum) * 100) + '%';
366 }
367 });
368
369 // Pie Chart Example 2
370
371 new Chartist.Pie('.ct-piechart2', {
372 series: [20, 10, 30, 40]
373 }, {
374 donut: true,
375 donutWidth: 60,
376 startAngle: 270,
377 total: 200,
378 showLabel: false
379 });
380
381
382 new Chartist.Pie('.ct-piechart-theme', {
383 series: [20, 10, 30, 40]
384 }, {
385 donut: true,
386 donutWidth: 60,
387 startAngle: 270,
388 total: 200,
389 showLabel: false
390 });
391
392 // Pie Chart Example 3
393
394 var pc3_chart = new Chartist.Pie('.ct-piechart3', {
395 series: [10, 20, 50, 20, 5, 50, 15],
396 labels: [1, 2, 3, 4, 5, 6, 7]
397 }, {
398 donut: true,
399 showLabel: false
400 });
401
402 pc3_chart.on('draw', function(data) {
403 if(data.type === 'slice') {
404 // Get the total path length in order to use for dash array animation
405 var pathLength = data.element._node.getTotalLength();
406
407 // Set a dasharray that matches the path length as prerequisite to animate dashoffset
408 data.element.attr({
409 'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'
410 });
411
412 // Create animation definition while also assigning an ID to the animation for later sync usage
413 var animationDefinition = {
414 'stroke-dashoffset': {
415 id: 'anim' + data.index,
416 dur: 1000,
417 from: -pathLength + 'px',
418 to: '0px',
419 easing: Chartist.Svg.Easing.easeOutQuint,
420 // We need to use `fill: 'freeze'` otherwise our animation will fall back to initial (not visible)
421 fill: 'freeze'
422 }
423 };
424
425 // If this was not the first slice, we need to time the animation so that it uses the end sync event of the previous animation
426 if(data.index !== 0) {
427 animationDefinition['stroke-dashoffset'].begin = 'anim' + (data.index - 1) + '.end';
428 }
429
430 // We need to set an initial value before the animation starts as we are not in guided mode which would do that for us
431 data.element.attr({
432 'stroke-dashoffset': -pathLength + 'px'
433 });
434
435 // We can't use guided mode as the animations need to rely on setting begin manually
436 // See http://gionkunz.github.io/chartist-js/api-documentation.html#chartistsvg-function-animate
437 data.element.animate(animationDefinition, false);
438 }
439 });
440
441 // For the sake of the example we update the chart every time it's created with a delay of 8 seconds
442 pc3_chart.on('created', function() {
443 if(window.__anim21278907124) {
444 clearTimeout(window.__anim21278907124);
445 window.__anim21278907124 = null;
446 }
447 window.__anim21278907124 = setTimeout(pc3_chart.update.bind(pc3_chart), 10000);
448 });
449
450
451
452 </script>
453
454
455 </body>
456 </html>
This diff could not be displayed because it is too large.
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>nativeDroid II - jQueryMobile Template</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6
7 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
8 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
9 <link rel="stylesheet" href="/vendor/waves/waves.min.css" />
10 <link rel="stylesheet" href="/vendor/wow/animate.css" />
11 <link rel="stylesheet" href="/css/nativedroid2.css" />
12
13 <style>
14 /* Prevent FOUC */
15 body { opacity: 0; }
16 </style>
17
18 </head>
19 <body class="clr-accent-lime">
20
21 <div data-role="page">
22
23 <nd2-include data-src="/examples/fragments/panel.left.html"></nd2-include>
24
25 <div data-role="panel" id="bottomsheet" data-animate="false" data-position='bottom' data-display="overlay">
26 <nd2-include data-src="/examples/fragments/bottom.sheet.html"></nd2-include>
27 </div>
28
29 <div data-role="header" data-position="fixed" class="wow fadeIn">
30 <a href="#leftpanel" class="ui-btn ui-btn-left"><i class="zmdi zmdi-menu"></i></a>
31 <h1 class="wow fadeIn" data-wow-delay='0.4s'>Search</h1>
32 <a href="#bottomsheet" class="ui-btn ui-btn-right wow fadeIn" data-wow-delay='1.2s'><i class="zmdi zmdi-more-vert"></i></a>
33 </div>
34
35 <div role="main" class="ui-content wow fadeIn" data-inset="false" data-wow-delay="0.2s">
36
37
38
39 <span class="nd2-title">Search</span>
40 <p>
41 This search box in the header depends on <a href="http://api.jqueryui.com/autocomplete/">jQueryUI's autocomplete</a> and can be simply triggered by the following code:
42 </p>
43 <p>
44 <pre>new $.nd2Search({
45 <strong>placeholder</strong> : "Input Placeholder", <i>// Placeholder in the search field</i>
46 <strong>defaultIcon</strong> : "globe-alt", <i>// optional: icon | null</i>
47 <strong>source</strong> : [{ label : 'Displayed Value', value : 'real-value', icon : 'custom-icon'}], <i>// <a href='http://api.jqueryui.com/autocomplete/#option-source'>autocomplete : option-source</a></i>
48 <strong>fn</strong> : function(result) { <i>// this function will be executed when a valid result item is selected</i>
49 console.log('--- Your custom handling ---');
50 console.log('you picked: ');
51 console.log(result);
52 }
53 });</pre>
54 </p>
55
56 </div>
57
58 </div>
59
60 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
61 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
62 <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
63 <script src="/vendor/waves/waves.min.js"></script>
64 <script src="/vendor/wow/wow.min.js"></script>
65 <script src="/js/nativedroid2.js"></script>
66 <script src="/nd2settings.js"></script>
67
68 <<script type="text/javascript">
69
70 // Toast Test
71
72 new $.nd2Search({
73 placeholder : "Search",
74 defaultIcon : "globe-alt",
75 source : [
76 {"label": "Afghanistan", "value": "AF"},
77 {"label": "Åland Islands", "value": "AX"},
78 {"label": "Albania", "value": "AL"},
79 {"label": "Algeria", "value": "DZ"},
80 {"label": "American Samoa", "value": "AS"},
81 {"label": "AndorrA", "value": "AD"},
82 {"label": "Angola", "value": "AO"},
83 {"label": "Anguilla", "value": "AI"},
84 {"label": "Antarctica", "value": "AQ"},
85 {"label": "Antigua and Barbuda", "value": "AG"},
86 {"label": "Argentina", "value": "AR"},
87 {"label": "Armenia", "value": "AM"},
88 {"label": "Aruba", "value": "AW"},
89 {"label": "Australia", "value": "AU"},
90 {"label": "Austria", "value": "AT"},
91 {"label": "Azerbaijan", "value": "AZ"},
92 {"label": "Bahamas", "value": "BS"},
93 {"label": "Bahrain", "value": "BH"},
94 {"label": "Bangladesh", "value": "BD"},
95 {"label": "Barbados", "value": "BB"},
96 {"label": "Belarus", "value": "BY"},
97 {"label": "Belgium", "value": "BE"},
98 {"label": "Belize", "value": "BZ"},
99 {"label": "Benin", "value": "BJ"},
100 {"label": "Bermuda", "value": "BM"},
101 {"label": "Bhutan", "value": "BT"},
102 {"label": "Bolivia", "value": "BO"},
103 {"label": "Bosnia and Herzegovina", "value": "BA"},
104 {"label": "Botswana", "value": "BW"},
105 {"label": "Bouvet Island", "value": "BV"},
106 {"label": "Brazil", "value": "BR"},
107 {"label": "British Indian Ocean Territory", "value": "IO"},
108 {"label": "Brunei Darussalam", "value": "BN"},
109 {"label": "Bulgaria", "value": "BG"},
110 {"label": "Burkina Faso", "value": "BF"},
111 {"label": "Burundi", "value": "BI"},
112 {"label": "Cambodia", "value": "KH"},
113 {"label": "Cameroon", "value": "CM"},
114 {"label": "Canada", "value": "CA"},
115 {"label": "Cape Verde", "value": "CV"},
116 {"label": "Cayman Islands", "value": "KY"},
117 {"label": "Central African Republic", "value": "CF"},
118 {"label": "Chad", "value": "TD"},
119 {"label": "Chile", "value": "CL"},
120 {"label": "China", "value": "CN"},
121 {"label": "Christmas Island", "value": "CX"},
122 {"label": "Cocos (Keeling) Islands", "value": "CC"},
123 {"label": "Colombia", "value": "CO"},
124 {"label": "Comoros", "value": "KM"},
125 {"label": "Congo", "value": "CG"},
126 {"label": "Congo, The Democratic Republic of the", "value": "CD"},
127 {"label": "Cook Islands", "value": "CK"},
128 {"label": "Costa Rica", "value": "CR"},
129 {"label": "Cote D\"Ivoire", "value": "CI"},
130 {"label": "Croatia", "value": "HR"},
131 {"label": "Cuba", "value": "CU"},
132 {"label": "Cyprus", "value": "CY"},
133 {"label": "Czech Republic", "value": "CZ"},
134 {"label": "Denmark", "value": "DK"},
135 {"label": "Djibouti", "value": "DJ"},
136 {"label": "Dominica", "value": "DM"},
137 {"label": "Dominican Republic", "value": "DO"},
138 {"label": "Ecuador", "value": "EC"},
139 {"label": "Egypt", "value": "EG"},
140 {"label": "El Salvador", "value": "SV"},
141 {"label": "Equatorial Guinea", "value": "GQ"},
142 {"label": "Eritrea", "value": "ER"},
143 {"label": "Estonia", "value": "EE"},
144 {"label": "Ethiopia", "value": "ET"},
145 {"label": "Falkland Islands (Malvinas)", "value": "FK"},
146 {"label": "Faroe Islands", "value": "FO"},
147 {"label": "Fiji", "value": "FJ"},
148 {"label": "Finland", "value": "FI"},
149 {"label": "France", "value": "FR"},
150 {"label": "French Guiana", "value": "GF"},
151 {"label": "French Polynesia", "value": "PF"},
152 {"label": "French Southern Territories", "value": "TF"},
153 {"label": "Gabon", "value": "GA"},
154 {"label": "Gambia", "value": "GM"},
155 {"label": "Georgia", "value": "GE"},
156 {"label": "Germany", "value": "DE"},
157 {"label": "Ghana", "value": "GH"},
158 {"label": "Gibraltar", "value": "GI"},
159 {"label": "Greece", "value": "GR"},
160 {"label": "Greenland", "value": "GL"},
161 {"label": "Grenada", "value": "GD"},
162 {"label": "Guadeloupe", "value": "GP"},
163 {"label": "Guam", "value": "GU"},
164 {"label": "Guatemala", "value": "GT"},
165 {"label": "Guernsey", "value": "GG"},
166 {"label": "Guinea", "value": "GN"},
167 {"label": "Guinea-Bissau", "value": "GW"},
168 {"label": "Guyana", "value": "GY"},
169 {"label": "Haiti", "value": "HT"},
170 {"label": "Heard Island and Mcdonald Islands", "value": "HM"},
171 {"label": "Holy See (Vatican City State)", "value": "VA"},
172 {"label": "Honduras", "value": "HN"},
173 {"label": "Hong Kong", "value": "HK"},
174 {"label": "Hungary", "value": "HU"},
175 {"label": "Iceland", "value": "IS"},
176 {"label": "India", "value": "IN"},
177 {"label": "Indonesia", "value": "ID"},
178 {"label": "Iran, Islamic Republic Of", "value": "IR"},
179 {"label": "Iraq", "value": "IQ"},
180 {"label": "Ireland", "value": "IE"},
181 {"label": "Isle of Man", "value": "IM"},
182 {"label": "Israel", "value": "IL"},
183 {"label": "Italy", "value": "IT"},
184 {"label": "Jamaica", "value": "JM"},
185 {"label": "Japan", "value": "JP"},
186 {"label": "Jersey", "value": "JE"},
187 {"label": "Jordan", "value": "JO"},
188 {"label": "Kazakhstan", "value": "KZ"},
189 {"label": "Kenya", "value": "KE"},
190 {"label": "Kiribati", "value": "KI"},
191 {"label": "Korea, Democratic People\"S Republic of", "value": "KP"},
192 {"label": "Korea, Republic of", "value": "KR"},
193 {"label": "Kuwait", "value": "KW"},
194 {"label": "Kyrgyzstan", "value": "KG"},
195 {"label": "Lao People\"S Democratic Republic", "value": "LA"},
196 {"label": "Latvia", "value": "LV"},
197 {"label": "Lebanon", "value": "LB"},
198 {"label": "Lesotho", "value": "LS"},
199 {"label": "Liberia", "value": "LR"},
200 {"label": "Libyan Arab Jamahiriya", "value": "LY"},
201 {"label": "Liechtenstein", "value": "LI"},
202 {"label": "Lithuania", "value": "LT"},
203 {"label": "Luxembourg", "value": "LU"},
204 {"label": "Macao", "value": "MO"},
205 {"label": "Macedonia, The Former Yugoslav Republic of", "value": "MK"},
206 {"label": "Madagascar", "value": "MG"},
207 {"label": "Malawi", "value": "MW"},
208 {"label": "Malaysia", "value": "MY"},
209 {"label": "Maldives", "value": "MV"},
210 {"label": "Mali", "value": "ML"},
211 {"label": "Malta", "value": "MT"},
212 {"label": "Marshall Islands", "value": "MH"},
213 {"label": "Martinique", "value": "MQ"},
214 {"label": "Mauritania", "value": "MR"},
215 {"label": "Mauritius", "value": "MU"},
216 {"label": "Mayotte", "value": "YT"},
217 {"label": "Mexico", "value": "MX"},
218 {"label": "Micronesia, Federated States of", "value": "FM"},
219 {"label": "Moldova, Republic of", "value": "MD"},
220 {"label": "Monaco", "value": "MC"},
221 {"label": "Mongolia", "value": "MN"},
222 {"label": "Montserrat", "value": "MS"},
223 {"label": "Morocco", "value": "MA"},
224 {"label": "Mozambique", "value": "MZ"},
225 {"label": "Myanmar", "value": "MM"},
226 {"label": "Namibia", "value": "NA"},
227 {"label": "Nauru", "value": "NR"},
228 {"label": "Nepal", "value": "NP"},
229 {"label": "Netherlands", "value": "NL"},
230 {"label": "Netherlands Antilles", "value": "AN"},
231 {"label": "New Caledonia", "value": "NC"},
232 {"label": "New Zealand", "value": "NZ"},
233 {"label": "Nicaragua", "value": "NI"},
234 {"label": "Niger", "value": "NE"},
235 {"label": "Nigeria", "value": "NG"},
236 {"label": "Niue", "value": "NU"},
237 {"label": "Norfolk Island", "value": "NF"},
238 {"label": "Northern Mariana Islands", "value": "MP"},
239 {"label": "Norway", "value": "NO"},
240 {"label": "Oman", "value": "OM"},
241 {"label": "Pakistan", "value": "PK"},
242 {"label": "Palau", "value": "PW"},
243 {"label": "Palestinian Territory, Occupied", "value": "PS"},
244 {"label": "Panama", "value": "PA"},
245 {"label": "Papua New Guinea", "value": "PG"},
246 {"label": "Paraguay", "value": "PY"},
247 {"label": "Peru", "value": "PE"},
248 {"label": "Philippines", "value": "PH"},
249 {"label": "Pitcairn", "value": "PN"},
250 {"label": "Poland", "value": "PL"},
251 {"label": "Portugal", "value": "PT"},
252 {"label": "Puerto Rico", "value": "PR"},
253 {"label": "Qatar", "value": "QA"},
254 {"label": "Reunion", "value": "RE"},
255 {"label": "Romania", "value": "RO"},
256 {"label": "Russian Federation", "value": "RU"},
257 {"label": "RWANDA", "value": "RW"},
258 {"label": "Saint Helena", "value": "SH"},
259 {"label": "Saint Kitts and Nevis", "value": "KN"},
260 {"label": "Saint Lucia", "value": "LC"},
261 {"label": "Saint Pierre and Miquelon", "value": "PM"},
262 {"label": "Saint Vincent and the Grenadines", "value": "VC"},
263 {"label": "Samoa", "value": "WS"},
264 {"label": "San Marino", "value": "SM"},
265 {"label": "Sao Tome and Principe", "value": "ST"},
266 {"label": "Saudi Arabia", "value": "SA"},
267 {"label": "Senegal", "value": "SN"},
268 {"label": "Serbia and Montenegro", "value": "CS"},
269 {"label": "Seychelles", "value": "SC"},
270 {"label": "Sierra Leone", "value": "SL"},
271 {"label": "Singapore", "value": "SG"},
272 {"label": "Slovakia", "value": "SK"},
273 {"label": "Slovenia", "value": "SI"},
274 {"label": "Solomon Islands", "value": "SB"},
275 {"label": "Somalia", "value": "SO"},
276 {"label": "South Africa", "value": "ZA"},
277 {"label": "South Georgia and the South Sandwich Islands", "value": "GS"},
278 {"label": "Spain", "value": "ES"},
279 {"label": "Sri Lanka", "value": "LK"},
280 {"label": "Sudan", "value": "SD"},
281 {"label": "Suriname", "value": "SR"},
282 {"label": "Svalbard and Jan Mayen", "value": "SJ"},
283 {"label": "Swaziland", "value": "SZ"},
284 {"label": "Sweden", "value": "SE"},
285 {"label": "Switzerland", "value": "CH"},
286 {"label": "Syrian Arab Republic", "value": "SY"},
287 {"label": "Taiwan, Province of China", "value": "TW"},
288 {"label": "Tajikistan", "value": "TJ"},
289 {"label": "Tanzania, United Republic of", "value": "TZ"},
290 {"label": "Thailand", "value": "TH"},
291 {"label": "Timor-Leste", "value": "TL"},
292 {"label": "Togo", "value": "TG"},
293 {"label": "Tokelau", "value": "TK"},
294 {"label": "Tonga", "value": "TO"},
295 {"label": "Trinidad and Tobago", "value": "TT"},
296 {"label": "Tunisia", "value": "TN"},
297 {"label": "Turkey", "value": "TR"},
298 {"label": "Turkmenistan", "value": "TM"},
299 {"label": "Turks and Caicos Islands", "value": "TC"},
300 {"label": "Tuvalu", "value": "TV"},
301 {"label": "Uganda", "value": "UG"},
302 {"label": "Ukraine", "value": "UA"},
303 {"label": "United Arab Emirates", "value": "AE"},
304 {"label": "United Kingdom", "value": "GB"},
305 {"label": "United States", "value": "US"},
306 {"label": "United States Minor Outlying Islands", "value": "UM"},
307 {"label": "Uruguay", "value": "UY"},
308 {"label": "Uzbekistan", "value": "UZ"},
309 {"label": "Vanuatu", "value": "VU"},
310 {"label": "Venezuela", "value": "VE"},
311 {"label": "Viet Nam", "value": "VN"},
312 {"label": "Virgin Islands, British", "value": "VG"},
313 {"label": "Virgin Islands, U.S.", "value": "VI"},
314 {"label": "Wallis and Futuna", "value": "WF"},
315 {"label": "Western Sahara", "value": "EH"},
316 {"label": "Yemen", "value": "YE"},
317 {"label": "Zambia", "value": "ZM"},
318 {"label": "Zimbabwe", "value": "ZW"}
319 ],
320 fn : function(result) {
321 console.log('--- Your custom handling ---');
322 console.log('you picked: ');
323 console.log(result);
324 }
325 });
326
327
328 </script>
329
330
331 </body>
332 </html>
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>nativeDroid II - jQueryMobile Template</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6
7 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
8 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
9 <link rel="stylesheet" href="/vendor/waves/waves.min.css" />
10 <link rel="stylesheet" href="/vendor/wow/animate.css" />
11 <link rel="stylesheet" href="/css/nativedroid2.css" />
12
13 <style>
14 /* Prevent FOUC */
15 body { opacity: 0; }
16 </style>
17
18 </head>
19 <body class="clr-accent-lime">
20
21 <div data-role="page" class="nd2-no-menu-swipe">
22
23 <nd2-include data-src="/examples/fragments/panel.left.html"></nd2-include>
24
25
26 <div data-role="header" data-position="fixed" class="wow fadeIn">
27 <a href="#leftpanel" class="ui-btn ui-btn-left"><i class="zmdi zmdi-menu"></i></a>
28 <h1 class="wow fadeIn" data-wow-delay='0.4s'>Tabs</h1>
29
30 <ul data-role="nd2tabs" data-swipe="true">
31 <li data-tab="friends">Friends</li>
32 <li data-tab="work" data-tab-active="true">Work</li>
33 <li data-tab="holiday">Holiday</li>
34 <li data-tab="colors">Colors</li>
35 </ul>
36
37 </div>
38
39 <div role="main" class="ui-content wow fadeIn" data-inset="false" data-wow-delay="0.2s">
40
41 <div data-role="nd2tab"
42 data-tab="friends">
43
44
45 <ul data-role="listview" data-icon="false">
46 <li data-role="list-divider">
47 Friends
48 </li>
49 <li>
50 <a href="#">
51 <img src="//lorempixel.com/150/150/people/1/" class="ui-thumbnail ui-thumbnail-circular" />
52 <h2>Ethel Chancy</h2>
53 <p>[email protected]</p>
54 </a>
55 </li>
56 <li>
57 <a href="#">
58 <img src="//lorempixel.com/150/150/people/2/" class="ui-thumbnail ui-thumbnail-circular" />
59 <h2>Lorean Gainer</h2>
60 <p>[email protected]</p>
61 </a>
62 </li>
63 <li>
64 <a href="#">
65 <img src="//lorempixel.com/150/150/people/3/" class="ui-thumbnail ui-thumbnail-circular" />
66 <h2>Juliet Gieseke</h2>
67 <p>[email protected]</p>
68 </a>
69 </li>
70 </ul>
71
72
73 </div>
74
75 <div data-role="nd2tab"
76 data-tab="work">
77
78
79 <ul data-role="listview" data-icon="false">
80 <li data-role="list-divider">
81 Work
82 </li>
83 <li>
84 <a href="#">
85 <img src="//lorempixel.com/150/150/people/6/" class="ui-thumbnail ui-thumbnail-circular" />
86 <h2>Gale Cecil</h2>
87 <p>[email protected]</p>
88 </a>
89 </li>
90 <li>
91 <a href="#">
92 <img src="//lorempixel.com/150/150/people/5/" class="ui-thumbnail ui-thumbnail-circular" />
93 <h2>Bernard Desrosier</h2>
94 <p>[email protected]</p>
95 </a>
96 </li>
97 <li>
98 <a href="#">
99 <img src="//lorempixel.com/150/150/people/7/" class="ui-thumbnail ui-thumbnail-circular" />
100 <h2>Emerita Scholl</h2>
101 <p>[email protected]</p>
102 </a>
103 </li>
104 <li>
105 <a href="#">
106 <img src="//lorempixel.com/150/150/people/8/" class="ui-thumbnail ui-thumbnail-circular" />
107 <h2>Elmer Eyer</h2>
108 <p>[email protected]</p>
109 </a>
110 </li>
111 <li>
112 <a href="#">
113 <img src="//lorempixel.com/150/150/people/9/" class="ui-thumbnail ui-thumbnail-circular" />
114 <h2>Shona Mckibben</h2>
115 <p>[email protected]</p>
116 </a>
117 </li>
118 <li>
119 <a href="#">
120 <img src="//lorempixel.com/150/150/people/10/" class="ui-thumbnail ui-thumbnail-circular" />
121 <h2>Hilma Mercer</h2>
122 <p>[email protected]</p>
123 </a>
124 </li>
125 </ul>
126
127 </div>
128
129 <div data-role="nd2tab"
130 data-tab="holiday">
131
132
133
134 <!-- Simple Card with Title !-->
135
136 <div class="nd2-card">
137
138 <div class="card-title has-avatar">
139 <img class="card-avatar" src="//lorempixel.com/200/200/people/9/">
140 <h3 class="card-primary-title">Power of Lavender</h3>
141 <h5 class="card-subtitle">Taken in Provence, France</h5>
142 </div>
143
144 <div class="card-media">
145 <img src="/img/examples/card_bg_2.jpg">
146 </div>
147
148 <div class="card-supporting-text has-action">
149 <strong>Lavandula</strong> (common name lavender) is a genus of 39 known species of flowering plants in the mint family, Lamiaceae. It is native to the Old World and is found from Cape Verde and the Canary Islands, southern Europe across to northern and eastern Africa, the Mediterranean, southwest Asia to southeast India.
150 </div>
151
152 <div class="card-action">
153 <div class="row between-xs">
154 <div class="col-xs-4">
155 <div class="box">
156 <a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-mic'></i></a>
157 <a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-videocam'></i></a>
158 </div>
159 </div>
160 <div class="col-xs-8 align-right">
161 <div class="box">
162 <a href="#" class="ui-btn ui-btn-inline">Action</a>
163 </div>
164 </div>
165 </div>
166 </div>
167
168 </div>
169
170
171
172 <!-- Simple Card No Media !-->
173
174 <div class="nd2-card">
175
176 <div class="card-title has-supporting-text">
177 <h3 class="card-primary-title">Biomaterial</h3>
178 <h5 class="card-subtitle">From Wikipedia, the free encyclopedia</h5>
179 </div>
180
181 <div class="card-supporting-text has-action has-title">
182 A biomaterial is any matter, surface, or construct that interacts with biological systems. As a science, biomaterials is about fifty years old. The study of biomaterials is called biomaterials science. It has experienced steady and strong growth over its history, with many companies investing large amounts of money into the development of new products.
183 </div>
184
185 <div class="card-action">
186 <div class="row between-xs">
187 <div class="col-xs-12">
188 <div class="box">
189 <a href="#" class="ui-btn ui-btn-inline">Applause</a>
190 <a href="#" class="ui-btn ui-btn-inline">Boooh</a>
191 </div>
192 </div>
193 </div>
194 </div>
195
196 </div>
197
198
199 <!-- Media Card with Actions !-->
200
201 <div class="nd2-card">
202
203 <div class="card-media">
204 <img src="/img/examples/card_bg_3.jpg">
205 </div>
206
207 <div class="card-action">
208 <div class="row between-xs">
209 <div class="col-xs-12 align-right">
210 <div class="box">
211 <a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-favorite'></i></a>
212 <a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-bookmark'></i></a>
213 <a href="#" class="ui-btn ui-btn-inline ui-btn-fab"><i class='zmdi zmdi-mail-reply zmd-flip-horizontal'></i></a>
214 </div>
215 </div>
216 </div>
217 </div>
218
219 </div>
220
221
222 <!-- Media Overlay with Background !-->
223
224 <div class="nd2-card">
225
226
227 <div class="card-media">
228 <img src="/img/examples/card_bg_2.jpg">
229
230 <div class='card-media-overlay with-background'>
231
232 <div class="card-title has-supporting-text">
233 <h3 class="card-primary-title">Power of Lavender</h3>
234 <h5 class="card-subtitle">Taken in Provence, France</h5>
235 </div>
236
237 <div class="card-action">
238 <div class="row between-xs">
239 <div class="col-xs-12">
240 <div class="box">
241 <a href="#" class="ui-btn ui-btn-inline">Action 1</a>
242 <a href="#" class="ui-btn ui-btn-inline">Action 2</a>
243 </div>
244 </div>
245 </div>
246 </div>
247
248 </div>
249
250 </div>
251
252
253 </div>
254
255
256 </div>
257
258 <div data-role="nd2tab"
259 data-tab="colors">
260
261 <ul data-role="listview" data-icon="false">
262 <li data-role="list-divider">Available Color Sheets</li>
263
264 <li>
265 <a href="#">
266 <img class="clr-bg-red ui-thumbnail ui-thumbnail-circular" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
267 <h2>red</h2>
268 <p>nativedroid2.color.red.css</p>
269 </a>
270 </li>
271
272 <li>
273 <a href="#">
274 <img class="clr-bg-pink ui-thumbnail ui-thumbnail-circular" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
275 <h2>pink</h2>
276 <p>nativedroid2.color.pink.css</p>
277 </a>
278 </li>
279
280 <li>
281 <a href="#">
282 <img class="clr-bg-purple ui-thumbnail ui-thumbnail-circular" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
283 <h2>purple</h2>
284 <p>nativedroid2.color.purple.css</p>
285 </a>
286 </li>
287
288 <li>
289 <a href="#">
290 <img class="clr-bg-deep-purple ui-thumbnail ui-thumbnail-circular" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
291 <h2>deep-purple</h2>
292 <p>nativedroid2.color.deep-purple.css</p>
293 </a>
294 </li>
295
296 <li>
297 <a href="#">
298 <img class="clr-bg-indigo ui-thumbnail ui-thumbnail-circular" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
299 <h2>indigo</h2>
300 <p>nativedroid2.color.indigo.css</p>
301 </a>
302 </li>
303
304 <li>
305 <a href="#">
306 <img class="clr-bg-blue ui-thumbnail ui-thumbnail-circular" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
307 <h2>blue</h2>
308 <p>nativedroid2.color.blue.css</p>
309 </a>
310 </li>
311
312 <li>
313 <a href="#">
314 <img class="clr-bg-light-blue ui-thumbnail ui-thumbnail-circular" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
315 <h2>light-blue</h2>
316 <p>nativedroid2.color.light-blue.css</p>
317 </a>
318 </li>
319
320 <li>
321 <a href="#">
322 <img class="clr-bg-cyan ui-thumbnail ui-thumbnail-circular" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
323 <h2>cyan</h2>
324 <p>nativedroid2.color.cyan.css</p>
325 </a>
326 </li>
327
328 <li>
329 <a href="#">
330 <img class="clr-bg-teal ui-thumbnail ui-thumbnail-circular" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
331 <h2>teal</h2>
332 <p>nativedroid2.color.teal.css</p>
333 </a>
334 </li>
335
336
337 <li>
338 <a href="#">
339 <img class="clr-bg-green ui-thumbnail ui-thumbnail-circular" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
340 <h2>green</h2>
341 <p>nativedroid2.color.green.css</p>
342 </a>
343 </li>
344
345 <li>
346 <a href="#">
347 <img class="clr-bg-light-green ui-thumbnail ui-thumbnail-circular" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
348 <h2>light-green</h2>
349 <p>nativedroid2.color.light-green.css</p>
350 </a>
351 </li>
352
353 <li>
354 <a href="#">
355 <img class="clr-bg-lime ui-thumbnail ui-thumbnail-circular" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
356 <h2>lime</h2>
357 <p>nativedroid2.color.lime.css</p>
358 </a>
359 </li>
360
361 <li>
362 <a href="#">
363 <img class="clr-bg-yellow ui-thumbnail ui-thumbnail-circular" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
364 <h2>yellow</h2>
365 <p>nativedroid2.color.yellow.css</p>
366 </a>
367 </li>
368
369 <li>
370 <a href="#">
371 <img class="clr-bg-amber ui-thumbnail ui-thumbnail-circular" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
372 <h2>amber</h2>
373 <p>nativedroid2.color.amber.css</p>
374 </a>
375 </li>
376
377 <li>
378 <a href="#">
379 <img class="clr-bg-orange ui-thumbnail ui-thumbnail-circular" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
380 <h2>orange</h2>
381 <p>nativedroid2.color.orange.css</p>
382 </a>
383 </li>
384
385 <li>
386 <a href="#">
387 <img class="clr-bg-deep-orange ui-thumbnail ui-thumbnail-circular" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
388 <h2>deep-orange</h2>
389 <p>nativedroid2.color.deep-orange.css</p>
390 </a>
391 </li>
392
393 <li>
394 <a href="#">
395 <img class="clr-bg-brown ui-thumbnail ui-thumbnail-circular" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
396 <h2>brown</h2>
397 <p>nativedroid2.color.brown.css</p>
398 </a>
399 </li>
400
401 <li>
402 <a href="#">
403 <img class="clr-bg-blue-grey ui-thumbnail ui-thumbnail-circular" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
404 <h2>blue-grey</h2>
405 <p>nativedroid2.color.blue-grey.css</p>
406 </a>
407 </li>
408 </ul>
409
410 </div>
411
412 </div>
413
414 </div>
415
416 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
417 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
418 <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
419 <script src="/vendor/waves/waves.min.js"></script>
420 <script src="/vendor/wow/wow.min.js"></script>
421 <script src="/js/nativedroid2.js"></script>
422 <script src="/nd2settings.js"></script>
423
424 </body>
425 </html>
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>nativeDroid II - jQueryMobile Template</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6
7 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
8 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
9 <link rel="stylesheet" href="/vendor/waves/waves.min.css" />
10 <link rel="stylesheet" href="/css/nativedroid2.css" />
11
12 <style>
13 /* Prevent FOUC */
14 body { opacity: 0; }
15 </style>
16
17 </head>
18 <body>
19
20 <div data-role="page">
21
22 <nd2-include data-src="/examples/fragments/panel.left.html"></nd2-include>
23
24
25 <div data-role="header" data-position="fixed">
26 <a href="#leftpanel" class="ui-btn ui-btn-left"><i class="zmdi zmdi-menu"></i></a>
27 <h1>Toasts</h1>
28 </div>
29
30 <div role="main" class="ui-content" data-inset="false">
31
32 <span class="nd2-title">Toasts</span>
33 <p>
34 Toasts are small notification appearing from the bottom. According to the <a href="https://www.google.com/design/spec/components/snackbars-toasts.html" target="_blank">Material Design Guidelines</a> they have no icon and at least a small message. Optional you can place one action button.
35 </p>
36 <p>
37 In nativeDroid<sup>2</sup> you can trigger Toasts in two different ways.
38 </p>
39 <span class="nd2-title">Programmatically</span>
40 <p>
41 <pre><strong>new</strong> $.nd2Toast({ <em>// The 'new' keyword is important, otherwise you would overwrite the current toast instance</em>
42 <strong>message</strong> : "Sample Message", <em>// Required</em>
43 <strong>action</strong> : { <em>// Optional (Defines the action button on the right)</em>
44 title : "Pick phone", <em>// Title of the action button</em>
45 link : "/any/link.html", <em>// optional (either link or fn or both must be set to define an action)</em>
46 fn : function() { <em>// function that will be triggered when action clicked</em>
47 console.log("Action Button clicked'");
48 },
49 color : "red" <em>// optional color of the button (default: 'lime')</em>
50 },
51 <strong>ttl</strong> : 8000 <em>// optional, time-to-live in ms (default: 3000)</em>
52 });</pre>
53 </p>
54 <span class="nd2-title">By Data Attributes</span>
55 <p>
56 <pre>&lt;a href="#"
57 <strong>data-role="toast"</strong>
58 <strong>data-toast-message</strong>="Simple toast message set by data-message"
59 data-toast-action-title="Action"
60 data-toast-action-link="toasts.html"
61 data-toast-action-color="red"
62 data-toast-ttl="6000"&gt;Link&lt;/a&gt;</pre>
63 </p>
64
65 <span class="nd2-title">Demonstration</span>
66 <p>
67 <a href="#"
68 class="ui-btn clr-btn-accent-blue ui-btn-inline"
69 data-role="toast"
70 data-toast-message="Simple toast message set by data-message"
71 data-toast-action-title="Action"
72 data-toast-action-link="toasts.html"
73 data-toast-action-color="red"
74 data-toast-ttl="6000"><i class='zmdi zmdi-play'></i> Open Toast by data attributes</a>
75
76 <a href="#"
77 class="ui-btn clr-btn-accent-green ui-btn-inline"
78 data-role="toast"
79 data-toast-message="I'm just text"><i class='zmdi zmdi-play'></i> Sample Toast with Text Message only</a>
80 </p>
81
82
83 <a href="#"
84 class="ui-btn
85 ui-btn-inline
86 ui-btn-fab
87 ui-btn-fab-bottom
88 ui-btn-raised
89 clr-primary"
90
91 data-role="toast"
92 data-toast-message="Mic on"
93 data-toast-action-title="Abort"
94 data-toast-action-link="toasts.html"
95 data-toast-action-color="yellow">
96 <i class='zmdi zmdi-mic-off zmd-2x'></i>
97 </a>
98
99 </div>
100
101 </div>
102
103 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
104 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
105 <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
106 <script src="/vendor/waves/waves.min.js"></script>
107 <script src="/js/nativedroid2.js"></script>
108 <script src="/nd2settings.js"></script>
109
110 <<script type="text/javascript">
111
112 // Toast Test
113
114 new $.nd2Toast({
115 message : "Message has been deleted",
116 action : {
117 title : "undo",
118 fn : function() {
119 console.log("I am the function called by 'Pick phone...'");
120 },
121 color : "lime"
122 },
123 ttl : 3000
124 });
125
126
127 </script>
128
129
130 </body>
131 </html>
1 <!-- Paste your google adsense code here or write your own advertising code. !-->
2
3 <div class="nd2-sample-ad">
4 <a href="http://nativedroid.godesign.ch" target="_blank"><img src="http://placehold.it/450x72/E8117F/ffffff?text=Sample+Banner"></a>
5 </div>
...\ No newline at end of file ...\ No newline at end of file
1 <!-- Paste your google adsense code here or write your own advertising code. !-->
2
3 <div class="nd2-sample-ad">Sample Link Ad: <a href="http://nativedroid.godesign.ch" target="_blank">Free jQueryMobile Theme inspired by Material Design</a></div>
...\ No newline at end of file ...\ No newline at end of file
1 <div class='row around-xs'>
2 <div class='col-xs-auto'>
3 <a href='#' class='ui-bottom-sheet-link ui-btn ui-btn-inline waves-effect waves-button waves-effect waves-button' data-ajax='false'><i class='zmdi zmdi-assignment zmd-2x'></i><strong>Clipboard</strong></a>
4 </div>
5 <div class='col-xs-auto'>
6 <a href='#' class='ui-bottom-sheet-link ui-btn ui-btn-inline waves-effect waves-button waves-effect waves-button' data-ajax='false'><i class='zmdi zmdi-fire zmd-2x'></i><strong>Hot Stuff</strong></a>
7 </div>
8 <div class='col-xs-auto'>
9 <a href='#' class='ui-bottom-sheet-link ui-btn ui-btn-inline waves-effect waves-button waves-effect waves-button' data-ajax='false'><i class='zmdi zmdi-cloud-outline-alt zmd-2x'></i><strong>Cloud</strong></a>
10 </div>
11 <div class='col-xs-auto'>
12 <a href='#' class='ui-bottom-sheet-link ui-btn ui-btn-inline waves-effect waves-button waves-effect waves-button' data-ajax='false'><i class='zmdi zmdi-format-color-fill zmd-2x'></i><strong>Fillcolor</strong></a>
13 </div>
14 </div>
...\ No newline at end of file ...\ No newline at end of file
1 <div data-role="dialog">
2
3 <div data-role="header">
4 <h1>Delete from library?</h1>
5 </div>
6
7 <div data-role="content">
8 <p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
9
10 <a href="dialog/index.html" data-rel="back" data-role="button" data-inline="true" class="ui-btn ui-btn-primary"><i class='zmdi zmdi-check'></i>Sounds good</a>
11 <a href="dialog/index.html" data-rel="back" data-role="button" data-inline="true" class="ui-btn ui-btn-primary"><i class='zmdi zmdi-cancel'></i>Cancel</a>
12
13 </div>
14 </div>
...\ No newline at end of file ...\ No newline at end of file
1 <!-- panel left -->
2 <div data-role="panel" id="leftpanel" data-display="overlay" data-position-fixed="true" >
3
4 <div class='nd2-sidepanel-profile wow fadeInDown'>
5 <img class='profile-background' src="//lorempixel.com/400/200/abstract/2/" />
6 <div class="row">
7 <div class='col-xs-4 center-xs'>
8 <div class='box'>
9 <img class="profile-thumbnail" src="//lorempixel.com/200/200/people/9/" />
10 </div>
11 </div>
12 <div class='col-xs-8'>
13 <div class='box profile-text'>
14 <strong>Jane Doe</strong>
15 <span class='subline'>Super Power User</span>
16 </div>
17 </div>
18 </div>
19 </div>
20
21
22 <ul data-role="listview" data-inset="false">
23 <li data-role="list-divider">Elements</li>
24 </ul>
25 <div data-role="collapsible" data-inset="false" data-collapsed-icon="carat-d" data-expanded-icon="carat-d" data-iconpos="right">
26 <h3>Basic Elements</h3>
27 <ul data-role="listview" data-inset="false" data-icon="false">
28 <li><a href="/examples/elements/text.html" data-ajax='false' data-icon="false">Text Elements</a></li>
29 <li><a href="/examples/elements/grid.html" data-ajax='false' data-icon="false">FlexboxGrid</a></li>
30 <li><a href="/examples/elements/buttons.html" data-ajax='false' data-icon="false">Buttons</a></li>
31 <li><a href="/examples/elements/header_footer.html" data-ajax='false'>Header &amp; Footer</a></li>
32 <li><a href="/examples/elements/listviews.html" data-ajax='false'>Listviews</a></li>
33 <li><a href="/examples/elements/forms.html" data-ajax='false'>Forms</a></li>
34 <li><a href="/examples/elements/tables.html" data-ajax='false'>Tables</a></li>
35 <li><a href="/examples/elements/dialog_popups.html" data-ajax='false'>Dialog &amp; Popup</a></li>
36 <li><a href="/examples/elements/panels.html" data-ajax='false'>Panels</a></li>
37 <li><a href="/examples/elements/autocomplete.html" data-ajax='false'>Autocomplete</a></li>
38 <li><a href="/examples/elements/collapsible_accordions.html" data-ajax='false'>Collapsible &amp; Accordions</a></li>
39 </ul>
40 </div>
41 <div data-role="collapsible" data-inset="false" data-collapsed-icon="carat-d" data-expanded-icon="carat-d" data-iconpos="right">
42 <h3>Extended Elements</h3>
43 <ul data-role="listview" data-icon="false">
44 <li><a href="/examples/extended/tabs.html" data-ajax='false'>Tabs</a></li>
45 <li><a href="/examples/extended/cards.html" data-ajax='false'>Cards</a></li>
46 <li><a href="/examples/extended/search.html" data-ajax='false'>Search</a></li>
47 <li><a href="/examples/extended/icons.html" data-ajax='false'>Icons</a></li>
48 <li><a href="/examples/extended/charts.html" data-ajax='false'>Charts</a></li>
49 <li><a href="/examples/extended/toasts.html" data-ajax='false'>Toasts</a></li>
50 <li><a href="/examples/extended/bottomsheet.html" data-ajax='false'>Bottom Sheets</a></li>
51 </ul>
52 </div>
53 <ul data-role="listview" data-inset="false">
54 <li data-role="list-divider">Layouts</li>
55 </ul>
56 <div data-role="collapsible" data-inset="false" data-collapsed-icon="carat-d" data-expanded-icon="carat-d" data-iconpos="right">
57 <h3>Real-World-Examples</h3>
58 <ul data-role="listview" data-icon="false">
59 <li><a href="/examples/pages/profile.html" class="ui-disabled" data-ajax='false'>Profile</a></li>
60 <li><a href="/examples/pages/dashboard.html" class="ui-disabled" data-ajax='false'>Dashboard</a></li>
61 <li><a href="/examples/pages/gallery.html" class="ui-disabled" data-ajax='false'>Gallery</a></li>
62 <li><a href="/examples/pages/chat.html" class="ui-disabled" data-ajax='false'>Chat</a></li>
63 <li><a href="/examples/pages/mail_inbox.html" class="ui-disabled" data-ajax='false'>E-Mail Inbox</a></li>
64 <li><a href="/examples/pages/team.html" class="ui-disabled" data-ajax='false'>Team</a></li>
65 <li><a href="/examples/pages/products_services.html" class="ui-disabled" data-ajax='false'>Products &amp; Services</a></li>
66 <li><a href="/examples/pages/blog.html" class="ui-disabled" data-ajax='false'>Blog</a></li>
67 <li><a href="/examples/pages/blogpost.html" class="ui-disabled" data-ajax='false'>Blogpost</a></li>
68 </ul>
69 </div>
70 <hr class="inset">
71 <ul data-role="listview" data-inset="false">
72 <li data-role="list-divider">Information</li>
73 </ul>
74 <div data-role="collapsible" data-inset="false" data-collapsed-icon="carat-d" data-expanded-icon="carat-d" data-iconpos="right">
75 <h3>Nice to Know</h3>
76 <ul data-role="listview" data-icon="false">
77 <li><a href="/info/colors_and_styles.html" data-ajax='false'>Colors &amp; Styles</a></li>
78 <li><a href="/info/credits.html" data-ajax='false'>Credits &amp; License</a></li>
79 </ul>
80 </div>
81 </div>
82 <!-- /panel left -->
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>nativeDroid II - jQueryMobile Template</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6
7 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
8 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
9 <link rel="stylesheet" href="/vendor/waves/waves.min.css" />
10 <link rel="stylesheet" href="/css/nativedroid2.css" />
11
12 <style>
13 /* Prevent FOUC */
14 body { opacity: 0; }
15 </style>
16
17 </head>
18 <body>
19
20 <div data-role="page">
21
22 <nd2-include data-src="/examples/fragments/panel.left.html"></nd2-include>
23
24
25 <div data-role="header" data-position="fixed">
26 <a href="#leftpanel" class="ui-btn ui-btn-left"><i class="fa fa-bars"></i></a>
27 <h1>Blog</h1>
28 </div>
29
30 <div role="main" class="ui-content" data-inset="false">
31
32 content here.
33
34 </div>
35
36 </div>
37
38 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
39 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
40 <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
41 <script src="/vendor/waves/waves.min.js"></script>
42 <script src="/js/nativedroid2.js"></script>
43 <script src="/nd2settings.js"></script>
44
45 </body>
46 </html>
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>nativeDroid II - jQueryMobile Template</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6
7 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
8 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
9 <link rel="stylesheet" href="/vendor/waves/waves.min.css" />
10 <link rel="stylesheet" href="/css/nativedroid2.css" />
11
12 <style>
13 /* Prevent FOUC */
14 body { opacity: 0; }
15 </style>
16
17 </head>
18 <body>
19
20 <div data-role="page">
21
22 <nd2-include data-src="/examples/fragments/panel.left.html"></nd2-include>
23
24
25 <div data-role="header" data-position="fixed">
26 <a href="#leftpanel" class="ui-btn ui-btn-left"><i class="fa fa-bars"></i></a>
27 <h1>Blogpost</h1>
28 </div>
29
30 <div role="main" class="ui-content" data-inset="false">
31
32 content here.
33
34 </div>
35
36 </div>
37
38 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
39 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
40 <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
41 <script src="/vendor/waves/waves.min.js"></script>
42 <script src="/js/nativedroid2.js"></script>
43 <script src="/nd2settings.js"></script>
44
45 </body>
46 </html>
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>nativeDroid II - jQueryMobile Template</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6
7 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
8 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
9 <link rel="stylesheet" href="/vendor/waves/waves.min.css" />
10 <link rel="stylesheet" href="/css/nativedroid2.css" />
11
12 <style>
13 /* Prevent FOUC */
14 body { opacity: 0; }
15 </style>
16
17 </head>
18 <body>
19
20 <div data-role="page">
21
22 <nd2-include data-src="/examples/fragments/panel.left.html"></nd2-include>
23
24
25 <div data-role="header" data-position="fixed">
26 <a href="#leftpanel" class="ui-btn ui-btn-left"><i class="fa fa-bars"></i></a>
27 <h1>Chat</h1>
28 </div>
29
30 <div role="main" class="ui-content" data-inset="false">
31
32 content here.
33
34 </div>
35
36 </div>
37
38 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
39 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
40 <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
41 <script src="/vendor/waves/waves.min.js"></script>
42 <script src="/js/nativedroid2.js"></script>
43 <script src="/nd2settings.js"></script>
44
45 </body>
46 </html>
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>nativeDroid II - jQueryMobile Template</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6
7 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
8 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
9 <link rel="stylesheet" href="/vendor/waves/waves.min.css" />
10 <link rel="stylesheet" href="/css/nativedroid2.css" />
11
12 <style>
13 /* Prevent FOUC */
14 body { opacity: 0; }
15 </style>
16
17 </head>
18 <body>
19
20 <div data-role="page">
21
22 <nd2-include data-src="/examples/fragments/panel.left.html"></nd2-include>
23
24
25 <div data-role="header" data-position="fixed">
26 <a href="#leftpanel" class="ui-btn ui-btn-left"><i class="fa fa-bars"></i></a>
27 <h1>Dashboard</h1>
28 </div>
29
30 <div role="main" class="ui-content" data-inset="false">
31
32 content here.
33
34 </div>
35
36 </div>
37
38 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
39 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
40 <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
41 <script src="/vendor/waves/waves.min.js"></script>
42 <script src="/js/nativedroid2.js"></script>
43 <script src="/nd2settings.js"></script>
44
45 </body>
46 </html>
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>nativeDroid II - jQueryMobile Template</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6
7 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
8 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
9 <link rel="stylesheet" href="/vendor/waves/waves.min.css" />
10 <link rel="stylesheet" href="/css/nativedroid2.css" />
11
12 <style>
13 /* Prevent FOUC */
14 body { opacity: 0; }
15 </style>
16
17 </head>
18 <body>
19
20 <div data-role="page">
21
22 <nd2-include data-src="/examples/fragments/panel.left.html"></nd2-include>
23
24
25 <div data-role="header" data-position="fixed">
26 <a href="#leftpanel" class="ui-btn ui-btn-left"><i class="fa fa-bars"></i></a>
27 <h1>Gallery</h1>
28 </div>
29
30 <div role="main" class="ui-content" data-inset="false">
31
32 content here.
33
34 </div>
35
36 </div>
37
38 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
39 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
40 <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
41 <script src="/vendor/waves/waves.min.js"></script>
42 <script src="/js/nativedroid2.js"></script>
43 <script src="/nd2settings.js"></script>
44
45 </body>
46 </html>
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>nativeDroid II - jQueryMobile Template</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6
7 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
8 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
9 <link rel="stylesheet" href="/vendor/waves/waves.min.css" />
10 <link rel="stylesheet" href="/css/nativedroid2.css" />
11
12 <style>
13 /* Prevent FOUC */
14 body { opacity: 0; }
15 </style>
16
17 </head>
18 <body>
19
20 <div data-role="page">
21
22 <nd2-include data-src="/examples/fragments/panel.left.html"></nd2-include>
23
24
25 <div data-role="header" data-position="fixed">
26 <a href="#leftpanel" class="ui-btn ui-btn-left"><i class="fa fa-bars"></i></a>
27 <h1>E-Mail Inbox</h1>
28 </div>
29
30 <div role="main" class="ui-content" data-inset="false">
31
32 content here.
33
34 </div>
35
36 </div>
37
38 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
39 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
40 <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
41 <script src="/vendor/waves/waves.min.js"></script>
42 <script src="/js/nativedroid2.js"></script>
43 <script src="/nd2settings.js"></script>
44
45 </body>
46 </html>
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>nativeDroid II - jQueryMobile Template</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6
7 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
8 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
9 <link rel="stylesheet" href="/vendor/waves/waves.min.css" />
10 <link rel="stylesheet" href="/css/nativedroid2.css" />
11
12 <style>
13 /* Prevent FOUC */
14 body { opacity: 0; }
15 </style>
16
17 </head>
18 <body>
19
20 <div data-role="page">
21
22 <nd2-include data-src="/examples/fragments/panel.left.html"></nd2-include>
23
24
25 <div data-role="header" data-position="fixed">
26 <a href="#leftpanel" class="ui-btn ui-btn-left"><i class="fa fa-bars"></i></a>
27 <h1>Products &amp; Services</h1>
28 </div>
29
30 <div role="main" class="ui-content" data-inset="false">
31
32 content here.
33
34 </div>
35
36 </div>
37
38 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
39 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
40 <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
41 <script src="/vendor/waves/waves.min.js"></script>
42 <script src="/js/nativedroid2.js"></script>
43 <script src="/nd2settings.js"></script>
44
45 </body>
46 </html>
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>nativeDroid II - jQueryMobile Template</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6
7 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
8 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
9 <link rel="stylesheet" href="/vendor/waves/waves.min.css" />
10 <link rel="stylesheet" href="/css/nativedroid2.css" />
11
12 <style>
13 /* Prevent FOUC */
14 body { opacity: 0; }
15 </style>
16
17 </head>
18 <body>
19
20 <div data-role="page">
21
22 <nd2-include data-src="/examples/fragments/panel.left.html"></nd2-include>
23
24
25 <div data-role="header" data-position="fixed">
26 <a href="#leftpanel" class="ui-btn ui-btn-left"><i class="fa fa-bars"></i></a>
27 <h1>Profile</h1>
28 </div>
29
30 <div role="main" class="ui-content" data-inset="false">
31
32 content here.
33
34 </div>
35
36 </div>
37
38 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
39 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
40 <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
41 <script src="/vendor/waves/waves.min.js"></script>
42 <script src="/js/nativedroid2.js"></script>
43 <script src="/nd2settings.js"></script>
44
45 </body>
46 </html>
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>nativeDroid II - jQueryMobile Template</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6
7 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
8 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
9 <link rel="stylesheet" href="/vendor/waves/waves.min.css" />
10 <link rel="stylesheet" href="/css/nativedroid2.css" />
11
12 <style>
13 /* Prevent FOUC */
14 body { opacity: 0; }
15 </style>
16
17 </head>
18 <body>
19
20 <div data-role="page">
21
22 <nd2-include data-src="/examples/fragments/panel.left.html"></nd2-include>
23
24
25 <div data-role="header" data-position="fixed">
26 <a href="#leftpanel" class="ui-btn ui-btn-left"><i class="fa fa-bars"></i></a>
27 <h1>Team</h1>
28 </div>
29
30 <div role="main" class="ui-content" data-inset="false">
31
32 content here.
33
34 </div>
35
36 </div>
37
38 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
39 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
40 <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
41 <script src="/vendor/waves/waves.min.js"></script>
42 <script src="/js/nativedroid2.js"></script>
43 <script src="/nd2settings.js"></script>
44
45 </body>
46 </html>
...@@ -263,13 +263,13 @@ ...@@ -263,13 +263,13 @@
263 <label for="account_email">E-mail</label> 263 <label for="account_email">E-mail</label>
264 <div class="input-group"> 264 <div class="input-group">
265 <span class="input-group-addon"><i class="fa fa-envelope"></i></span> 265 <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
266 <input type="text" value="<?php if(isset($data['personal']['email'])) echo $data['personal']['email']; ?>" id="account_email" class="form-control" placeholder="[email protected]" /> 266 <input type="text" value="<?php if(isset($data['personal']['email'])) echo $data['personal']['email']; ?>" id="account_email" class="form-control" />
267 </div> 267 </div>
268 <div class="separator bottom"></div> 268 <div class="separator bottom"></div>
269 <label for="account_website">Website</label> 269 <label for="account_website">Website</label>
270 <div class="input-group"> 270 <div class="input-group">
271 <span class="input-group-addon"><i class="fa fa-link"></i></span> 271 <span class="input-group-addon"><i class="fa fa-link"></i></span>
272 <input type="text" value="<?php if(isset($data['personal']['website'])) echo $data['personal']['website']; ?>" id="account_website" class="form-control" placeholder="http://www.website.com" /> 272 <input type="text" value="<?php if(isset($data['personal']['website'])) echo $data['personal']['website']; ?>" id="account_website" class="form-control" />
273 </div> 273 </div>
274 <div class="separator bottom"></div> 274 <div class="separator bottom"></div>
275 </div> 275 </div>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!