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

  • jQuery Mobile 教程:按钮
  • 怎样为Jquery Mobile的页面添加按钮图标
  • jQuery Mobile 教程:主题
  • jQuery Mobile教程: 网格
  • jQuery Mobile 教程:Button Checkbox属性
  • 热门搜索
    元勋的意思 释义是什么意思 意气风发的意思 家破人亡的意思 六畜指的是什么 秒杀什么意思 learn是什么意思 托物言志的意思 金箔金命是什么意思 梦见数钱是什么意思