jquery mobile学习笔记一

标签：style   blog   color   ar   sp   div   c   on   log   

先看下面几个属性 ui-body ui-bar ui-corner-all ui-body-[a-z] custom-corners

ui-bar创建一个通栏的块，可以作为内容块的区分，通过ui-bar-[a-z]用户可以修改皮肤。

ui-body的用法跟ui-bar的用法一样

ui-corner-all给块添加圆角属性

custom-corners内部的元素，也继承父级元素的圆角属性。

2、按钮部分

默认情况

<input type="button" value="button">

这个时候jquery mobile会对这个普通的按钮进行增强出处理使它更适合移动设备；增强后的HTML代码

<div class="ui-btn ui-input-btn ui-corner-all ui-shadow">button<input type="button" value="button" data-enhanced="true"></div>

从引用的class进行分析：ui-shadow是给代码添加阴影属性，ui-btn ui-input-btn按钮的增强样式；假如想修改按钮的外观可以通过自定义ui-btn-[a-f]来修改按钮的外观；这里有一个要注意的地方input元素里面添加了data-enhanced="true"这个属性，如果直接给input元素添加这个属性那么jquery mobile就不会对这个按钮进行增强处理。

将一个超链接以一个按钮的方式进行展示添加data-role="button"

<a href="#" data-role="button">a link</a>

这个时候jquery mobile也会给这个超链接进行增强：

<a href="#" data-role="button" class="ui-link ui-btn ui-shadow ui-corner-all" role="button">a link</a>

看到这里估计大家都可以看出些规律来了。

jquery mobile学习笔记一

标签：style   blog   color   ar   sp   div   c   on   log   

原文地址：http://www.cnblogs.com/zsdblog/p/4002016.html