App的入门教程_jquery_脚本之家,App的入门教程

一.jQuery Mobile 的渐进加强两全与浏览器援救依靠维基百科
的解说,渐进巩固的陈设入眼总结以下几点

App的入门教程_jquery_脚本之家,App的入门教程。应用jQuery Mobile框架开荒移动端Web App的入门教程,jqueryapp

一.jQuery Mobile 的渐进巩固统筹与浏览器扶助 根据维基百科( Wikipedia ) 的解释,渐进巩固的设计入眼不外乎以下几点

  • basic content should be accessible to all web browsers
    (全体浏览器都应能访谈全部基本功的内容)
  • basic functionality should be accessible to all web browsers
    (全数浏览器都应能访谈全部根底的效果)
  • sparse, semantic markup contains all content
    (全部的剧情应该在为数少之又少语义标签内)
  • enhanced layout is provided by externally linked CSS
    (巩固的效能应该由外界 CSS 提供)
  • enhanced behavior is provided by unobtrusive, externally linked
    JavaScript (巩固的一坐一起由外界 JavaScript 提供 )
  • end-user web browser preferences are respected
    (终端客商的浏览器习于旧贯应受尊重)

金沙8331网址,若在实际上的付出中运用到 Web SQL Database 等 HTML5 能力,则最后的 Web App
被扶植度会比上述 jQuery Mobile 的被支持度低,但八个主流的移动浏览器
Android 与 Apple iOS 的系统浏览器及其桌面版本断定能提供最棒的支撑。

二.HTML5 data-* 属性 jQuery Mobile 依赖 HTML5 data-* 属性 来提供一应有尽有的支撑( UI
组件、过渡和页面构造),不协理该 HTML5
属性的浏览器会暗许忽视这一个属性的效果,比方在页面中加多二个版头,可以利用以下的
HTML:

<div data-role="header">
  <h1>jQuery Mobile Demo</h1>
</div>

 
诸如此比就能够发生三个 jQuery Mobile
样式的版头,从下文的图中得以见到,那样的版头样式很切合运动器材选用,何况在丰富data-role=”header” 属性后,div 内的 h1 也会被渲染成必然样式,那正是jQuery Mobile 的方便飞快,也是它的计划焦点—— Write Less, Do More 。

而外 jQuery Mobile 中还恐怕有以下的 data-role
属性(部分质量),已经给与了迟早的样式及客户操作响应效果。

data-role=”content” , data-role=”button” , data-theme =”” ,
data-role=”controlgroup” , data-inline=”true” ,
data-role=”田野(fieldState of Qatarcontain” , data-role=”listview” , data-rel=”dialog” ,
data-transition=”pop”
,分别对应着主导内容、按键,焦点颜色,已编纂开关,内联按键,表单成分,列表视图,对话框,页面过渡。

三.jQuery Mobile 基本使用方式 1.引入 jQuery Mobile
接受 jQuery Mobile ,需求在网页页眉中引进 jQuery Mobile
组件,蕴涵以下部分
(1)jQuery 库
(2)jQuery Mobile CSS
(3)jQuery Mobile 库

能够因此如此的 head 引入以上组件

<head>
  <title>jQuery Mobile Demo</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>

 
2.加入 viewport 在 Android 的浏览器中,若未有设定页面宽度,它会以为页面宽度是 980px
,因而大家得以在 head 里参加一个viewport,让运动浏览器知道荧屏尺寸,只是二个 viewport
标签,就早就给顾客带给越来越好的体验。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.5">

 
3.简单易行的页面实例 在引进 jQuery Mobile 供给的组件后,大家得以创建 jQuery Mobile
页面,上边给出一个简便的例证。

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Mobile Demo</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>

<body>

<div data-role="page" id="home">

  <div data-role="header">
    <h1>jQuery Mobile Demo</h1>
  </div>

  <div data-role="content">
    <p>主体内容</p>
  </div>

  <div data-role="footer">
    <h2>Footer</h2>
  </div>

</div>

</body> 
</html>

金沙8331网址 1

对此 jQuery Mobile ,每定义四个 data-role=”page” 就一定于叁个页面,
jQuery Mobile 暗中认可使用 Ajax 的艺术操作
DOM,自动蒙蔽除第二个页面外的富有页面,当点击链接,链接到任何页面时会以
Ajax 的情势加载新页面包车型大巴内容,上边给出完整实例。其它,大家还足以使用部分
HTML5 的语义化标签,如 header 的 div 能够一向运用 header
标签,具体的能够敬重下边包车型客车例子。

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Mobile Demo</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>

<body>

<div data-role="page" id="home">

  <header data-role="header">
    <h1>jQuery Mobile Demo</h1>
  </header>

  <div data-role="content">
    <a href="#page2" data-role="button">列表页面</a>
  </div>

  <footer data-role="footer">
    <h2>Footer</h2>
  </footer>

</div>

<div data-role="page" id="page2">

  <header data-role="header">
    <h1>jQuery Mobile Demo</h1>
  </header>

  <div data-role="content">
    <ul data-role="listview" data-inset="true">
      <li><a href="#home">回到首页</a></li>
      <li><a href="#home">回到首页</a></li>
      <li><a href="#home">回到首页</a></li>
    </ul>
  </div>

  <footer data-role="footer">
    <h2>Footer</h2>
  </footer>

</div>

</body> 
</html>

 四.开拓原则 先是我们亟须了然,一款能够的 Web App ,须求有精良的 UI
与顾客体验(UE),固然本质上作为多个站点,内容才是客商须求的,但我们仍急需选取能够的
UI 与 UE 来作为内容与顾客的总是,因而大家引进 jQuery Mobile 来为 Web App
制作 UI 与相互作用。

有了 Web App 的分界面,还亟需多少的交互,那样能力做出 App 。这里可以运用
PHP 等服务器脚本与 Mysql 等数据库来为 Web App 提供数据驱动,但 Kayo
希望利用一种新的不二法门,也便是 HTML5 的情势,使用 HTML5 标准提供的 Web SQL
Database —— 一个简洁明了强盛的 Javascript 数据库 API,
能够在本土数据库中存款和储蓄数据(如内嵌在浏览器中的 SQLite ),其余还足以采纳HTML5 标准中的 Storage (本地积存) 来积攒数据,这样就可以减掉 Web App
对于网络的依附,而且整个 Web App 都以采用前端的本领产生(很震惊吧!)。

末尾一定要提的是 offline application cache (离线程序缓存),它也是
HTML5 的特点,允许客商在无互连网连接的景况下运维 Web
App,由此大家得以应用此本性制作扶植离线使用的 Web App ,进一层削减 Web
App 对于网络的重视。

1.响应式设计 响应式网页设计由 Ethan Marcotte
提议,通俗点说,正是网站分界面能够同盟两种尖峰,实际不是各类终端各自做叁个分界面。Tencent等大型网址都有针对差异的装置做出不相同的分界面,举个例子3g
版,触屏版,ipad……,这样就能够大增了无数重复的专门的工作量,由此大家可认为网址渐进的盘算多个分界面,自动适应差异的设备,当然设备间的功能能够具备不一致。这里
Kayo
小插一段,响应式设计的降生,极大程度上归功于活动网络的升华与移动器材硬件的升级换代,而移动网络的前进自己也依附于运动道具硬件的提升,因而想不断晋升的
App ,还得先要硬件厂家给力。

言归正传,这里涉及响应式设计的理念当然是愿意在准备 Web App
时也运用到,而这个 jQuery Mobile 已经为开拓者预先做好, jQuery Mobile
不但暗中认可的 UI
样式里早已按响应式设计做好,它还此外提供了部分为响应式设计而做的办法,日后会详细介绍。

2.渐进式设计

“前端设计时通过渐进加强功效来规划直白也是 Kayo
的布置性主见,因为不相同的阳台,差别的器材具有分歧的 Web
意况,由此对此部分可观的前端效果很难保障在每台器具上都显现均等的效果,由此与其为了在有着设备上完成一律的效应而降落一体化的前端样式,不及对于好的设施能够展现更杰出的意义,而基本的法力就协作全数的装置。jQuery
Mobile
的规划也是那般,主题的机能扶植全体的器材,而较新的道具则足以拿到越来越特出的页面效果。”

这边运用 jQuery Mobile 的指标特别料定,也便是使到 Web App
能尽或者合营分歧的器具而且在相比较先进的设施中表现更为美貌的变现,而不用为了统一而就义特出的规划。

Mobile框架开拓活动端Web
App的入门教程,jqueryapp 一.jQuery Mobile 的渐进加强布署与浏览器援助依据维基百科( Wikipedia ) 的分解,渐…

basic content should be accessible to all web browsers basic
functionality should be accessible to all web browsers sparse, semantic
markup contains all content enhanced layout is provided by externally
linked CSS enhanced behavior is provided by unobtrusive, externally
linked JavaScript (巩固的一言一动由外部 JavaScript 提供 ) end-user web
browser preferences are respected

若在事实上的花费中央银行使到 Web SQL Database 等 HTML5 技能,则最后的 Web App
被援助度会比上述 jQuery Mobile 的被扶持度低,但四个主流的移动浏览器
Android 与 Apple iOS 的体系浏览器及其桌面版本肯定能提供最棒的扶持。

二.HTML5 data-* 属性jQuery Mobile 依赖 HTML5 data-* 属性
来提供一层层的支撑,不援救该 HTML5
属性的浏览器会暗许忽视这么些属性的效果,例如在页面中增添二个版头,能够利用以下的
HTML:

 jQuery Mobile Demo

那般就会生出二个 jQuery Mobile
样式的版头,从下文的图中得以见到,那样的版头样式很契合运动设备使用,并且在加上
data-role=”header” 属性后,div 内的 h1 也会被渲染成必然样式,那就是jQuery Mobile 的方便火速,也是它的安顿大旨—— Write Less, Do More 。

除此而外 jQuery Mobile 中还恐怕有以下的 data-role
属性,已经给与了自然的体制及客商操作响应效果。

data-role=”content” , data-role=”button” , data-theme =”” ,
data-role=”controlgroup” , data-inline=”true” ,
data-role=”田野(field卡塔尔(قطر‎contain” , data-role=”listview” , data-rel=”dialog” ,
data-transition=”pop”
,分别对应着主导内容、按键,核心颜色,已编辑撰写开关,内联按键,表单成分,列表视图,对话框,页面过渡。

三.jQuery Mobile 基本使用方式1.引进 jQuery Mobile使用 jQuery Mobile
,需求在网页页眉中引进 jQuery Mobile 组件,包涵以下部分jQuery Mobile
CSSjQuery Mobile 库

可以通过那样的 head 引进以上组件

 jQuery Mobile Demo   

2.加入 viewport在 Android
的浏览器中,若未有设定页面宽度,它会认为页面宽度是 980px
,因而大家得以在 head 里出席多个viewport,让运动浏览器知道显示屏尺寸,只是一个 viewport
标签,就已经给客商带给更加好的体会。

3.粗略的页面实例在引进 jQuery Mobile 须要的机件后,大家能够成立jQuery Mobile 页面,上边给出一个轻松易行的事例。

 jQuery Mobile Demo       jQuery Mobile Demo      Footer    

对此 jQuery Mobile ,每定义叁个 data-role=”page” 就约等于二个页面,
jQuery Mobile 默许使用 Ajax 的办法操作
DOM,自动隐讳除第叁个页面外的具备页面,当点击链接,链接到其余页面时会以
Ajax 的秘诀加载新页面包车型地铁剧情,下边给出完整实例。别的,大家还足以应用部分
HTML5 的语义化标签,如 header 的 div 能够一向利用 header
标签,具体的能够仰慕上边包车型大巴例证。

 jQuery Mobile Demo       jQuery Mobile Demo   列表页面   Footer     jQuery Mobile Demo    回到首页 回到首页 回到首页    Footer    

四.支付规范首先大家必得明白,一款不错的 Web App ,需求有精美的 UI
与顾客体验,即使本质上作为三个站点,内容才是客商须求的,但大家仍急需运用卓绝的
UI 与 UE 来作为内容与顾客的接连,因而大家引进 jQuery Mobile 来为 Web App
制作 UI 与互为。

有了 Web App 的分界面,还索要多少的彼此,那样技艺做出 App 。这里能够行使
PHP 等服务器脚本与 Mysql 等数据库来为 Web App 提供数据驱动,但 Kayo
希望利用一种新的点子,约等于 HTML5 的点子,使用 HTML5 标准提供的 Web SQL
Database —— 叁个简易强盛的 Javascript 数据库 API,
能够在本地数据库中存储数据,此外还足以接收 HTML5 规范中的 Storage
来积攒数据,那样就能够减去 Web App 对于网络的信赖,况兼整个 Web App
都是采用前端的工夫产生。

末段不能不提的是 offline application cache ,它也是 HTML5
的特征,允许顾客在无互连网连接的处境下运作 Web
App,由此大家能够使用此脾性制作协助离线使用的 Web App ,进一步回退 Web
App 对于互联网的依赖。

1.响应式设计响应式网页设计由 Ethan Marcotte
建议,通俗点说,就是网址分界面能够协作各种终极,并不是各样终端各自做三个分界面。Tencent等大型网址都有指向不一样的设施做出分化的分界面,比方3g
版,触屏版,ipad……,那样就能够追加了累累再一次的工作量,因而我们得感觉网站渐进的布署三个分界面,自动适应分化的器材,当然设备间的作用能够有所差异。这里
Kayo
小插一段,响应式设计的出生,相当大程度上归功于移动互连网的上扬与运动设备硬件的进级换代,而活动网络的开发进取本人也借助于移动设备硬件的升迁,因而想不断晋升的
App ,还得先要硬件商家给力。

闲话休说,这里提到响应式设计的见识当然是梦想在设计 Web App
时也选取到,而那些 jQuery Mobile 已经为开拓者预先做好, jQuery Mobile
不但私下认可的 UI
样式里早已按响应式设计做好,它还其它提供了一部分为响应式设计而做的秘诀,日后会详细介绍。

2.渐进式设计

“前端设计时经过渐进增强作用来布署直接也是 Kayo
的宏图主见,因为差别的平台,不相同的装置具备差别的 Web
景况,由此对于有些精美的前端效果很难保障在每台设备上都突显同样的效果,因而与其为了在富有设施上成功一致的成效而减弱一体化的前端样式,不及对于好的器械能够表现更不错的效果与利益,而基本的意义就相当全部的设施。jQuery
Mobile
的筹划也是如此,大旨的机能支撑具有的装置,而较新的配备则能够得到进一层非凡的页面效果。”

此处运用 jQuery Mobile 的目标极度分明,也等于使到 Web App
能尽只怕合营差异的装置並且在相比较先进的配备中表现更为雅观的表现,而毫无为了统一而殉职卓越的计划。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注