jQuery Mobile 教程:按钮图标

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

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 教程:按钮图标

© 2026 五度知识库
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com