toggle
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user- 6 7 scalable=no"/> 8 <title>ionic应用</title> 9 <link rel="stylesheet" href="css/ionic.min.css"/> 10 </head> 11 <body> 12 13 <div class="bar bar-header"> 14 <div class="h1 title">切换</div> 15 16 <div class="content has-header"> 17 <ul class="list"> 18 <li class="item item-toggle"> 19 HTML5 20 <label class="toggle"> 21 <input type="checkbox" checked/> 22 <div class="track"> 23 <div class="handle"></div> 24 </div> 25 </label> 26 </li> 27 <li class="item item-toggle"> 28 HTML5 29 <label class="toggle toggle-positive"> 30 <input type="checkbox"/> 31 <div class="track"> 32 <div class="handle"></div> 33 </div> 34 </label> 35 </li> 36 </ul> 37 </div> 38 </div> 39 40 <script src="js/ionic.bundle.min.js"></script> 41 42 </body> 43 </html>
checkbox
1 <div class="bar bar-header"> 2 <div class="h1 title">复选框</div> 3 4 <div class="content has-header"> 5 <ul class="list"> 6 <li class="item item-checkbox"> 7 <label class="checkbox"> 8 <input type="checkbox" checked/> 9 </label> 10 xxx 11 </li> 12 <li class="item item-checkbox"> 13 <label class="checkbox"> 14 <input type="checkbox"/> 15 </label> 16 xxx 17 </li> 18 </ul> 19 </div> 20 </div>
时间： 2024-10-18 13:38:06