`
liningjustsoso
  • 浏览: 48344 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Jquery Mobile 自定义按钮图标

阅读更多

刚接触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>

 

  • 大小: 252.8 KB
0
0
分享到:
评论
1 楼 liningjustsoso 2013-12-17  
无文字的按钮稍作调整

/** 无文字按钮 **/
.user-ui-btn  .ui-btn-icon-notext{
  width:36px;
  height:36px;
  webkit-border-radius: 2em;
  border-radius: 2em;
  border:none;
  padding:12px 12px;
}

.user-ui-btn  .ui-btn-icon-notext .ui-btn-inner{
  webkit-border-radius: 0;
  border-radius: 0;
}

.user-ui-btn  .ui-btn-icon-notext .ui-icon{
  margin:0px 0px;
}

相关推荐

    JqueryMobile 开发背景按钮小图标资源

    **jQuery Mobile 指南:开发背景与按钮小图标资源** 在移动应用和网页开发中,用户界面的设计和用户体验是至关重要的。jQuery Mobile 是一个强大的前端框架,它为创建响应式、触摸友好的移动Web应用提供了便利。这...

    jQuery Mobile开发的移动新闻阅读器,HTML5技术配合jQuery Mobile

    jQuery Mobile开发的移动新闻阅读器,HTML5技术配合jQuery MobilejQuery Mobile jqm 新闻阅读器 jqm图标更换 jQuery Mobile jqm 新闻阅读器 jqm自定义按钮的图片以及header和footer的定位

    jquerymobile设计完整例子

    **jQuery Mobile 设计详解** jQuery Mobile 是一个轻量级、响应式的前端框架,专为触摸设备的网页设计和开发而构建。它简化了创建移动友好的网页应用的过程,提供了丰富的组件和交互效果,使得开发者可以快速构建...

    jQuery Mobile快速入门.pdf

    - **图标与字体**:支持图标和字体的自定义,提高应用的个性化程度。 #### 五、示例代码与实践技巧 - **HTML 结构**:合理规划页面结构是成功使用 jQuery Mobile 的关键。 - **CSS 样式**:了解和调整 CSS 样式有...

    jQuery mobile开关式按键

    在压缩包中的`jquery.tzCheckbox`文件可能是作者自定义的一个扩展或插件,它可能提供了额外的功能或改进,如更丰富的样式、动画效果、自定义事件等。使用这样的扩展时,需要按照作者提供的说明进行引入和配置。 ...

    jQuery mobile滑动式的标题导航

    在上面的代码中,我们添加了两个按钮:一个是返回按钮,使用内置的"ui-icon-carat-l"图标;另一个是滑动过渡到"page2"的链接。 ### 设置滑动过渡效果 jQuery Mobile提供了多种页面过渡效果,如滑动(slide)、淡入...

    jQuery Mobile快速入门245页完整版.pdf + 所有源码.7z

     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...

    jQuery Mobile 高级设计模板

    1. **统一的用户界面 (UI):** jQuery Mobile 提供了一系列预定义的主题和组件,如按钮、表单、面板、滑块等,确保在各种设备上有一致的视觉体验。 2. **触控优化:** 该框架特别关注移动设备的触控事件,确保滑动、...

    jquery mobile 1.4.5demo和说明

    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`:基础结构样式,负责布局和组件的基本外观。 ...

    jQuery mobile 开发案例

    3. **主题(Theming)**:jQuery Mobile 提供了一套可自定义的主题系统,允许开发者通过更改主题颜色(如 swatch A、B、C等)轻松调整 UI 风格。 ### 二、基本组件 1. **按钮(Buttons)**:使用 `data-role=...

    jqueryMobile入门练习项目

    3. **可自定义主题**:jQuery Mobile 提供了一套主题系统,通过`data-theme`属性可以改变组件的视觉样式。 4. **事件处理**:针对触摸设备,jQuery Mobile 引入了`vclick`、`swipe`等事件,替代了桌面环境中的`...

    基于Jquery Mobile的IOS主题

    jQuery Mobile允许开发者自定义主题,而“iOS-Inspired-jQuery-Mobile-Theme”就是一种模仿iOS风格的主题。这个主题包含了一系列CSS样式和图标,用于模拟苹果设备的视觉元素,如圆角、阴影、滑块、按钮等,使应用在...

    jquerymobile应用小实例

    2. 数据属性:jQuery Mobile提供了一系列的数据属性(data-attributes),如`data-theme`用于设置主题色,`data-icon`用于设定图标,`data-inline`使按钮显示为行内样式等。通过在HTML标签中添加这些数据属性,可以...

    jqmDemo,jQuery Mobile

    在jQuery Mobile中,图片通常会被用作按钮、图标或者UI元素的装饰,通过CSS进行样式化。 总而言之,jqmDemo是一个全面的jQuery Mobile实践案例库,涵盖了从基础布局到复杂组件的各种应用场景。通过学习和研究这些...

    JQUERYMOBILE 提示框

    例如,你可以通过`data-theme`设置颜色主题,通过`data-icon`添加图标到按钮,通过`data-mini`创建小型化的按钮等。此外,还可以通过JavaScript动态创建和控制提示框,例如: ```javascript $("#myDialog")....

    jquerymobile制作的各种漂亮界面源代码

    在jQuery Mobile项目中,`css`子目录存放主题样式,`js`子目录存储jQuery和jQuery Mobile的库文件,`img`子目录则包含图标和其他图形资源。正确引用这些文件,能使界面呈现一致且美观的效果。 总的来说,jQuery ...

    jquery mobile 相册源码

    通过添加`data-iconpos="none"`去除默认图标,以及使用`&lt;div class="ui-li-thumb"&gt;`包裹缩略图,我们可以创建自定义的列表项样式。 6. **点击事件处理** jQuery Mobile通过`vclick`事件处理触摸和鼠标点击,提供...

    jQuery Mobile 架包

    **jQuery Mobile 框架详解** jQuery Mobile 是一个流行的前端框架,专为移动设备上的Web应用程序设计,尤其适合HTML5技术的开发。它提供了一套完整的UI组件、交互效果和优化策略,使得开发者能够轻松创建功能丰富的...

Global site tag (gtag.js) - Google Analytics