jQuery Mobile 教程:按钮图标

 时间:2026-04-24 11:56:45

1、向按钮添加图标

 <a href="#" data-role="button" data-icon="arrow-l">左箭头图标</a>

    <a href="#" data-role="button" data-icon="arrow-r">右箭头图标</a>

    <a href="#" data-role="button" data-icon="arrow-u">上箭头图标</a>

    <a href="#" data-role="button" data-icon="arrow-d">下箭头图标</a>

    <a href="#" data-role="button" data-icon="plus">加号图标</a>

    <a href="#" data-role="button" data-icon="minus">减号图标</a>

    <a href="#" data-role="button" data-icon="delete">删除图标</a>

    <a href="#" data-role="button" data-icon="check">检查图标</a>

  

jQuery Mobile 教程:按钮图标

2、向按钮添加图标

  <a href="#" data-role="button" data-icon="home">首页图标</a>

    <a href="#" data-role="button" data-icon="info">信息图标</a>

    <a href="#" data-role="button" data-icon="back">后退图标</a>

    <a href="#" data-role="button" data-icon="forward">向前图标</a>

    <a href="#" data-role="button" data-icon="refresh">刷新图标</a>

    <a href="#" data-role="button" data-icon="grid">网格图标</a>

    <a href="#" data-role="button" data-icon="gear">齿轮图标</a>

   

jQuery Mobile 教程:按钮图标

3、向按钮添加图标

 <a href="#" data-role="button" data-icon="search">搜索图标</a>

    <a href="#" data-role="button" data-icon="star">星形图标</a>

    <a href="#" data-role="button" data-icon="alert">提醒图标</a>

jQuery Mobile 教程:按钮图标

4、定位图标

<a href="#link" data-role="button" data-icon="search" data-iconpos="top">Top</a>

    <a href="#link" data-role="button" data-icon="search" data-iconpos="right">Right</a>

    <a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">Bottom</a>

    <a href="#link" data-role="button" data-icon="search" data-iconpos="left">Left</a>

jQuery Mobile 教程:按钮图标

5、只显示图标

 <a href="#link" data-role="button" data-icon="search" data-iconpos="notext">Search</a>

jQuery Mobile 教程:按钮图标

  • jQuery Mobile 教程:按钮
  • 怎样为Jquery Mobile的页面添加按钮图标
  • jQuery Mobile 教程:主题
  • jQuery Mobile教程: 网格
  • jQuery Mobile 教程:Button Checkbox属性
  • 热门搜索
    什么是漆皮 致辞的意思 lot是什么意思 摩羯座男生喜欢什么样的女生 起死回生的意思 股票做空什么意思 ppc什么意思 乐此不彼的意思 五风十雨的意思 博大精深的意思