03982206 by Yashwant

Mobile templte view example file delete

1 parent 9238933e
Showing 34 changed files with 3 additions and 1741 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
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>
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="/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!