刚接触Jquery Mobile框架,遇到个很现实问题,就是如何自定义按钮图标,我觉得jquery mobile 自带的图标实在是太少了,另外我觉得图标也偏小(系统自带的应该是18*18的)下面是我的方法,希望大家踊跃拍砖。
1、第一种方法是比较简单的,但是有前提,前提就是你自定义的图标大小应该和系统内置的保持一致,这样排版上才不会出问题,具体方法如下:
首先定义css文件
.ui-icon-email{ background:url('./images/email.png') no-repeat 0px 0px; }
然后应用
data-icon="email"
就可以了。
2、第二种方法,这种方法适合自定义图标大小和系统不一致的情况,闲话不说了,先上效果图,
3、代码如下:
【css代码】
/** 图标大小 **/ .user-ui-btn .ui-icon{ width:36px; height:36px; } /** 设置字体大小,由于图标变大,所以文字适当的调大一些 **/ .user-ui-btn .ui-btn-text{ line-height:36px; font-size:20px; } /** 无文字按钮 **/ .user-ui-btn .ui-btn-icon-notext{ width:42px; height:42px; webkit-border-radius: 2em; border-radius: 2em; } /** 图标左边 **/ .user-ui-btn .ui-btn-icon-left .ui-btn-inner { padding-left: 50px; } .user-ui-btn .ui-btn-icon-left .ui-icon{ left:10px; margin-top: -18px; } /** 图标在右边 **/ .user-ui-btn .ui-btn-icon-right .ui-btn-inner { padding-right: 50px; } .user-ui-btn .ui-btn-icon-right .ui-icon{ right:10px; margin-top: -18px; } /** 图标在上边 **/ .user-ui-btn .ui-btn-icon-top .ui-btn-inner { padding-top: 50px; } .user-ui-btn .ui-btn-icon-top .ui-icon{ top:10px; margin-left: -18px; } /** 图标在下边 **/ .user-ui-btn .ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 50px; } .user-ui-btn .ui-btn-icon-bottom .ui-icon{ bottom:10px; margin-left: -18px; } /** 定义自己的图标 **/ .user-ui-btn .ui-icon-demo1{ background:url('./images/gentleface_full.png') no-repeat -108px 0px; } .user-ui-btn .ui-icon-demo2{ background:url('./images/gentleface_full.png') no-repeat -180px -180px; } .user-ui-btn .ui-icon-demo3{ background:url('./images/gentleface_full.png') no-repeat -252px -360px; } .user-ui-btn .ui-icon-demo4{ background:url('./images/gentleface_full.png') no-repeat -36px -180px; } .user-ui-btn .ui-icon-demo5{ background:url('./images/gentleface_full.png') no-repeat -504px -612px; }
【html代码】
<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.3.2.css" /> <script src="js/jquery.js"></script> <script src="js/jquery.mobile-1.3.2.js"></script> <link rel="stylesheet" type="text/css" href="js/demo.mobile-1.0.css" /> </head> <body> <div data-role="page" id="page"> <div data-role="header"> <h1>Jquery Mobile自定义按钮</h1> </div> <div data-role="content"> <h2>原版样式举例</h2> <div> <a href="#" data-role="button" data-icon="home" data-inline="true" data-iconpos="left">DEMO</a> <a href="#" data-role="button" data-icon="home" data-inline="true" data-iconpos="top">DEMO</a> <a href="#" data-role="button" data-icon="home" data-inline="true" data-iconpos="right">DEMO</a> <a href="#" data-role="button" data-icon="home" data-inline="true" data-iconpos="bottom">DEMO</a> <a href="#" data-role="button" data-icon="home" data-inline="true" data-iconpos="notext">DEMO</a> </div> <h2>自定义样式举例</h2> <h3>1)普通按钮</h3> <div class="user-ui-btn"> <a class="user-ui-btn" href="#" data-role="button" data-icon="demo1" data-inline="true" data-iconpos="left">DEMO</a> <a class="user-ui-btn" href="#" data-role="button" data-icon="demo2" data-inline="true" data-iconpos="top">DEMO</a> <a class="user-ui-btn" href="#" data-role="button" data-icon="demo3" data-inline="true" data-iconpos="right">DEMO</a> <a class="user-ui-btn" href="#" data-role="button" data-icon="demo4" data-inline="true" data-iconpos="bottom">DEMO</a> <a class="user-ui-btn" href="#" data-role="button" data-icon="demo5" data-inline="true" data-iconpos="notext">DEMO</a> </div> <h3>2)按钮组</h3> <div class="user-ui-btn" data-role="controlgroup" data-type="horizontal"> <a data-role="button" data-icon="demo1" data-iconpos="top">js</a> <a data-role="button" data-icon="demo2" data-iconpos="top">css</a> <a data-role="button" data-icon="demo3" data-iconpos="top">html</a> <a data-role="button" data-icon="demo4" data-iconpos="top">ps</a> </div> <div class="user-ui-btn" data-role="controlgroup"> <a data-role="button" data-icon="demo1" data-iconpos="top">js</a> <a data-role="button" data-icon="demo2" data-iconpos="top">css</a> <a data-role="button" data-icon="demo3" data-iconpos="top">html</a> <a data-role="button" data-icon="demo4" data-iconpos="top">ps</a> </div> <h3>3)原始icon</h3> <img src="./js/images/gentleface_full.png" alt="原始icon" border=0 width=612 height=648> </div> <div data-role="footer"> <h4>Copyright by lining</h4> </div> </div> </body> </html>
相关推荐
**jQuery Mobile 指南:开发背景与按钮小图标资源** 在移动应用和网页开发中,用户界面的设计和用户体验是至关重要的。jQuery Mobile 是一个强大的前端框架,它为创建响应式、触摸友好的移动Web应用提供了便利。这...
jQuery Mobile开发的移动新闻阅读器,HTML5技术配合jQuery MobilejQuery Mobile jqm 新闻阅读器 jqm图标更换 jQuery Mobile jqm 新闻阅读器 jqm自定义按钮的图片以及header和footer的定位
**jQuery Mobile 设计详解** jQuery Mobile 是一个轻量级、响应式的前端框架,专为触摸设备的网页设计和开发而构建。它简化了创建移动友好的网页应用的过程,提供了丰富的组件和交互效果,使得开发者可以快速构建...
- **图标与字体**:支持图标和字体的自定义,提高应用的个性化程度。 #### 五、示例代码与实践技巧 - **HTML 结构**:合理规划页面结构是成功使用 jQuery Mobile 的关键。 - **CSS 样式**:了解和调整 CSS 样式有...
在压缩包中的`jquery.tzCheckbox`文件可能是作者自定义的一个扩展或插件,它可能提供了额外的功能或改进,如更丰富的样式、动画效果、自定义事件等。使用这样的扩展时,需要按照作者提供的说明进行引入和配置。 ...
在上面的代码中,我们添加了两个按钮:一个是返回按钮,使用内置的"ui-icon-carat-l"图标;另一个是滑动过渡到"page2"的链接。 ### 设置滑动过渡效果 jQuery Mobile提供了多种页面过渡效果,如滑动(slide)、淡入...
4.1.7 带有自定义图标的按钮 4.1.8 分组按钮 4.1.9 主题按钮 4.1.10 动态按钮 4.2 表单元素 4.2.1 表单基础知识 4.2.2 文本输入 4.2.3 选择菜单 4.2.4 单选按钮 4.2.5 复选框 4.2.6...
1. **统一的用户界面 (UI):** jQuery Mobile 提供了一系列预定义的主题和组件,如按钮、表单、面板、滑块等,确保在各种设备上有一致的视觉体验。 2. **触控优化:** 该框架特别关注移动设备的触控事件,确保滑动、...
3. `jquery.mobile.inline-svg-1.4.5.css` 和 `jquery.mobile.inline-png-1.4.5.css`:分别用于内联SVG和PNG图标的样式定义。 4. `jquery.mobile.structure-1.4.5.css`:基础结构样式,负责布局和组件的基本外观。 ...
3. **主题(Theming)**:jQuery Mobile 提供了一套可自定义的主题系统,允许开发者通过更改主题颜色(如 swatch A、B、C等)轻松调整 UI 风格。 ### 二、基本组件 1. **按钮(Buttons)**:使用 `data-role=...
3. **可自定义主题**:jQuery Mobile 提供了一套主题系统,通过`data-theme`属性可以改变组件的视觉样式。 4. **事件处理**:针对触摸设备,jQuery Mobile 引入了`vclick`、`swipe`等事件,替代了桌面环境中的`...
jQuery Mobile允许开发者自定义主题,而“iOS-Inspired-jQuery-Mobile-Theme”就是一种模仿iOS风格的主题。这个主题包含了一系列CSS样式和图标,用于模拟苹果设备的视觉元素,如圆角、阴影、滑块、按钮等,使应用在...
2. 数据属性:jQuery Mobile提供了一系列的数据属性(data-attributes),如`data-theme`用于设置主题色,`data-icon`用于设定图标,`data-inline`使按钮显示为行内样式等。通过在HTML标签中添加这些数据属性,可以...
在jQuery Mobile中,图片通常会被用作按钮、图标或者UI元素的装饰,通过CSS进行样式化。 总而言之,jqmDemo是一个全面的jQuery Mobile实践案例库,涵盖了从基础布局到复杂组件的各种应用场景。通过学习和研究这些...
例如,你可以通过`data-theme`设置颜色主题,通过`data-icon`添加图标到按钮,通过`data-mini`创建小型化的按钮等。此外,还可以通过JavaScript动态创建和控制提示框,例如: ```javascript $("#myDialog")....
在jQuery Mobile项目中,`css`子目录存放主题样式,`js`子目录存储jQuery和jQuery Mobile的库文件,`img`子目录则包含图标和其他图形资源。正确引用这些文件,能使界面呈现一致且美观的效果。 总的来说,jQuery ...
通过添加`data-iconpos="none"`去除默认图标,以及使用`<div class="ui-li-thumb">`包裹缩略图,我们可以创建自定义的列表项样式。 6. **点击事件处理** jQuery Mobile通过`vclick`事件处理触摸和鼠标点击,提供...
**jQuery Mobile 框架详解** jQuery Mobile 是一个流行的前端框架,专为移动设备上的Web应用程序设计,尤其适合HTML5技术的开发。它提供了一套完整的UI组件、交互效果和优化策略,使得开发者能够轻松创建功能丰富的...