jquery mobile 移动web(1)

轻量级框架jQuery Mobile   所需文件

	    <link rel="stylesheet" href="jquery.mobile-1.1.2/jquery.mobile-1.1.2.css"/>
    	    <script type="text/javascript" src="jquery.mobile-1.1.2/jquery-1.6.4.js"></script>     

jquery 应放在 mobile 上面。     <script type="text/javascript" src="jquery.mobile-1.1.2/jquery.mobile-1.1.2.js"></script>   dataset自定义属性,要求前缀必须带有“data-”字符,“data-”后面允许使用任何值,它允许开发人员将这类属性添加到HTML标签中,   充当元素的私有数据存储区域,不允许元素的原有功能,也不会影响布局。 jQuery Mobile 使用的自定义属性。   1.data-role     定义元素在页面中的功能角色,该属性允许定义不同的组件,元素及页面视图。   2.data-title     定义jQueru Mobile 视图页面的标题。   3.data-transition     定义视图切换的动画效果。   4.data-rel     定义具有浮动层效果的视图。   5.data-theme     指定元素或组件内的主体样式风格。   6.data-icon     在元素内增加一个icon 小图标。   7.data-iconpos     定义icon小图标的位置。   8.data-inline     指定按钮根据内容自适应其长度。   9.data-type     定义分组按钮按水平或垂直方向排列。   10.data-rel     定义具有特定功能的元素属性, 例如返回按钮 data-rel="back".   11.data-add-back-btn     指定视图页面自动在页眉左侧添加返回按钮。   12.data-back-btn-text     指定由试图页面自动创建的返回按钮的文本内容。   13.data-position     该属性的作用是实现在滑动屏幕时工具栏的显示或隐藏状态。   14.data-fullscreen     用于自定全屏视图页面。   15.data-native-menu     指定下拉选择功能采用平台内置的选择器。   16.data-placeholder     设置下拉选择功能的占位符。   17.data-inset     实现内嵌列表的功能。   18.data-split-icon     设置列表右侧的图标。   19.data-split-theme     设置列表右侧图片的主题样式风格。   20.data-filter     开启列表过滤搜索功能。   简单配置一个页面

  	  <section data-role="page">
	        <header data-role="header">页头</header>
	        <article data-role="content">内容</article>
	        <footer data-role="footer">页脚</footer>
	    </section>

改变页面标题的视图   data-title="标题"   视觉切换动画。 data-transition="slide" slide 左右切换 slideup 从下到上 slidedown 从上到下 pop 以弹出的 fade 渐变褪色 flip 翻转飞出。

        <section data-role="page" id="firstView">
           <header data-role="header">第1个视图</header>
           <article data-role="content"><a href="#secondView" data-transition="flip">切换第2个视图</a></article>
           <footer data-role="footer">页脚</footer>
     </section>
     <section data-role="page" id="secondView">
           <header data-role="header">第2个视图</header>
           <article data-role="content"><a href="#firstView" data-transition="flip">切换第1个视图</a></article>
           <footer data-role="footer">页脚</footer>
     </section>

  页面主题:data-theme = "a"

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏河湾欢儿的专栏

04-修改 维护

想要改变图标的位置? 新功能,加个图标? 画布太大,文件空白太多? 图标多余,要删除?

11320
来自专栏娱乐心理测试

小程序上传多张图片

以前写过小程序网络和本地图片到相册的方法:https://www.jianshu.com/p/5479041607fa,写过上传一张或多张图片到阿里云OSSht...

2.2K50
来自专栏快乐八哥

DIV元素水平和垂直居中

在前端开发过程中,经常要对元素进行居中设置。一般有水平居中,和垂直居中。一般设置水平居中简单。基本是margin:0 auto,就可以了。但是垂直居中,我们有时...

52780
来自专栏九彩拼盘的叨叨叨

Vue2 组件通信写法总结

子组件只接收在子组件定义的 props的值。通过 this.prop名称 获得父组件传数据。

6620
来自专栏闻道于事

其他标签及框架集

今天学习了其他一些标签以及框架集。 <marquee> ... </marquee> 1 <marquee direction="down" heigh...

32970
来自专栏.Net移动开发

VisualStudio移动开发(C#、VB.NET)Smobiler开发平台——ImageTabBar控件的使用方式

获得和设置标签栏单元集合,打开集合编辑器,并点击“添加”,分别填写ImageResourceID(菜单项图片名称),SelectImageResourceID(...

8130
来自专栏一“技”之长

Bootstrap响应式前端框架笔记四——表单

    在Bootstrap框架中,可以为表单标签添加form-control属性来为其设置默认样式,默认表单控件的宽度将充满父容器标签。需要注意,在布局表单时...

16510
来自专栏栗霖积跬步之旅

HTML基础上

知识点一:HTML Hyper Text Markup Language  超文本标记语言。  HTML标准结构: < ! doctype html> 声...

24670
来自专栏.Net移动开发

VisualStudio移动开发(C#、VB.NET)Smobiler开发平台——GifView控件的使用方式

获取或设置获取图像模式,默认设置为“File”,表示直接从文件中读取图像,如图 4;

10920
来自专栏码农阿宇

HTML基础加强

1. 什么是浏览器:解释和执行HTML源码的工具。 2. 什么是静态页面,什么样的页面是动态页面? 静态页面:htm,html(直接读取) 动态网页:asp...

369100

扫码关注云+社区

领取腾讯云代金券