怎样为Jquery Mobile的页面添加按钮图标

 时间:2026-02-16 10:42:07

1、我们要新建一个HTML5的页面,并在页面应用jquery mobile的css样式表,以及相应的js文件,还有就是将页面设置为屏幕自适应,然后保存页面。

怎样为Jquery Mobile的页面添加按钮图标

2、之后,我们就开始页面的制作了。我使用的是data-role="controlgroup"的标签组。

怎样为Jquery Mobile的页面添加按钮图标

3、默认情况下里面的按钮是垂直显示的,在浏览器中的效果是每个按钮占一行。

怎样为Jquery Mobile的页面添加按钮图标

4、我们为按钮添加图标,需要为其添加data-icon属性,属性值有近20种,分别代表了不同的图标样式。

怎样为Jquery Mobile的页面添加按钮图标

5、我暂且对这三个按钮应用三个不用的图标,在浏览器中查看一下效果。由于我没有具体的图片,我们只能看到几个圆点。

怎样为Jquery Mobile的页面添加按钮图标

6、我们还可以对图标的位置进行调整,我们使用data-iconpos属性来设置图标的位置,可以设置在左边还是右边,上边、下边。

怎样为Jquery Mobile的页面添加按钮图标

7、我暂且试了一下在上边下边和左边的效果,效果图如下所示。

怎样为Jquery Mobile的页面添加按钮图标

怎样为Jquery Mobile的页面添加按钮图标

  • DW8 PHP留言板(3)PHP语法
  • Dreamweaver怎样创建jQueryMobile页面
  • css中如何设置让鼠标经过文字左侧显示图片
  • 《Dreamweaver 8网页设计》:[24]网站内超链接
  • jquery中如何做到鼠标经过文字显示图片
  • 热门搜索
    什么是b2b 滑石的功效与作用 九年级上册数学知识点 桂皮的功效与作用 开宠物店需要什么 吉他什么牌子好 什么是鱼鳞病 早孕试纸什么时候用 比喻句的作用 生理盐水的作用