网站建设资讯

NEWS

网站建设资讯

jquerymodile笔记-创新互联

接触移动端开发很长时间了,今天做下笔记,几下所学到的,今天的笔记是关于jquery

创新互联是一家专业提供大同企业网站建设,专注与网站建设、成都做网站H5页面制作、小程序制作等业务。10年已为大同众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。

modile滴。

  首先,大家要知道:

  jQuery Mobile 是创建移动 web 应用程序的框架。

  jQuery Mobile 适用于所有流行的智能手机和平板电脑。

  jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。

代码:

这要引入的三个文件。

由于jq mobile 是依赖于jq的,要先引入jq文件,否则jquery-1.10.2.min.js会报错的,

jquery.mobile-1.4.5.css也是要引入的,控制样式。

data-role="page",定义了一个页面容器,用于构建多页面设计。

data-role="header",页眉或标题栏。

data-role="content",是内容主体的包装容器。

data-role="footer",页脚。

data-role="navbar",定义导航栏。

data-role="collapsible",可折叠。

data-role="collapsible-set",可折叠集合。(手风琴)

data-position='fixed',可以将页脚定位在屏幕底部,其实,如果页面高度没有屏幕高度高

,会定位在页面底部。

data-transition="",设置页面转换效果,值为slide(滑动),slideup(卷起),slidedown(向

下滑动),pop(弹出),fade(淡入淡出),flip(翻转),none(无)。

  页面到页面的转换过程,其实,步骤是这样的:

1、用户轻巧按钮,导航到下一个页面。

2、框架使用一个Hijax请求载入下一个页面,然后添加到当前页面的DOM中,当前页面其实是

和下一个页面并排放置的,因此准备发生一个平滑转换。

3、框架转换到另一个页面。

4、显示下一个页面,转换完成。

data-role="dialog",弹层。

data-rel="back", 设置返回按钮。

data-role="button", 设置按钮。

属性:

data-corners="frue/false",设置按钮是否有圆角。

data-mini="frue/false",设置是否是小按钮。

data-shadow="frue/false",设置按钮是否有阴影。

data-inline="true",设置多个按钮并排显示。

图标:

data-icon="arrow-l",左箭头。

data-icon="arrow-r",右箭头。

data-icon="delete",删除。

data-icon="info",信息。

data-icon="home",首页。

data-icon="back",返回。

data-icon="search",搜索。

data-icon="grid",网络。

data-iconpos 可以用来定位图标。值为:top,bottom,left,right

data-iconpos="notext",只显示图标。

data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u",设置折叠图标。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网页题目:jquerymodile笔记-创新互联
URL标题:http://cdweb.net/article/ccjcpg.html