当前位置:首页 > 开发 > 移动开发 > 正文

实战:jQuery Mobile开发HTML5移动应用

发表于: 2014-04-16   作者:cuiyadll   来源:转载   浏览次数:
摘要:   引自: http://tech.it168.com/a2011/1209/1286/000001286393_all.shtml     随着移动互联世界的到来,目前已发展到多种移动操作系统割据的局面,而开发者则急需要能运用原有的开发知识和技能,快速方便地构建移动应用程序,并期望能运行在不同的手机操作平台上,比如Android,iOS,黑莓等。   而目前,
  引自: http://tech.it168.com/a2011/1209/1286/000001286393_all.shtml
    随着移动互联世界的到来,目前已发展到多种移动操作系统割据的局面,而开发者则急需要能运用原有的开发知识和技能,快速方便地构建移动应用程序,并期望能运行在不同的手机操作平台上,比如Android,iOS,黑莓等。
  而目前,出现了一批十分优秀的支持HTML5/CSS3的移动应用开发框架,其中最为大家熟悉的是jQuery Mobile框架(http:// jquerymobile.com),它可以让熟悉jQuery框架的开发者快速开发出基于HTML5的移动应用,而且直接通过手机的浏览器即可浏览。除此以外,jQuery Mobile也有很好的扩展性,用户可以很好地对其进行定制修改,本文将指导读者对jQuery Mobile的提供的主题样式进行自定义,从而创建符合用户需要的样式。
  本文假设读者已具备初步的jQuery Mobile相关知识,如果读者不大了解jQuery Mobile,可以通过如下几篇文章进行学习,文章链接地址为:
  统一接口工具JQuery Mobile简介
   http://tech.it168.com/a2010/1210/1136/000001136835.shtml
  使用JQuery Mobile实现手机新闻浏览器
   http://tech.it168.com/a2011/0321/1168/000001168231.shtml
  JQuery Mobile实现手机新闻浏览器(2)
   http://tech.it168.com/a2011/0323/1169/000001169682.shtml
  使用jQuery Mobile实现新闻浏览器(3)
   http://tech.it168.com/a2011/0324/1170/000001170077.shtml
  jQuery Mobile中的主题
  在jQuery Mobile中,有一个建议的页面模版结构,其中包含了比如页面头部,页面主体和页脚等部分。jQuery Mobile使用HTML5中的data-role属性进行定义,下面的代码中就显示了一个主体页面的框架:
   <div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div>

    <div data-role="content">
        <p>Page content goes here.</p>        
    </div>

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
    
</div>

  而另外一个建议使用的元素是标签,这个标签的作用是指定浏览器以何种方式在手机上显示网页,代码如下:
<meta name="viewport" content="width=device-width, initial-scale=1">

  
  <meta viewport>标签对于在移动设备上正确显示移动网页是十分重要的,如果不使用该标签,则页面内容在显示时可能会失真或者变形,或者是根本不能适合移动设备浏览。在下图中,显示了一个使用标签的页面,可以看到,页面内容的显示能适合移动设备的大小。
  jQuery Mobile中的主题
  jQuery Mobile框架中,包含了一个页面主题的框架,它提供了对页面样式的相关控制功能。通过使用HTML5的data-theme属性标签,能轻易为某一个页面元素应用已有的jQuery Mobile的样式。默认的主题样式有5种,使用英文字母去区分,比如A-E开头的都内置的样式,开发者可以通过下载jQuery Mobile的代码中去学习了解这样样式文件是如何编写的。假如开发者要编写新的样式,可以使用F-Z字母中的任意一个去命名新建立的样式,然后就可以编写相关的代码。

  页面的主题样式
  我们先来看下如何定义页面主题样式。页面的主题样式是通过data-role来指定属性的值为page,再使用data-theme主题指定使用的样式,如下代码:
  <div data-role="page" data-theme="f">
  这里指定了使用一个新的主题样式,命名为”f”。实际上,jQuery mobile框架为自动为当前的页面增加对应的CSS样式,下面代码就是浏览器在执行代码后返回生成的代码:
<div data-role="page" data-theme="f" 
class="ui-page ui-body-f ui-page-active" style="min-height: 580px;">

  可以看到,其中的样式class="ui-page ui-body-f ui-page-active"为jQuery mobile添加的样式。其中ui-page和ui-page-active为根据data-role的设定样式去进行设置赋值,而ui-body-f则为用户自定义的样式,下面是一个自定义的ui-body-f样式的代码:
   .ui-body-f {
  background-color: #f9f9f9;
  font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, sans-serif;
}

  在这个自定义的样式中,定义了背景颜色和字体。如果要对某一个移动页面中的某些元素进行自定义,也是可行的,可以使用的方法为在样式中指定页面的元素名,如下代码所示:
   .ui-body-f input[type="text"], 
.ui-body-f input[type="password"] {
  background-color: #ccc;
}

  其中指定了对页面中的文本框和密码框,使用的是ui-body-f的CSS样式。
  因此,只要掌握了这种方法,开发者就可以对页面中的各类元素进行样式的定义了,十分方便。

  工具栏样式的定义
  在jQuery Mobile框架中,工具条属于页面的头部和底部元素。为了将工具条定义为头部或者底部,可以使用data-role属性去指定,如下代码所示,表示在一个页面中同时定义了头部的工具栏和底部的工具栏:
  <div data-role="header">
    <h1>Page Title</h1>
</div>

<div data-role="footer">
    <h4>Page Footer</h4>
</div>

  同样,为页面的头部和底部指定一个样式也是很简单的,也是利用data-theme属性,如下代码所示:
    <div data-role="header" data-theme="f">
    <h1>Page Title</h1>
</div>

  为此,需要创建一个CSS样式,如下:
.ui-bar-f {
  padding: 10px 0px;
  background-color: #069;
  border-bottom: 2px solid #036;
  color: #fff;
}

  就是说,新创建的这个样式是装饰所有的data-theme为F的页面元素。然而,有的时候,可能需要页面的底部使用不同的样式,那么可以另外在新建一个名为g的样式,创建的代码如下:
    .ui-bar-g {
  margin-top: 20px;
  padding: 10px 0;
  color: #fff;
  border-bottom: 2px solid #000;

  background-color: #000;
  background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(0,0,0,0.65) 100%); 
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,
  rgba(204,204,204,1)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%,
  rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,0.65) 100%); 
  /* Opera11.10+ */
  background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,0.65) 100%); 
  /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', 
  endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,0.65) 100%); 
  /* W3C */
}

  在这个样式中,设置了一些基本的CSS3属性外,还为不同的浏览器设计了不同的背景颜色和相关的渐变背景,更详细的关于CSS3 渐变背景的设置请参考相关资料。

  内容的主题样式
  接下来,我们学习下在内容页部分,是如何应用主题样式的。例子代码如下:
<div data-role="collapsible" data-collapsed="true" data-theme="f">
    <h3>>Login</h3>
    Login form will go here
</div>

  注意,在这里,使用了data-role属性的值为collaspsible,表明这个页面的div是一个可折叠的层,并且设置了data-collapsed属性为true,其效果为当页面加载时,显示的是折叠状态,而当用户点标题栏时,才会显示登陆的表单。同样,在data-theme属性中设置样式为f,其样式定义如下:
   ui-body-f .ui-collapsible-contain 
.ui-collapsible-heading .ui-btn-up-f {
  background: #666;
  color: #fff;
  text-decoration: none;
}
.ui-body-f .ui-collapsible-contain 
.ui-collapsible-heading .ui-btn-down-f, 
.ui-body-f .ui-collapsible-contain 
.ui-collapsible-heading .ui-btn-hover-f {
  background: #999;
  color: #fff;
  text-decoration: none;
}

  在上面的这段CSS中,为标题工具栏定义了三种状态的样式,即:非激活,激活中和鼠标移动在上面。其中
  的标签会被CSS修饰转变为一个带有ui-collapsible-heading的样式,而它包含的文字,这里是指“Login”将会被转化为带有样式的链接,其中有三种不同的链接的样式,分别为ui-btn-up-f,ui-btn-down-f,ui-btn-hover-f,分别代表的工具条的三种不同的状态(up,down,hover)。以上的样式中,会根据data-theme中指定的样式号而有所变化,比如开发者指定的是使用g的新样式,则以上的CSS样式中,则会全部以-g结尾。

  列表样式
  在移动页面应用中,列表样式是十分普遍的,因为它们很容易地导航。在jQuery Mobile中,使用列表很简单,只需要在data-role中指定为listview即可,如下代码所示:
   <ul data-role="listview" data-inset="true" data-theme="f">
  <li><a href="#">Title name</a></li>
  <li><a href="#">Title name</a></li>
  <li><a href="#">Title name</a></li>
</ul>

  默认的样式如下图所示:
列表样式开发
  如果要上面的列表实现圆角效果的话,可以增加data-inset属性,并将其属性值设置为true即可,如下效果图,出现了圆角:
列表样式开发
  同样,为列表增加样式也十分简单,只需要设置data-theme属性的值为样式的名称即可,比如同样增加样式f,定义样式f如下:
.ui-listview .ui-btn-up-f a, 
.ui-listview .ui-btn-down-f a, 
.ui-listview .ui-btn-hover-f a {
  color: #fff;
}

  这里,设定了文字的颜色为白色,并且使用ui-btn-up-f,ui-btn-down-f,ui-btn-hover-f设置了列表选项的三种不同状态(up,down,hover)。

  表单及按钮的主题样式
  在jQuery mobile中,增加表单及按钮,其实跟普通的网页中增加差不多,只需要增加相关的input标签元素或button标签元素即可,代码示例如下:
   <div data-role="collapsible" data-collapsed="true" data-theme="f">
  <h3>>Login</h3>
  <form action="" method="post">
    <label for="username">Username</label>
    <input type="text" name="username" id="username" />
    <label for="username">Password</label>
    <input type="password" name="password" id="password" />
    <fieldset class="ui-grid-a">
      <div class="ui-block-a">
        <button type="reset" data-inline="true">Reset</button>
      </div>
      <div class="ui-block-b">
        <button type="submit" data-inline="true" data-theme="f">Submit</button>
      </div>
    </fieldset>
  </form>
</div>

  同样,我们指定表单的样式如下:
.ui-body-f input[type="text"], 
.ui-body-f input[type="password"] {
  background-color: #ccc;
}

  这里我们在上文中已经谈到,即将输入文本框和密码框都使用f样式,在上面的代码中,请留意
  标签一段,其中分别对两个按钮使用了不同的样式,对于RESET按钮,
  使用的是默认的jQuery mobile的样式,而对submit按钮,则使用的是data-theme=f的样式,
  最后看下f样式的css代码定义,如下:
   .ui-btn-up-f {
  background: -moz-linear-gradient(top, rgba(57,107,158,1) 0%, 
  rgba(78,137,197,0.65) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,
  rgba(57,107,158,1)), color-stop(100%,rgba(78,137,197,0.65))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(57,107,158,1) 0%,
  rgba(78,137,197,0.65) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(57,107,158,1) 0%,
  rgba(78,137,197,0.65) 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, rgba(57,107,158,1) 0%,
  rgba(78,137,197,0.65) 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#396b9e', 
  endColorstr='#a64e89c5',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, rgba(57,107,158,1) 0%,
  rgba(78,137,197,0.65) 100%); /* W3C */
  border: 1px solid #225377;
  text-shadow: #225377 0px -1px 1px;
  color: #fff;
}
.ui-btn-down-f, 
.ui-btn-hover-f {
  background: -moz-linear-gradient(top, rgba(114,176,212,1) 0%, 
  rgba(75,136,182,0.65) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,
  rgba(114,176,212,1)), color-stop(100%,rgba(75,136,182,0.65))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(114,176,212,1) 0%,
  rgba(75,136,182,0.65) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(114,176,212,1) 0%,rgba(75,136,182,0.65) 100%); 
  /* Opera11.10+ */
  background: -ms-linear-gradient(top, rgba(114,176,212,1) 0%,
  rgba(75,136,182,0.65) 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#72b0d4', 
  endColorstr='#a64b88b6',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, rgba(114,176,212,1) 0%,rgba(75,136,182,0.65) 100%); 
  /* W3C */
  border: 1px solid #00516E;
  text-shadow: #014D68 0px -1px 1px;
  color: #fff;
}

  本文的代码可以在如下这个连接下载(http://www.ibm.com/developerworks/apps/download/index.jsp?contentid=774893&filename=jquery-mobile-custom-themes.zip&method=http&locale= )
  小结
  本文讲解了如何在jQuery Mobile 框架中,自定义合适各种布局的样式主题,其中关键点在于使用data-theme属性指定和命名新建立的CSS样式,并且要注意样式的命名和编写要符合jQuery Mobile的规范即可,更多的关于jQuery Mobile自定义样式的内容,请参考其官方网站的文档指引。

实战:jQuery Mobile开发HTML5移动应用

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
jQuery Mobile 开发跨平台移动应用 jQuery Mobile 并不是一个特别高深的学问,却是有用而富于技巧性
感谢各位亲们的大力支持,小白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连载已
笔者当年还是一枚小白的时候,经常被QQ控件或各种论坛上的某个比较吸引人的标题所吸引,点开之后却
在jQuery Mobile的布局中,控件大多都是单独占据页面中的一行,按钮自然也不例外,但是仍然有一些方
笔者当年还是一枚小白的时候,经常被QQ控件或各种论坛上的某个比较吸引人的标题所吸引,点开之后却
作为一款真正有使用价值的应用,首先应该至少有两个页面,通过页面的切换来实现更多的交互。比如手
在范例5-4所使用的导航栏中,已经为按钮加入了图标的样式,但是当时并没有介绍按钮的图标究竟是怎么
在范例5-4所使用的导航栏中,已经为button增加了图标的样式,可是当时并没有介绍button的图标到底是
在jQuery Mobile的布局中,控件大多都是单独占据页面中的一行,按钮自然也不例外,但是仍然有一些方
一、下载jQuery Mobile 下载地址:http://jquerymobile.com/ 点击Download 下载如下zip包 下载成功
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号