欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

创建OFBiz的jQuery Mobile入门页面 博客分类: ofbiz  

程序员文章站 2024-03-19 17:17:40
...

jQuery Mobile 框架是一套JavaScript库,用来帮助你快速创建适合移动设备访问的网站。它可以把目前的页面转换成适合触摸操作的页面。jQuery Mobile可以让用户通过浏览器直接访问到触摸友好的应用。 

jQuery Mobile有很多套主题供你的网页应用界面使用。

jQuery Mobile有一套推荐的页面结构,包括一些常用的元素,header,conent和footer。这些元素是通过HTML5 data-role 这个属性定义的。下面的代码就是jQuery Mobile推荐的页面模板: 

 

<div data-role="page">
    <div data-role="header">
        <h1>头部</h1>
    </div>

    <div data-role="content">
        <p>中间内容</p>      
    </div>

    <div data-role="footer">
        <h4>底部</h4>
    </div>

</div>

 

 

另外一个重要元素是 <meta viewport>标签。这个标签定义了浏览器应该如何显示这个网站

 

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

 <meta viewport>标签是一个很重要的标签,它会根据访问的设备不同而以不同的方式呈现网页。

 

 

jQuery Mobile框架包含了一个页面主题系统,为页面的元素的样式提供了全方位的控制。HTML5标签<data-theme>可以被添加到不同的元素上,以指定这个元素的主题。jQuery Mobile默认提供了7套主题,从A至G。你也可以创建你自己的样式,用其他没有用过的字母命名,例如H至Z。 

 

页面主题 
页面主题包括为HTML元素提供样式。jQuery Mobile建议使用<div>元素,加上data-role属性。为了给这个div加样式,我们需要再添加data-theme属性。在这里,我们将用“G”来作为名字: 

 

<div data-role="page" data-theme="g">

 

当你指定data-role和data-theme后,jQuery Mobile实际上创建并添加了一些CSS类给这个页面的元素。下面这段代码就是我们上面代码的浏览器输出:  

<div data-role="page" data-theme="g" class="ui-page ui-body-g ui-page-active" style="min-height: 580px;">

 

正如你所见,ui-page和ui-page-active是根据data-role为page来添加的,而ui-body-g是根据data-theme这个属性添加的。

 

工具栏样式 
在jQuery Mobile框架中,工具栏就是header和footer元素。要定义一个工具栏是header或者footer,你可以使用data-role这个属性。这个属性的值应该是 header 或者 footer。样例如下: 

<div data-role="header">

    <h1>头部标题</h1>

</div>

 

<div data-role="footer">

    <h4>底部</h4>

</div>
 

给工具栏添加样式也是使用data-theme属性,并赋予一个自定义的样式值。例如: 

<div data-role="header" data-theme="g">

    <h1>标题e</h1>

</div>
 
 
 

内容主题 
和上面两个元素类似,我们可以通过以下方式来格式化内容元素: 

<div data-role="collapsible" data-collapsed="true" data-theme="g">

    <h3>标题</h3>

    内容

</div>
 

这个块在页面装载的时候是会收起的,当用户点击标题的时候,才会展示块的内容。 



列表样式 
列表是移动设备页面的常用组件。而把普通的HTML列表转化为触摸设备易于使用的列表,你只需要设置一个data-role属性就行了,例如 

<ul data-role="listview" data-inset="true" data-theme="g">

  <li><a href="#">标题1</a></li>

  <li><a href="#">标题2</a></li>

  <li><a href="#">标题3</a></li>

</ul>
 

列表默认是全屏宽度的, 
 

不过如果你想要使用圆角的话,你可以设置data-insert属性,赋值为true,

 

表单和按钮主题 

使用jQuery Mobile创建表单和正常的网站没有什么区别,添加输入元素,添加标签,这些元素会使用现有的页面样式: 

<div data-role="collapsible" data-collapsed="true" data-theme="g">

  <h3>登陆</h3>

  <form action="" method="post">

    <label for="username">用户名</label>

    <input type="text" name="username" id="username" />

    <label for="username">密码</label>

    <input type="password" name="password" id="password" />

    <fieldset class="ui-grid-a">

      <div class="ui-block-a">

        <button type="reset" data-inline="true">重设</button>

      </div>

      <div class="ui-block-b">

        <button type="submit" data-inline="true" data-theme="g">提交</button>

      </div>

    </fieldset>

  </form>
</div>
 

当然,表单元素也能够被单独定制样式,这里我们还是用“g”这个样式名: 

在上面的两段代码中,你应该发现,fieldset有自定义的按钮,每一个按钮有不同的主题。Reset按钮使用默认主题,而Submit按钮使用f主题。 
 

正如你所见,submit按钮有一个自定义的渐变效果,让这个按钮看起来更显眼。