jqueryMobile使用示例分享

jQuery手机是客户端代码，但其基于创建交互式、快速动态网页应用的网页开发技术技术与服务器端交互。因此拥有一个网络服务，才能更好的体验jQuery手机的功能。这里不打算介绍网络服务的搭建过程，朋友们可以根据自己的实际需要自行搭建。

示例一：

！DOCTYPE html html lang=' zh-CN ' head meta charset=' UTF-8 ' link rel='样式表href=' http://代码。jquery。com/mobile/1。3 .2/jquery。移动一号。3 .2 .量滴CSS ' script src=' http :http://代码。jquery。com/jquery-1。8 .3 .量滴js '/脚本src=' http 3360http://代码.图标/h1 /div数据-角色="内容“p定位图标：/p a数据-角色='按钮'数据-图标='搜索'数据-图标='top '顶部/a a a a href=' # link ' data-role=' button ' data-icon=' search ' data-icon pos=' right '右侧/a a a a href=' # link ' data-role=' button ' data-icon=' search ' data-icon pos=' bottom '底部/a a a a href=' # link ' data-role=' button ' data-icon=' search ' data-icon pos=' left '左侧/a /div数据-角色="页脚“h1底部文本/h1 /div/div /body /html演示图：

示例二：

！' DOCTYPE htmlhtmlheadlink rel='样式表href=' http://代码。jquery。com/mobile/1。3 .2/jquery。移动一号。3 .2 .量滴CSS ' script src=' http :3358代码。jquery。com/jquery-1。8 .3 .量滴js '/script script src=' http :3358代码。jquery。com/mobile/1。3 .2/jquery .可折叠块/h1 /div数据-角色="内容“div数据-角色="可折叠“h1点击我-我可以折叠！/h1 p我是可折叠的内容/p/div/数据-角色="页脚“h1页脚文本/h1 /div/div /body/html演示图

示例三：

！DOCTYPE html html lang=' zh _ CN ' hearta charset=' utf-8 '！- link rel='样式表href=' http://应用程序。bdimg。com/libs/jquery mobile/1。4 .2/jquery。移动电话。量滴CSS ' script src=' http :http://apps。bdimg。com/libs/jquery/1。10 .2/jquery。量滴js '/script script src=' http :3358 apps。bdimg。com/libs/jquery mobile可折叠集合/h1 /div数据-角色="内容“div数据-角色="可折叠-集合“div数据-角色="可折叠“h3点击我-我可以折叠！/h3 p我是可折叠的内容/p /div数据-角色="可折叠“h3点击我-我可以折叠！/h3 p我是可折叠的内容/p /div数据-角色="可折叠“h3点击我-我可以折叠！/h3 p我是可折叠的内容/p /div数据-角色="可折叠“h3点击我-我可以折叠！/h3 p我是可折叠的内容/p/div/div/数据-角色="页脚“h1在此插入底部文本/h1 /div/div /body/html演示图：

示例四：

html lang=' zh _ CN ' hearta charset=' utf-8 ' link rel='样式表href=' http://应用程序。bdimg。com/libs/jquerymobile/1。4 .2/jquery。移动电话。量滴CSS ' script src=' http :http://apps。bdimg。com/libs/jquery/1。10 .2/jquery。量滴js '/script script src=' http 336030 ui-block-b，ui-block-c {背景色：浅灰色；border: 1px纯黑；高度： 100像素；字体粗细：粗体；文本对齐：中心；padd : 30px }/style/head dydiv数据-角色='page' id='pageone' div数据-角色=“标题”h1自定义的列/h1 /div数据-角色="内容“p三列样式布局：/p div class=' ui-grid-b ' div class=' ui-block-a ' span第一个列/span/div class=' ui-block-b ' span第二个列/span/div class=' ui-block-c ' span第三个列/span/div/div/body/html演示图

示例五：

！DOCTYPE html html lang=' zh-CN ' hearta charset=' utf-8 ' link rel='样式表href=' http://应用程序。bdimg。com/libs/jquery mobile/1。4 .2/jquery。移动电话。量滴CSS ' script src=' http :http://apps。bdimg。com/libs/jquery/1。10 .2/jquery。量滴js '/script脚本src=' http 333有序列表：/h2 ol数据-角色='listview' lia href='# '列表项/a/li lia href='# '列表项/a/li lia href='# '列表项/a/li /ol h2无序列表：/h2 ul数据-角色='listview' lia href='# '列表项/a/li lia href='# '列表项/a/li lia href='# '列表项/a/li /ul /div/div /body/html演示图

在介绍过程中有不对的地方或不严谨的地方，欢予以纠正。感谢大家！

与其他教程不同的是，本教程都是通一个个实例进行展示。关键性介绍都会在代码中穿插。