jquery mobile相同header jquery mobile和jquery区别

转载

mob64ca13f3c9f0 2023-12-14 11:32:22

文章标签 javascript ui json ViewUI jQuery 文章分类 jQuery 前端开发

关于 jQuery Mobile

jQuery Mobile是为了填补jQuery在移动设备应用上的一个新项目。它应用了HTML5和CSS3。

主要特性

基于jQuery构建。

采用与jQuery一致的核心和语法，还使用了jQuery UI的代码和模式。

兼容绝大部分手机平台
轻量级的库
模块化构建
HTML5标记驱动的配置
渐进增强原则
响应设计
强大的Ajax导航系统
易用性
支持触摸和鼠标事件
统一的UI组件
强大的主题化框架

基本应用

默认情况下，移动浏览器，会像在大屏幕的Web浏览器那样显示你的页面，因此用户在移动设备看到这个页面的字体就比较小，所以要通过Meta元素可视区进行纠正。这个元素会通知浏览器使用移动设备的宽度作为可视区的宽度。

<meta  name="viewport" content="width=device-width,intial-scale=1,user-scalable=no" />
<!--这个元素设置宽度为设备的最大宽度，禁止用户放大和缩小-->

另加载顺序应该为：
<link rel="stylesheet" href="jquery.mobile.css"/>
<script src="jquery.js"></script>
<!--此处加入项目中其它js-->
<script src="jquery.mobile.js"></script>

data-role帮助jQuery mobile知道哪些元素要处理。data-属性这个用法是HTML5推出的一个特性，它可以让开发人员添加任意属性到html标签中，只要添加的属性名有"data-"前缀。

data-role="button"按钮
data-role="collapsible"一个包含标题和内容的容器
data-role="collapsible-set"一个包含collapsible的容器
data-role="content"一个内容容器
data-role="dialog"一个对话框
data-role="fieldcontain"一个区域包裹容器
data-role="slider"一个翻转切换元素
data-role="footer"页面页脚容器
data-role="header"页面标题容器
data-role="listview"列表视图
data-role="navbar"导航栏
data-role="page"页面容器
data-role="slider"一个有范围值的文本框
type="checkbox"复选框
type="radio"单选框
<select></select>下拉框
type="text|number|search"文本框|数字框|搜索框

//简单列表示例
<ul data-role="listview" data-inset="true">
    <li><a href="#">123</a></li>
    <li><a href="#">123</a></li>
    <li><a href="#">123</a></li>
</ul>
//data-inset设置后列表的宽度就不会是100%，没设置就是100%的宽度