<!DOCTYPE html> <!--网格布局--> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <!--宽度就是设备的宽度,缩放1.0,表示不缩放--> <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"> <title></title> <!--jquerymobile必须依赖着3个库文件--> <script src="jquery-2.1.4.min.js"></script> <script src="jquery.mobile-1.4.5.min.js"></script> <link href="jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css"> </head> <body> <!--ui-grid-a代表2列--> <div class="ui-grid-a"> <div class="ui-block-a"> <div class="ui-bar ui-bar-a">hello A</div> </div> <div class="ui-block-b"> <div class="ui-bar ui-bar-a">hello B</div> </div> </div> <!--ui-grid-b代表3列,以此类推。。。--> <div class="ui-grid-b"> <div class="ui-block-a"> <div class="ui-bar ui-bar-a">hello A</div> </div> <div class="ui-block-b"> <div class="ui-bar ui-bar-a">hello B</div> </div> <div class="ui-block-c"> <div class="ui-bar ui-bar-a">hello C</div> </div> </div> <!--在2列中放入控件--> <!--data-theme="a",a是白色背景,b是黑色背景--> <div class="ui-grid-a"> <div class="ui-block-a"> <input type="button" data-theme="a" value="按钮"> <input type="button" data-theme="b" value="按钮"> <input type="button" data-theme="a" value="按钮"> </div> <div class="ui-block-b"> <input type="button" data-theme="a" value="按钮"> <input type="button" data-theme="a" value="按钮"> <input type="button" data-theme="a" value="按钮"> </div> </div> <!--设置成1列--> <div class="ui-grid-solo"> <div class="ui-block-a"> <input type="button" data-theme="a" value="按钮"> </div> </div> </body></html>
源码下载:
http://download.youkuaiyun.com/download/zhaihaohao1/9164935
![]()
![]()
jQuery Mobile基础06----jQuery Mobile Widgets(2)-grid(网格布局
最新推荐文章于 2024-08-17 11:32:55 发布