Mobile templte view example file delete
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 & 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 & 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 & 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 / <h1></h1> | ||
| 36 | <h2>Regular 34px / 400 / <h2></h2> | ||
| 37 | <h3>Regular 24px / 400 / <h3></h3> | ||
| 38 | <h4>Medium 2sp / 500 / <h4></h4> | ||
| 39 | <h5>Regular 16px / 400 / <h5></h5> | ||
| 40 | <h6>Regular 14px / 400 / <h6></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><div data-role="panel" id="bottomsheetblock" <strong>class="ui-bottom-sheet"</strong> data-animate="false" data-position='bottom' data-display="overlay">...</div></pre> | ||
| 64 | |||
| 65 | <span class="nd2-subhead">List item as list:</span> | ||
| 66 | <pre><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">...</div></pre> | ||
| 67 | |||
| 68 | <span class="nd2-subhead">Bottom Sheet Content</span> | ||
| 69 | <pre><div class='<strong>row</strong> around-xs'> | ||
| 70 | <div class='<strong>col-xs-auto</strong>'> | ||
| 71 | <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'> | ||
| 72 | <i class='zmdi zmdi-assignment zmd-2x'></i> | ||
| 73 | <strong>Clipboard</strong> | ||
| 74 | </a> | ||
| 75 | </div> | ||
| 76 | <div class='<strong>col-xs-auto</strong>'> | ||
| 77 | <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'> | ||
| 78 | <i class='zmdi zmdi-fire zmd-2x'></i> | ||
| 79 | <strong>Hot Stuff</strong> | ||
| 80 | </a> | ||
| 81 | </div> | ||
| 82 | <div class='<strong>col-xs-auto</strong>'> | ||
| 83 | <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'> | ||
| 84 | <i class='zmdi zmdi-cloud-outline-alt zmd-2x'></i> | ||
| 85 | <strong>Cloud</strong> | ||
| 86 | </a> | ||
| 87 | </div> | ||
| 88 | <div class='<strong>col-xs-auto</strong>'> | ||
| 89 | <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'> | ||
| 90 | <i class='zmdi zmdi-format-color-fill zmd-2x'></i> | ||
| 91 | <strong>Fillcolor</strong> | ||
| 92 | </a> | ||
| 93 | </div> | ||
| 94 | </div></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><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">Link</a></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 & 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 & 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 & 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 & 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 & Styles</a></li> | ||
| 78 | <li><a href="/info/credits.html" data-ajax='false'>Credits & 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 & 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> | ... | ... |
-
Please register or sign in to post a comment