有时候我们看到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会自动用省略号代替.很是纠结啊. 最后在一个岛国网站 ...
随机推荐
-
哈希 poj 1480
计算可能的数目 a3*x3^3+a4*x4^3+a5*x5^5=-(a1*x1^3+a2*x2^3); 列举右边的 结果存到数组 z[i] 和为i的右边等式的数目 如果和小于0 +2500000 ...
-
正则表达式删除指定的HTML 标签
1.抓取某网页的数据后(比如描述),如果照原样显示的话,可能会因为它里面包含没有闭合的HTML标签而打乱了格式,也可能它里面用了比较让人 "费解" 的HTML标签,把预订的格式搅乱 ...
-
DWZ(JUI) 教程 左侧栏默认是关闭状态的问题
DWZ(JUI) 教程 左侧栏默认是关闭状态的问题,初始化是全屏状态,只需简单处理就可以了 $(function(){ DWZ.init("dwz.frag.xml", { log ...
-
UVa 10088 (Pick定理) Trees on My Island
这种1A的感觉真好 #include <cstdio> #include <vector> #include <cmath> using namespace std ...
-
Quartz Scheduler(2.2.1) - Integration with Spring
1. maven 依赖: <properties> <spring.version>3.2.3.RELEASE</spring.version> <quart ...
-
Dubbo入门实例 本地伪集群测试Demo
1. 概述 Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案 Dubbo是阿里巴巴SOA服务化治理方案的核心框架,每天为2,000+个服务提 ...
-
delphi edit 中undo 和clearundo 复制粘贴等总结
edit 和memo都有undo功能, Undo:恢复到改动前. ClearUndo:撤销掉Undo缓冲区的内容,则将无法恢复到改动前的 从该文本框的撤销缓冲区中清除关于最近操作的信息,根据应用 程序 ...
-
Discuz教程:X3.1-x3.2后台admin.php防止直接恶意访问
功能说明:admin.php是discuz默认的后台地址,正常情况下可以直接访问,为了防止某些恶意访问的情况,可以修改以下内容进行安全性能提升.适用版本:Discuz!x1-x3.2具体实施方案: a ...
-
unity中锁定鼠标移动&;&;隐藏鼠标&;&;强制是鼠标移动到某一位置
[System.Runtime.InteropServices.DllImport("user32.dll")] //引入dll public static extern int ...
-
Codeforces Round #551 (Div. 2) EF Solution
E. Serval and Snake 对于一个矩形,如果蛇的一条边与它相交,就意味着这条蛇从矩形内穿到矩形外,或者从矩形外穿到矩形内.所以如果某个矩形的答案为偶数,意味着蛇的头尾在矩形的同一侧(内或 ...