消除JQuery Mobile 列表样式右侧箭头
有时候我们看到JQM上面有一些呈现跟我们要的很像如下面这个Listview效果
程序代码如下:
1.
<
ul
data-role
=
"listview"
data-inset
=
"true"
>
2.
<
li
><
a
href
=
"#"
><
img
src
=
"../../_assets/img/gf.png"
alt
=
"France"
class
=
"ui-li-icon ui-corner-none"
>France</
a
></
li
>
3.
<
li
><
a
href
=
"#"
><
img
src
=
"../../_assets/img/de.png"
alt
=
"Germany"
class
=
"ui-li-icon"
>Germany</
a
></
li
>
4.
<
li
><
a
href
=
"#"
><
img
src
=
"../../_assets/img/gb.png"
alt
=
"Great Britain"
class
=
"ui-li-icon"
>Great Britain</
a
></
li
>
5.
<
li
><
a
href
=
"#"
><
img
src
=
"../../_assets/img/fi.png"
alt
=
"Finland"
class
=
"ui-li-icon"
>Finland</
a
></
li
>
6.
<
li
><
a
href
=
"#"
><
img
src
=
"../../_assets/img/us.png"
alt
=
"United States"
class
=
"ui-li-icon ui-corner-none"
>United States</
a
></
li
>
7.
</
ul
>
如果我们今天想把国旗的大小放大到30*30的大小,可以直接在各img内加入;
CSS如下:
1.
.customize-ul-li-
icon
{
2.
max-height
:
30px
!important
;
3.
max-width
:
30px
!important
;
4.
top
:
6px
!important
;
5.
left
:
6px
!important
;
6.
}
程序代码如下:
1.
<
ul
data-role
=
"listview"
data-inset
=
"true"
>
2.
<
li
><
a
href
=
"#"
><
img
src
=
"http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-bb.jpg"
alt
=
"France"
class
=
"ui-li-icon ui-corner-none customize-ul-li-icon"
>Broken Bells</
a
></
li
>
3.
<
li
><
a
href
=
"#"
><
img
src
=
"http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-hc.jpg"
alt
=
"Germany"
class
=
"ui-li-icon customize-ul-li-icon"
>Warning</
a
></
li
>
4.
<
li
><
a
href
=
"#"
><
img
src
=
"http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-p.jpg"
alt
=
"Great Britain"
class
=
"ui-li-icon customize-ul-li-icon"
>Phoenix</
a
></
li
>
5.
</
ul
>
透过CSS的方式可以让我们去修改呈现的结果,在有些情况如果不使用!important可能会让你的呈现被预设的JQM效果盖过去,这边建议你最好在你要加入的样式加上这个设定确保他有较高的优先套用权。如此一来就可以强迫他做修改搂~ www.it165.net
另外,这边在教大家如何取消Listview预设的右方箭头,其实只要在li上加上data-icon="false"即可
程序代码如下:
1.
<
ul
data-role
=
"listview"
data-inset
=
"true"
>
2.
<
li
data-icon
=
"false"
><
a
href
=
"#"
><
img
src
=
"http://view.jquerymobile.com/1.3.0/docs/_assets/img/gf.png"
alt
=
"France"
class
=
"ui-li-icon ui-corner-none"
>France</
a
></
li
>
3.
<
li
data-icon
=
"false"
><
a
href
=
"#"
><
img
src
=
"http://view.jquerymobile.com/1.3.0/docs/_assets/img/de.png"
alt
=
"Germany"
class
=
"ui-li-icon"
>Germany</
a
></
li
>
4.
<
li
data-icon
=
"false"
><
a
href
=
"#"
><
img
src
=
"http://view.jquerymobile.com/1.3.0/docs/_assets/img/gb.png"
alt
=
"Great Britain"
class
=
"ui-li-icon"
>Great Britain</
a
></
li
>
5.
<
li
data-icon
=
"false"
><
a
href
=
"#"
><
img
src
=
"http://view.jquerymobile.com/1.3.0/docs/_assets/img/fi.png"
alt
=
"Finland"
class
=
"ui-li-icon"
>Finland</
a
></
li
>
6.
<
li
data-icon
=
"false"
><
a
href
=
"#"
><
img
src
=
"http://view.jquerymobile.com/1.3.0/docs/_assets/img/us.png"
alt
=
"United States"
class
=
"ui-li-icon ui-corner-none"
>United States</
a
></
li
>
7.
</
ul
>
消除JQuery Mobile 列表样式右侧箭头的更多相关文章
- jQuery Mobile 列表内容
jQuery Mobile 列表缩略图 对于大于 16x16px 的图像,请在链接中添加 <img> 元素. jQuery Mobile 将自动把图像调整至 80x80px: 实例: &l ...
- jQuery Mobile 列表视图(带有自动检索)
输入a: 输入b: jQuery Mobile 列表视图 jQuery Mobile 中的列表视图是标准的 HTML 列表:有序列表 (<ol>) 和无序列表 (<ul>). ...
- (五)Jquery Mobile列表
Jquery Mobile列表 一.JM列表 1.普通列表 效果: 带序号的列表 将ul换成ol 效果: 2.data-inset=& ...
- Jquery Mobile列表
向 <ol> 或 <ul> 元素添加 data-role="listview" 1.圆角和外边距 :data-inset="true" ...
- Jquery mobile中用Jquery的append()追加的内容没有Jquery mobile的样式
Jquery Mobile 动态添加块之后, 样式不是JM内定的样式,解决方案如下: $('#content').append(html).enhanceWithin();//Jquery Mobil ...
- 主攻ASP.NET MVC4.0之重生:Jquery Mobile 列表
代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...
- jquery mobile button样式设置
<a href="#" class="ui-btn">提交</a> ui-btn表示按钮样式 ui-btn-a,ui-btn-b:the ...
- 移除\禁用 jquery mobile 元素样式渲染
在元素上加属性. data-role="none"
- 取消Jquery mobile自动省略的文本
在使用jquery moblie做移动客户端app时,listview控件下的列表文本不能完全显示,只能显示一行,超过字数jquery mobile会自动用省略号代替.很是纠结啊. 最后在一个岛国网站 ...
随机推荐
- Android开发——异步任务中Activity销毁时的问题
0. 前言 在Android开发中经常会发生Activity的销毁重建,比如用户长时间接听一个电话后回到APP.在Android开发--Fragment知识整理(二)中我们提到了使用Fragment ...
- 记录 第一次体验安装python第三方库的全过程
目的:安装 Pillow库 现状是:python是3.4,easy_install没有安装:pip没有安装, 步骤: 1.安装Pillow库需要安装pip 2.安装pip需要安装easy_instal ...
- IP 解析器(IpParser) test 和 生产环境 实现
注意:之前我maven居然没有引入 StringUtils 的包,然后引入了一个路径类似,但其实包路径不一样的 StringUtils ,居然是划掉的状态,像这样 StringUtils ,这个其实不 ...
- java 自定义异常输出信息(使用构造器)
throw new Exception("上传的脚本类型不匹配,当前只支持类unix系列的远程扫描,请上传后缀名为 .sh .pl 的脚本文件"); 这样就可以了,结合配置的异常信 ...
- Solr 后台查询实例 (工作备查)
有时间再进行整理package xxx.service.impl; import java.util.HashMap; import java.util.Map; import java.util.M ...
- python之GIL理解
GIL(Global Interpreter Lock) 全局解释器锁 python3中是假的多线程,它不是真正的并行,是利用了cpu上下文的切换而已.同一时间只能有一个线程使用共享数据,其它线程处于 ...
- Leetcode题库——40.组合总和II
@author: ZZQ @software: PyCharm @file: combinationSum2.py @time: 2018/11/15 18:38 要求:给定一个数组 candidat ...
- 团队项目作业五 - 旅游行业App分析
随着经济的发展,不论是在工作中的男女老少,还是在校园中的童鞋,都喜欢在假期来一场说走就走的旅行,来缓解生活中的各种压力.当然,在国家面临经济转型的情况下,更多的将工业,农业转向服务型的旅游业,各个省市 ...
- nodemoduleOfCheerio
https://www.npmjs.com/package/cheerio 这是npm的api说明 英文好的同学可以去看看. cheerioAPI 是一个用来操作jsDOM的模块: 就像jQuery一 ...
- 小程序开发 绑定自定义数据data- 及JS获取
1wxml<!-- 茶系显示隐藏函数sectionSelect --><view class="img-fur" data-id="{{item.id} ...