草庐IT

jQuery Mobile 图标

runoob 2023-04-07 原文

jQuery Mobile 图标

我们可以使用图标类在 jQuery Mobile 中 <a> 和 <button> 元素上添加图标,并对图标进行定位,如下所示:


<a href="#anylink" class="ui-btn ui-icon-refresh ui-btn-icon-left">刷新页面</a> 尝试一下

<button class="ui-btn ui-icon-refresh ui-btn-icon-left">刷新页面</button> 尝试一下

在 <input> 按钮中添加图标,可以使用 data-icon 属性:


<a href="#anylink" data-icon="refresh">刷新页面</a> 尝试一下

我们可以使用 data-icon 属性在导航按钮上添加图标:


<a href="#anylink" data-icon="refresh">刷新页面</a> 尝试一下

如果要在列表按钮中添加图标,可以在 <li> 中使用 data-icon 属性:


<li data-icon="refresh"><a href="#">点我</a></li> 尝试一下

下面我们列出了 jQuery Mobile 提供的所有可用图标:

描述 图标 实例
action 动作 尝试一下
alert 警告 尝试一下
audio 视频 / 音频 / 扬声器 尝试一下
arrow-d-l 左下角 尝试一下
arrow-d-r 右下角 尝试一下
arrow-u-l 左上角 尝试一下
arrow-u-r 右上角 尝试一下
arrow-l 左箭头 尝试一下
arrow-r 右箭头 尝试一下
arrow-u 上箭头 尝试一下
arrow-d 下箭头 尝试一下
back 返回 尝试一下
bars 栏目 尝试一下
bullets 栅栏 尝试一下
calendar 日历 尝试一下
camera 照相机 尝试一下
carat-d 向下 尝试一下
carat-l 向左 尝试一下
carat-r 向右 尝试一下
carat-u 向上 尝试一下
check 验证标记 尝试一下
clock 时钟 尝试一下
cloud 尝试一下
comment 评论 尝试一下
delete 删除 (X) 尝试一下
edit 编辑 / 铅笔 尝试一下
eye 眼睛 尝试一下
forbidden 禁止标记 尝试一下
forward 前进 尝试一下
gear 齿轮 尝试一下
grid 网格 尝试一下
heart 心 / 爱 标志 尝试一下
home 家(主页) 尝试一下
info 信息 尝试一下
location 定位 / GPS 尝试一下
lock 锁 / 挂锁 尝试一下
mail 邮件 / 信封 尝试一下
minus 符号、减号 尝试一下
navigation 导航 尝试一下
phone 电话 尝试一下
power 开关 (On/off) 尝试一下
plus 加号 尝试一下
recycle 回收 尝试一下
refresh 刷新 尝试一下
search 搜索 尝试一下
shop 商店、钱包、手提袋 尝试一下
star 星号 尝试一下
tag 标签 尝试一下
user 用户 尝试一下
video 摄像机 尝试一下

有关jQuery Mobile 图标的更多相关文章

  1. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下,分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  2. ruby-on-rails - 如何检索网站图标? - 2

    我正在使用RubyonRailsv3.0.9,我想检索我设置了链接的每个网站的favicon.ico图像。也就是说,如果在我的应用程序中我设置了http://www.facebook.com/URL,我想检索Facebook的图标并在我的网页中使用\插入它。当然,我也想为所有其他网站这样做。如何以“自动”方式从网站检索favicon.ico图标(“自动”是指在网站中搜索图标并获取它的链接-我认为不是,因为并非所有网站都有一个名为“favicon.ico”的图标。我想以“自动”方式识别它)?P.S.:我想做的是像Facebook在您的Facebook页面中添加链接\URL时所做的那样:它

  3. ruby-on-rails - 将 Bootstrap 图标添加到 Ruby on Rails 中的按钮 - 2

    我想在RubyonRails中为按钮添加图标。目前我尝试了以下方法:"),{:controller=>'events',:action=>"upvoteEvent",:method=>"put",:id=>@event.id,:uid=>current_user.id},{:class=>"btnbtn-success"}%>生成以下html:"/>我遵循了此处发布的解决方案:https://stackoverflow.com/a/10468935/1385324,但这对我不起作用。我还测试了BootstrapCSS是否正常工作,只需在网站的其他任何地方插入一个图标即可。感谢您的帮助!

  4. ruby - OS X 中作为守护进程运行的脚本的菜单栏图标? - 2

    我有一个ruby​​脚本(https://github.com/daemonza/MacBak)作为守护进程在我的macbook上运行并监视一堆目录的文件更改和rsync发生的任何更改。我想知道我能否让它在顶部的菜单栏中创建一个图标?只是为了让我知道它确实在运行,而不必使用ps检查它。也许以后如果需要的话,我可能希望能够从那里控制脚本,简单的带有停止和状态条目的下拉菜单等。从ObjectC看来我可以调用NSStatusItem来获取图标,但我真的只是想通过我的Ruby脚本轻松地完成它。也许我可以做一些applescript调用? 最佳答案

  5. ruby-on-rails - 如何在 Ajax 请求处理期间显示动画图标 - Rails 3 - 2

    我正在尝试为每个ajax请求显示一个加载指示器,我在Rails3应用程序中工作。HTML:"loading-indicator",:style=>"display:none")%>CSS:#loading-indicator{position:absolute;left:10px;top:10px;}loading.js:我放在assest/javascripts/$(document).ready(function(){$(document).ajaxSend(function(event,request,settings){$('#loading-indicator').show(

  6. javascript - 当 Django Admin 弹出窗口(绿色加号图标)完成时,是否有事件或其他方式调用 Javascript 函数? - 2

    假设我们有那些Django模型:classBand(models.Model):name=models.CharField(max_length=256,default="EaglesofDeathMetal")classSong(models.Model):band=models.ForeignKey(Band)当使用admin管理这些模型时,band字段关联到由Django呈现为selecthtml元素的Widget。Django的管理员还在select旁边添加了一个绿色加号图标,单击它会打开一个弹出窗口,用户会在其中看到Form添加一个新的乐队。单击此弹出窗口中的save按钮时,

  7. javascript - 如何使用 Font Awesome 作为传单中的图标而不是标记 - 2

    在此代码中,我使用data[key].category来指示相关图标作为标记。但我想用超赞的字体图标替换它,使其在运行时轻量级,在某些地方可能会加载数十个图标作为标记varCofee=Leaflet.icon({iconUrl:'/img/Coffee.png',shadowUrl:'/img/pale-shadow.png',iconSize:[34,49],shadowSize:[49,49],iconAnchor:[5,62],shadowAnchor:[4,62],popupAnchor:[12,-30]});varStore=Leaflet.icon({iconUrl:'/i

  8. javascript - Raphael js 如何在每个站点包含多个图标?使用类而不是 ID - 2

    我如何在一个站点上包含来自Raphaël(http://raphaeljs.com/icons/)的多个图标?我还没有设法通过class="icon"包含它们,只是使用id="icon"。因为我的JavaScript不是很好,所以我在网上搜索但一无所获。我在博客上唯一找到的东西:bubble:"M16,5.333c-7.732,0-14,4.701-14,10.5c0,1.982,0.741,3.833,2.016,5.414L2,25.667l5.613-1.441c2.339,1.317,5.237,2.107,8.387,2.107c7.732,0,14-4.701,14-10.

  9. javascript - extjs4 动态更改操作列图标 - 2

    我正在使用getClass来呈现操作列中的图标。{xtype:'actioncolumn',id:'actionColumnGridUsers',width:30,hideable:false,items:['->',{getClass:function(v,meta,rec){if(rec.get('nameUser')!='')return'icon-edit';elsereturn'icon-add';}}}CSS代码:.icon-add{background-image:url("../images/add.png");}.icon-edit{background-image:

  10. java - 在保留箭头图标的同时动态设置 DisclosurePanel 的标题文本? - 2

    我想在DisclosurePanel的标题中设置文本,而不必重新构造默认标题使用的图像/图标。使用customHeader意味着箭头图标丢失,换句话说,这似乎是不合理的额外工作量。编辑:实际上有一个方法,getHeaderTextAccessor(String) 最佳答案 getHeaderTextAccessor(String) 关于java-在保留箭头图标的同时动态设置DisclosurePanel的标题文本?,我们在StackOverflow上找到一个类似的问题:

随机推荐