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”这个样式名:
正如你所见,submit按钮有一个自定义的渐变效果,让这个按钮看起来更显眼。
相关推荐
《Ofbiz快速开发入门详解》是一本针对初学者的指南,旨在帮助读者迅速掌握Ofbiz框架的基本使用和开发技巧。Ofbiz,全称Open For Business Project,是一个开源的企业级应用框架,主要用于构建复杂的业务应用程序。它...
至于"hello"文件,它可能是一个简单的示例项目,用于演示如何在OFBiz中创建并运行一个基本的服务或页面。 总的来说,学习OFBiz开发需要对Java、XML、Web服务和数据库有基本的了解。通过这个快速入门指南,开发者将...
《Ofbiz开发入门总结》 Ofbiz,全称Open For Business Project,是一个开源的企业级应用框架,主要用于构建复杂的电子商务和企业管理系统。它基于Java技术,提供了丰富的组件模型和灵活的业务流程,使得开发者能够...
OFBIZ 初学者入门必看文档 英文的 Apache OFBiz Development The Beginner's Tutorial Using Services, Entities, and Widgets to build custom ERP and CRM systems
在本教程中,我们将深入探讨如何入门Apache Ofbiz的开发,这是一个开源的企业级应用框架,专为电子商务、供应链管理和企业资源规划等业务流程设计。Ofbiz提供了强大的组件化架构,使得开发者可以方便地构建和扩展...
如果页面能够正常打开,表明OFBiz已成功部署。 **五、OFBiz项目结构** OFBiz的目录结构分为多个部分,包括`.classpath`、`.project`等用于IDE集成的文件,以及`ant`、`build.xml`等构建相关的文件。最重要的是`...
《OFBiz经典入门教程加速度编写》是一篇针对开源企业应用框架OFBiz的入门教程,旨在帮助初学者快速掌握OFBiz的基本使用和开发技巧。OFBiz(Open For Business Project)是一个全面的企业级业务应用程序框架,它由...
本篇文章将探讨的是OFBiz的开发入门,特别是关于CmsBackEnd如何实现CRUD操作,即创建(Create)、读取(Retrieve)、更新(Update)和删除/Delete。 首先,理解OFBiz的基本架构至关重要。OFBiz采用Service Engine、Entity...
**OFBIZ 10.04 组件开发入门** OFBIZ,全称为Open For Business Project,是一个基于Java的企业级应用框架,主要用于构建电子商务、供应链管理、CRM等复杂业务系统。本文档主要针对OFBIZ 10.04版本,通过讲解Region...
本教程将带你逐步了解如何入门OFBiz,以及如何在OFBiz环境中进行基本的CRUD(创建、读取、更新、删除)操作。 首先,你需要从官方下载页面获取OFBiz的最新版本,例如12.04.02,并将其解压缩到本地文件夹,如F:\...
6. **Web界面(GUI)设计**:使用Ofbiz的屏幕组件和页面模板创建用户界面,学习导航和页面布局。 7. **工作流(Workflow)和事件(Event)处理**:掌握Ofbiz的工作流程引擎,以及事件驱动的编程模式。 8. **国际化...
### Ofbiz 入门使用教程 #### 一、Ofbiz 概述 Ofbiz(Open For Business)是一款开源的企业级商务应用框架,旨在提供一套全面的解决方案,支持各种类型的业务需求,尤其是电子商务领域。该框架集成了众多优秀的...
通过XML文件定义数据库表结构,Ofbiz 可以自动在数据库中创建表,并动态生成对应的对象,开发者仅需关注对对象的操作,而无需关心底层数据库的细节。Ofbiz 的这一特性使得开发者能够用相对较少的代码完成复杂的业务...
Apache OFBiz全称是The ApacheOpen For Business Project。是开放的电子商务平台,是一个非常著名的开源项目,提供了创建基于最新的J2EE/XML规范和技术标准,构建大中型企业级、快平台、跨数据库、跨应用服务器的...
### Ofbiz入门详解 #### Ofbiz简介 Ofbiz(Open For Business)是一个开源的商务软件系统,由Apache软件基金会维护,旨在提供一个完整的电子商务解决方案。它整合了多个优秀的开源项目,如Tomcat、Ant、BeanShell...
### Ofbiz 入门教程详解 #### 一、Ofbiz 概述与环境搭建 **1. Ofbiz 简介** Ofbiz 是一个开源的企业级应用框架,它提供了全面的功能来支持电子商务业务流程,包括销售、库存管理、订单处理等。作为 Apache 软件...
OFBiz开发快速入门.rar OFBiz-技术文档.rar OFBiz API中文版.rar Apache OFBiz Cookbook Sep 2010.rar Opentaps widget使用说明.rar OFBiz.Development.2008.rar Groovy中文教程.rar freemarker中文手册.rar ...