小强的HTML5移动开发之路（44）——JqueryMobile中的按钮

最新推荐文章于 2018-01-03 09:52:45 发布
最新推荐文章于 2018-01-03 09:52:45 发布
阅读量488 收藏
点赞数

一、链接按钮

[html]  view plain  copy
 print ?
  1. <!DOCTYPE html>   
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>jQuery Mobile Web 应用程序</title>  
  6. <link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>  
  7. <script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>  
  8. <script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>  
  9. </head>   
  10. <body>  
  11. <div data-role="page" id="page1" data-fullscreen="true">  
  12.     <div data-role="content">  
  13.         <a href="#" data-role="button">链接按钮</a>  
  14.     </div>  
  15. </div>  
  16. </body>  
  17. </html>  

二、表单按钮

[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. <div data-role="page" id="page1" data-fullscreen="true">  
  2.     <div data-role="content">  
  3.         <a href="#" data-role="button">链接按钮</a>  
  4.         <form>  
  5.             <input type="button" value="表单按钮"/>  
  6.             <button type="submit">提交按钮</button>  
  7.             <input type="submit" value="提交按钮"/>  
  8.             <input type="reset" value="重置按钮"/>  
  9.         </form>  
  10.     </div>  
  11. </div>  

三、图形按钮

[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. 图像按钮1:  
  2. <input type="image" src="jquery-mobile/images/icon.png" data-role="none"/>  
  3. 图像按钮2：  
  4. <a href="#"><img src="jquery-mobile/images/icon.png"></a>  

四、带图标的按钮

[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1.     <input type="button" value="带图标的按钮" data-icon="delete"/>  
  2. <input type="button"  data-icon="delete" data-iconpos="notext"/>  
  3. <input type="button"  data-icon="alert" data-iconpos="notext"/>  
  4.     <input type="button"  data-icon="arrow-d" data-iconpos="notext"/>  
  5.     <input type="button"  data-icon="arrow-l" data-iconpos="notext"/>  
  6.     <input type="button"  data-icon="arrow-r" data-iconpos="notext"/>  
  7.     <input type="button"  data-icon="arrow-u" data-iconpos="notext"/>  
  8.     <input type="button"  data-icon="back" data-iconpos="notext"/>  
  9.     <input type="button"  data-icon="check" data-iconpos="notext"/>  
  10.     <input type="button"  data-icon="custom" data-iconpos="notext"/>  
  11.     <input type="button"  data-icon="forward" data-iconpos="notext"/>  
  12.     <input type="button"  data-icon="gear" data-iconpos="notext"/>  
  13.     <input type="button"  data-icon="grid" data-iconpos="notext"/>  
  14.     <input type="button"  data-icon="home" data-iconpos="notext"/>  
  15.     <input type="button"  data-icon="info" data-iconpos="notext"/>  
  16.     <input type="button"  data-icon="minus" data-iconpos="notext"/>  
  17.     <input type="button"  data-icon="plus" data-iconpos="notext"/>  
  18.     <input type="button"  data-icon="refresh" data-iconpos="notext"/>  
  19.     <input type="button"  data-icon="search" data-iconpos="notext"/>  
  20.     <input type="button"  data-icon="star" data-iconpos="notext"/>  

五、按钮定位

[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. <a href="#" data-role="button" data-icon="arrow-u" data-iconpos="top">top</a>  
  2. <a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">left</a>  
  3. <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>  
  4. <a href="#" data-role="button" data-icon="arrow-d" data-iconpos="bottom">bottom</a>  

六、自定义图标按钮

[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. <a href="#" data-role="button" data-icon="custom_icon">自定义图标</a>  
[css]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. .ui-icon-custom_icon{  
  2.     background:url(jquery-mobile/images/icon.png) 50% 50% no-repeat;  
  3.     background-size:14px 14px;  
  4. }  
注意：属性命名规则“.ui-icon-<data-icon-value>,如上面的.ui-icon-custom_icon



七、分组按钮

[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. <div data-role="controlgroup" data-type="horizontal" align="center" class="segment-control">  
  2.     <a href="#" data-role="button" class="ui-control-active">菜单一</a>  
  3.     <a href="#" data-role="button" class="ui-control-inactive">菜单二</a>  
  4.     <a href="#" data-role="button" class="ui-control-inactive">菜单三</a>  
  5. </div>  

八、主题按钮

[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. <a href="#" data-role="button" data-theme="a">A</a>  
  2. <a href="#" data-role="button" data-theme="b">B</a>  
  3. <a href="#" data-role="button" data-theme="c">C</a>  
  4. <a href="#" data-role="button" data-theme="d">D</a>  
  5. <a href="#" data-role="button" data-theme="e">E</a>  
  6. <a href="#" data-role="button" data-theme="f">F</a>  

九、动态按钮

[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. <script type="text/javascript">  
  2.     $('<a href="#" data-role="button" data-icon="star" id="b1">动态按钮</a>').appendTo("#content").button();  
  3.     $('<a href="#" data-role="button" data-icon="delete" id="b2">动态按钮</a>').insertAfter("#b1").button();  
  4. </script>  
还有一种json方式的

[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. $('<a href="#">动态按钮</a>').insertAfter("#a1").button({  
  2.         'icon':'home',  
  3.         'inline':true,  
  4.         'shadow':true,  
  5.         'theme':'b'  
  6.     });  
上面两种方式都用到了button()插件，button插件具有如下选项：

corners  boolean

icon string

iconpos string

iconshadow boolean

initSelector  css selector string

inline boolean

shadow boolean

button插件有如下两个方法：

$("#button1").button("enable");

$("#button2").button("disable");

全部代码如下：

[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>   
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>jQuery Mobile Web 应用程序</title>  
  6. <link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>  
  7. <script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>  
  8. <script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>  
  9. <style type="text/css">  
  10. .ui-icon-custom_icon{  
  11.     background:url(jquery-mobile/images/icon.png) 50% 50% no-repeat;  
  12.     background-size:14px 14px;  
  13. }  
  14. </style>  
  15. </head>   
  16. <body>  
  17. <div data-role="page" id="page1" data-fullscreen="true">  
  18.     <div data-role="content" class="content" id="content">  
  19.         <a href="#" data-role="button">链接按钮</a>  
  20.         <form>  
  21.             <input type="button" value="表单按钮"/>  
  22.             <button type="submit">提交按钮</button>  
  23.             <input type="submit" value="提交按钮"/>  
  24.             <input type="reset" value="重置按钮"/>  
  25.             图像按钮1:  
  26.             <input type="image" src="jquery-mobile/images/icon.png" data-role="none"/>  
  27.             图像按钮2：  
  28.             <a href="#"><img src="jquery-mobile/images/icon.png"></a>  
  29.               
  30.             <input type="button" value="带图标的按钮" data-icon="delete"/>  
  31.             <input type="button"  data-icon="delete" data-iconpos="notext"/>  
  32.             <input type="button"  data-icon="alert" data-iconpos="notext"/>  
  33.             <input type="button"  data-icon="arrow-d" data-iconpos="notext"/>  
  34.             <input type="button"  data-icon="arrow-l" data-iconpos="notext"/>  
  35.             <input type="button"  data-icon="arrow-r" data-iconpos="notext"/>  
  36.             <input type="button"  data-icon="arrow-u" data-iconpos="notext"/>  
  37.             <input type="button"  data-icon="back" data-iconpos="notext"/>  
  38.             <input type="button"  data-icon="check" data-iconpos="notext"/>  
  39.             <input type="button"  data-icon="custom" data-iconpos="notext"/>  
  40.             <input type="button"  data-icon="forward" data-iconpos="notext"/>  
  41.             <input type="button"  data-icon="gear" data-iconpos="notext"/>  
  42.             <input type="button"  data-icon="grid" data-iconpos="notext"/>  
  43.             <input type="button"  data-icon="home" data-iconpos="notext"/>  
  44.             <input type="button"  data-icon="info" data-iconpos="notext"/>  
  45.             <input type="button"  data-icon="minus" data-iconpos="notext"/>  
  46.             <input type="button"  data-icon="plus" data-iconpos="notext"/>  
  47.             <input type="button"  data-icon="refresh" data-iconpos="notext"/>  
  48.             <input type="button"  data-icon="search" data-iconpos="notext"/>  
  49.             <input type="button"  data-icon="star" data-iconpos="notext"/>  
  50.               
  51.             <a href="#" data-role="button" data-icon="arrow-u" data-iconpos="top">top</a>  
  52.             <a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">left</a>  
  53.             <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>  
  54.             <a href="#" data-role="button" data-icon="arrow-d" data-iconpos="bottom">bottom</a>  
  55.               
  56.             <a href="#" data-role="button" data-icon="custom_icon">自定义图标</a>  
  57.               
  58.             <a href="#" data-role="button" data-theme="a">A</a>  
  59.             <a href="#" data-role="button" data-theme="b">B</a>  
  60.             <a href="#" data-role="button" data-theme="c">C</a>  
  61.             <a href="#" data-role="button" data-theme="d">D</a>  
  62.             <a href="#" data-role="button" data-theme="e" id="a1">E</a>  
  63.             <a href="#" data-role="button" data-theme="f" id="b1">F</a>  
  64.         </form>  
  65.     </div>  
  66. </div>  
  67. </body>  
  68. <script type="text/javascript">  
  69.     $('<a href="#" data-role="button" data-icon="star" id="b1">动态按钮</a>').appendTo("#content").button();  
  70.     $('<a href="#" data-role="button" data-icon="delete" id="b2">动态按钮</a>').insertAfter("#b1").button();  
  71.     $('<a href="#">动态按钮</a>').insertAfter("#a1").button({  
  72.             'icon':'home',  
  73.             'inline':true,  
  74.             'shadow':true,  
  75.             'theme':'b'  
  76.         });  
  77. </script>  
  78. </html>  
小小IT人
关注
小强的HTML5移动开发之路（47）——jquery mobile基本的页面框架
水寒
04-15 5088
一、单容器页面结构 Jquery mobile 基本页面框架 标题 内容部分 页脚 说明：设置浏览器的缩放宽度与等级，可以使页面的宽度与移动设备的屏幕宽度相同。二、多容器页面结构 Jquery mob
div 居中（html5+jquery.mobile）
xueshenghu的专栏
08-07 3932
如何使用CSS让DIV居中显示，让div水平居中有哪些CSS样式呢？ 需要的主要css代码有两个，一个为text-align:center（内容居中），另外一个为margin:0 auto；其两个样式需要配合使用才能实现div盒子的居中显示排版。  response.setHeader("Cache-Control", "no-store");  response.setHe
超炫酷的jQuery/HTML5应用搜罗
前端琅琊阁
07-17 1474
作为前端开发者，我们肯定都使用过非常多的jQuery插件，毋庸置疑，jQuery非常流行，尤其是结合HTML5和CSS3以后，让这些jQuery插件有了更多地动画效果，更为绚丽多彩。下面分享了一些超炫酷的jQuery/HTML5应用，一起来看看。 1、HTML5/CSS3一组可爱的3D按钮 这是一款利用HTML5和CSS3制作而成的按钮组合，这款CSS按钮非常具有个性化。该CSS3按钮不仅具有
小强的HTML5移动开发之路（43）——JqueryMobile页眉、工具栏和标签栏导航
水寒
04-08 5209
一、页眉1、添加页眉 默认的页眉在屏幕的顶部边缘显示，而且在在屏幕滚动时，页眉会滑出屏幕之外，通过添加data-position属性可以创建一个固定的页眉 可以使用date-theme属性来调整页眉的主题，默认主题是黑色data-theme="a"
小强的HTML5移动开发之路
前端琅琊阁
08-18 2362
共计53篇，diyip http://blog.csdn.net/dawanganban/article/details/17591373
小强的HTML5移动开发之路（33）—— jqMobi基础
水寒
01-17 7264
一、什么是jqMobi jqMobi是由appMobi针对HTML5浏览器和移动设备开发的javascript框架，是个极快速的查询选择库，支持W3C查询。 版本 jqMobi源码最初在2012年1月份推出，基于MIT/X11许可证，托管在GitHub上，开发者可参与并通过插件不断改进该框架。 2012年3月13日，jqMobi 1.0版本正式发布。现在最新的版本是jqMobi 2.0
切换夜间模式
rongbinjava的博客
07-21 7019
推酷 文章站点主题公开课活动客户端 荐 周刊  登录 Android 实现切换主题皮肤功能（类似于众多app中的 夜间模式，主题包等） 时间 2015-11-16 14:43:00  博客园精华区 原文  http://www.cnblogs.com/punkisnotdead/p/4968851.html 主题 安卓开发
他山之石，可以攻玉
梦里风林的专栏
03-23 5343
我的收藏 他山之石，可以攻玉 开发过程中收藏在Chrome书签栏里的技术文章，与自己的文章分开。主要涉及python，android，ubuntu等内容，我自己常常在这里面找回忘了的知识。
java知识体系介绍
热门推荐
bluesliusmile的博客
01-03 1万+
国内最牛七星级团队 马士兵、高淇等11位十年开发经验专家录制 目 录 百战程序员Java1573题 2 百战程序员介绍 3 JavaSE编程基础 9 第一章 初识Java 9 阶段项目课程1 11 第二章 数据类型和运算符 14 第三章 控制语句 17 第四章 数组 24 阶段项目课程2 27 第五章 面向对象 27 第六章 异常机制
HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站_陈婉凌.pdf
02-16
HTML5、CSS3和jQuery Mobile是现代Web开发中的三大核心技术，它们共同构建了丰富的、交互式的移动应用和网站。本书《HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站》由陈婉凌撰写，旨在帮助读者掌握这些技术，轻松...
HTML5+JQuery Mobile 移动端WebApp案例
11-02
HTML5和JQuery Mobile是构建移动WebApp的两个关键技术，它们共同为开发者提供了在移动设备上创建交互式、响应式的Web应用的能力。本实例通过一个金融系统的移动端页面演示了这两者的应用，旨在促进学习和理解。 ...
在c#的GridView中使用邮件链接的方法.zip
09-20
我们知道，在GridView中可以使用HyperLinkField生成一个超链接，但是这个超链接只能是普通的http的超链接， 如果想做一个邮件的链接（mailto:user@abc.com）似乎就不起作用了。通过模板列的方式实现
ASP网上军事论坛的设计与实现(源代码+论文).zip
09-20
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 、4下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。、可私 6信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 、4下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。、可 6私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 、4下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。、可私 6信博主看论文后选择购买源代码。
网站与网页设计终版.zip(毕设&课设&实训&大作业&竞赛&项目)
09-20
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。
vue+SpringBoot493翻转课堂微视频管理系统java毕业设计源码含论文.rar
09-20
jdk版本:jdk1.8+ 前端：vue.js+ElementUI 开发工具：IDEA 或者eclipse都支持 编程语言: java 框架支持：springboot 数据库: mysql 版本不限 数据库工具：Navicat/SQLyog都可以 详细技术：java+springboot+vue+MYSQL+MAVEN 前端采用的Vue框架，后端采用java语言，sprinboot框架，mybatis操作数据源，使用软件：idea,eclipse、MySQL。完成了用户登录管理等模块的设计与实现。完成了系统数据库的设计，并基于MySQL数据库管理系统
八桂自然灾害数据库Web系统设计与实现源码(新).zip(毕设&课设&实训&大作业&竞赛&项目)
09-20
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。
西南科技大学java实验 7.doc
最新发布
09-20
西南科技大学java实验 7.doc
HTML5实战：记事本应用开发教程——jQuery Mobile与localStorage
在HTML5 APP项目开发中，jQuery Mobile是一个强大的框架，用于构建响应式和触摸优化的移动应用。本教程中，开发者会学习如何使用jQuery Mobile创建用户友好的界面，同时利用localStorage对象在客户端存储数据，实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值