亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

hybird - (03: jquery mobile)

標簽:
JQuery

1.jqueryMobile简介

是一个jquery的插件,同时也是一个移动开发框架
这样的移动开发框架有一个共同的特点就是,基于html5
类似的框架还有:jqTouch, Sench touch(较早,不易上手,案桌上切换页面会闪屏,学习成本也较高, 其前身是ext,基于js驱动的)。

jqueryMobile特点,较易上手,基于html驱动的,可以用div这些容易做UI些。给移动平台带来了jQuery核心库,也发布了一套完整统一的jQuery移动UI框架。

他们设计的UI都仿照native,很像。

案例: http://m.oschina.com   http://demos.juerymobile.com(控件的学习)

2.jqueryMobile 下载

下载地址:http://jquerymobile.com

下载之后解压的文件夹中需要用到的:
images 文件夹, jquery-mobile-version.css(前面这两个路劲不能乱),jquery-mobile-version.jsjquery-mobile-version.min.js(发布的时候用min版本)

注意:导入jqueryMobile也应该将jquery.min.jsjquery.js导入,因为是jquery插件。

3.新建页面的初始化工作:

<!DOCTYPE html><html lang="en"><head>    <meta http-equiv="content-type" content="text/html; charse=utf-8">    <meta charset="UTF-8">    <title></title>    <meta name="viewport" content="width=device-width, initial-scale=1">    <link href="../css/jquery.mobile-1.4.5.css" rel="stylesheet">    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../js/lib/jquery-3.1.1.js"></script>    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../js/lib/jquery.mobile-1.4.5.js"></script></head><body></body></html>

注意:meta标签的 viewport,其属性:width=device-width宽度适应,initial-scale=1 在页面上的显示倍数。
这个meta标签十分重要,建立页面必须写上。

4.jqueryMobile标签属性

eg:

<div data-role="page">
     <div data-role="header"  data-theme="b" >
     </div>
      <div data-role="content">
      </div>
      <div data-role="footer"> 
      </div></div>

data-h5的扩展属性。
data-role="page" 可以渲染一些样式出来。

data-theme="b" 样式,默认是a



作者:廖马儿
链接:https://www.jianshu.com/p/52d766bd2e4d


點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消