- 浏览: 204697 次
文章分类
- 全部博客 (224)
- jsp (5)
- jsf (7)
- web (11)
- js (12)
- COBOL (5)
- php (7)
- jconsole (1)
- java (11)
- ajax (1)
- PHP魔法方法 (1)
- 项目管理工具 (3)
- 项目管理 (2)
- svn (8)
- redmine (1)
- mysql (4)
- qrcode,php (1)
- qrcode (1)
- 多进程 (3)
- html (1)
- excel (2)
- seasar2 (1)
- db (1)
- entity (1)
- IOS8 (1)
- SWIFT (1)
- 正则表达式 (1)
- RabbitVCS (1)
- url (1)
- thinkphp (2)
- c++ (5)
- win32 API函数 (1)
- htaccess (1)
- makefile (3)
- C/C++ (12)
- Linux (1)
- miui (2)
- unix (1)
- wechat (1)
- websocket (1)
- SpringMVC (3)
- VSAM (1)
- centos (2)
- wamp (1)
- server (1)
- 优酷视频上传并去除广告 (1)
- owncload (1)
- cloud (1)
- ubuntu (1)
- pdf转换成word (1)
- 微信,weixin (1)
- 行业系统 (3)
- 超级外卖源代码 (0)
- 软件专利 (1)
- 申请 (1)
- vba (1)
- UML (1)
- 程序切片 (1)
- 股票心得 (1)
- 威客建站 (1)
- 微信开发学习路线 (1)
- 远程开机 (1)
- spring mvc (1)
- JEECMS (1)
- Node.js (1)
- ThinkJS (1)
- maven (2)
- MyEclipse+Tomcat+MAVEN+SVN (1)
- Spring+SpringMVC+MyBatis (1)
- wampserver (0)
- RESTful (1)
- hibernate (4)
- Spring+SpringMVC (1)
- 响应式布局 (1)
- 响应式布局模板 (1)
- Aptana (3)
- 遗传算法 (1)
- 进化算法 (1)
- bower (1)
- HTML5 (1)
- Android官方培训课程 (1)
- MySQL锁 (1)
- 扫描枪 (1)
- 微信公众平台 (1)
- 企业号 (1)
- ddns (1)
- java获取外网ip (1)
- DDNS,阿里云,云解析,万网域名,阿里云域名 (1)
- SEO (1)
- Jboss (2)
- wildfly (1)
- WildFly8 (2)
- NT Kernel (1)
- 反向代理 (1)
- Spring嵌套事务 (1)
- apache (3)
- 防止浏览器记住用户名及密码的简单实用方法 (1)
- 时间戳 (1)
- 字体 (1)
- 网络爬虫准 (1)
- 屏蔽后退按钮 (1)
- java web (1)
- JavaMail (1)
- windows服务 (1)
- Freemarker (1)
- TortoiseGit (2)
- oschina (1)
- JSON (1)
- Boost (1)
- MUI (1)
- github (1)
- Python2.7 (1)
- Python3.0 (1)
- Odoo (1)
- java socket (1)
- OpenERP (2)
- werkzeug (1)
- JNA (2)
- proxifier (1)
- WebService (1)
- 企业应用集成 (1)
- vmware (1)
- Navicate (1)
- 三体 (1)
- oracle同步 (1)
- 微信 (3)
- java设计模式 (1)
- 工具 (1)
- JavaScript跨域 (1)
- LB (1)
- 负载均衡 (1)
- AngularJS (1)
- HBuilder (1)
- Echarts (1)
- Json Web Token (1)
- PassportSDK (1)
- ubuntu kylin xterm 乱码 (1)
- ubuntu kylin17 安装字体教程 (1)
- wps (1)
- jetbrains (1)
- MySQL5.7 (1)
- Nginx (1)
- JDK (1)
最新评论
-
cuiyadll:
谢谢楼上的推荐
实战:jQuery Mobile开发HTML5移动应用 -
marty:
使用JQueryMobile,推薦使用這免費開發工具,提供可視 ...
实战:jQuery Mobile开发HTML5移动应用 -
men_clslji:
按照目前的方法只是防止刷新页面时不再执行X(添加),而toke ...
有了上一篇博文,类似地顺便说说表单防重复提交。
引自: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属性进行定义,下面的代码中就显示了一个主体页面的框架:
而另外一个建议使用的元素是标签,这个标签的作用是指定浏览器以何种方式在手机上显示网页,代码如下:
<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样式,下面代码就是浏览器在执行代码后返回生成的代码:
可以看到,其中的样式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的CSS样式。
因此,只要掌握了这种方法,开发者就可以对页面中的各类元素进行样式的定义了,十分方便。
工具栏样式的定义
在jQuery Mobile框架中,工具条属于页面的头部和底部元素。为了将工具条定义为头部或者底部,可以使用data-role属性去指定,如下代码所示,表示在一个页面中同时定义了头部的工具栏和底部的工具栏:
同样,为页面的头部和底部指定一个样式也是很简单的,也是利用data-theme属性,如下代码所示:
为此,需要创建一个CSS样式,如下:
就是说,新创建的这个样式是装饰所有的data-theme为F的页面元素。然而,有的时候,可能需要页面的底部使用不同的样式,那么可以另外在新建一个名为g的样式,创建的代码如下:
在这个样式中,设置了一些基本的CSS3属性外,还为不同的浏览器设计了不同的背景颜色和相关的渐变背景,更详细的关于CSS3 渐变背景的设置请参考相关资料。
内容的主题样式
接下来,我们学习下在内容页部分,是如何应用主题样式的。例子代码如下:
注意,在这里,使用了data-role属性的值为collaspsible,表明这个页面的div是一个可折叠的层,并且设置了data-collapsed属性为true,其效果为当页面加载时,显示的是折叠状态,而当用户点标题栏时,才会显示登陆的表单。同样,在data-theme属性中设置样式为f,其样式定义如下:
在上面的这段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即可,如下代码所示:
默认的样式如下图所示:
列表样式开发
如果要上面的列表实现圆角效果的话,可以增加data-inset属性,并将其属性值设置为true即可,如下效果图,出现了圆角:
列表样式开发
同样,为列表增加样式也十分简单,只需要设置data-theme属性的值为样式的名称即可,比如同样增加样式f,定义样式f如下:
这里,设定了文字的颜色为白色,并且使用ui-btn-up-f,ui-btn-down-f,ui-btn-hover-f设置了列表选项的三种不同状态(up,down,hover)。
表单及按钮的主题样式
在jQuery mobile中,增加表单及按钮,其实跟普通的网页中增加差不多,只需要增加相关的input标签元素或button标签元素即可,代码示例如下:
同样,我们指定表单的样式如下:
这里我们在上文中已经谈到,即将输入文本框和密码框都使用f样式,在上面的代码中,请留意
标签一段,其中分别对两个按钮使用了不同的样式,对于RESET按钮,
使用的是默认的jQuery mobile的样式,而对submit按钮,则使用的是data-theme=f的样式,
最后看下f样式的css代码定义,如下:
本文的代码可以在如下这个连接下载(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自定义样式的内容,请参考其官方网站的文档指引。
随着移动互联世界的到来,目前已发展到多种移动操作系统割据的局面,而开发者则急需要能运用原有的开发知识和技能,快速方便地构建移动应用程序,并期望能运行在不同的手机操作平台上,比如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自定义样式的内容,请参考其官方网站的文档指引。
评论
2 楼
cuiyadll
2014-07-14
谢谢楼上的推荐
1 楼
marty
2014-05-06
使用JQueryMobile,推薦使用這免費開發工具,提供可視化JQueryMobile元件拖拉,拖拉後可自動寫源代碼,而且還可以修改源代碼調整畫面,方便又好用
http://jqmdesigner.appsp0t.com
相關教學與資源
http://www.ezoui.com/app
http://jqmdesigner.appsp0t.com
相關教學與資源
http://www.ezoui.com/app
发表评论
-
JS引号的输出办法
2016-03-17 11:24 650你可以在 JavaScript 中使用反斜杠来向文本字符串 ... -
Office在线预览及PDF在线预览的实现方式大集合
2015-12-24 17:30 1035一、服务器先转换为P ... -
MyEclipse安装JS代码提示(Spket插件)
2015-11-09 15:39 792近期需要大量使用JS来开发,但是MyEclips ... -
利用HTML5的一个重要特性 —— DeviceOrientation来实现手机网站上的摇一摇功能
2014-07-10 19:34 730介绍:http://www.codesky.net/artic ... -
分享一个有趣的js代码(手机摇一摇切换网页背景色)
2014-07-10 19:32 919引用<script type="text/ja ... -
几个功能强大的php函数
2014-02-07 13:32 765这些函数简单但是又非常重要,先收藏再说吧,你总有用得着的时候 ... -
JS之Window对象
2014-02-07 00:23 754一.说明:他是JS中最大的对象,它描述的是一个浏览器窗口,一般 ... -
jquery 中的 $(“#”) 与 js中的document.getElementById(“”)
2014-02-06 22:19 870以前没注意过,认为jquery 中的 $("#&qu ... -
js中setInterval与setTimeout用法
2014-02-06 13:06 661setTimeout 定义和用法: setTimeou ... -
js的Prototype属性 解释及常用方法
2014-02-06 13:05 399函数:原型 每一个构造函数都有一个属性叫做原型(prototy ... -
弹出窗口(window.open)被各种浏览器拦截的通用处理方法
2013-08-27 15:56 977所有种类的浏览器基本都默认拦截弹出窗口,也就是说(window ...
相关推荐
jQuery Mobile是目前*流行的跨平台移动开发框架,本书以实例驱动讲解的方式,让零基础的读者也能轻松掌握jQuery Mobile下的应用开发。本书分为4篇,*篇是移动开发入门篇,介绍了jQuery Mobile、HTML 5和移动开发的...
4. **多媒体支持**:HTML5的音频和视频标签,使得在jQuery Mobile应用中嵌入多媒体内容变得容易。 5. **Canvas与SVG**:这两种图形绘制技术,可用于创建动态图表、游戏或其他复杂的视觉效果。 **三、学习jQuery ...
**jQuery Mobile:构建跨平台APP的移动应用实战代码** jQuery Mobile 是一个强大的前端框架,专为构建触屏优化的移动应用程序而设计。它基于 jQuery 库,提供了丰富的 UI 控件和响应式布局,使得开发者可以轻松创建...
构建跨平台APP-jQuery.Mobile移动应用实战
【标题】"使用jQuery Mobile快速开发手机站点"揭示了如何利用jQuery Mobile这一强大的前端框架来构建适应移动设备的Web应用。jQuery Mobile是一个轻量级、跨平台的框架,专为触摸优化的移动设备设计,提供了丰富的UI...
**jQuery Mobile 移动开发源代码详解** ...总之,"jquery-mobile移动开发源代码"是一份宝贵的教育资源,可以帮助开发者快速掌握 jQuery Mobile 的基本用法和最佳实践,从而打造流畅、美观的移动 Web 应用。
《图灵程序设计丛书:jQuery Mobile即学即用》着眼于移动Web应用开发实战,从应用结构和导航开始,分门别类地介绍了jQueryMobile为开发人员准备好的各种界面部件,包括列表视图、工具条、按钮、表单、网格布局等,还...
jQuery Mobile是一款专为触摸设备设计的前端框架,它基于jQuery库,简化了跨平台的移动Web应用开发。通过使用HTML5和CSS3,jQuery Mobile提供了一套统一的用户界面(UI)组件和交互模式,使得开发者可以快速创建功能...
jQuery Mobile 是一个流行的前端框架,专为移动设备设计,旨在简化移动Web应用的开发。这个源码包提供了一手的学习资料,让我们深入理解jQuery Mobile的工作原理及其在实际项目中的应用。 首先,jQuery Mobile的...
《jQuery Mobile电子书及实战代码》是一份针对前端开发者,特别是对移动Web开发感兴趣的程序员的宝贵资源。jQuery Mobile是一款强大的JavaScript库,专为构建响应式、触摸友好的移动Web应用程序而设计。它基于HTML5...
《响应式网页开发实战》教学教案的第9章聚焦于jQuery Mobile样式,这是一门针对前端开发者的重要技术,尤其在创建交互式、响应式的移动Web应用时。jQuery Mobile是一个轻量级的框架,它简化了HTML和CSS的使用,使得...
《jQuery Mobile 快速入门》是一本针对初学者和开发者设计的指南,旨在帮助读者迅速掌握使用jQuery Mobile框架创建响应式、触摸友好的移动Web应用的技能。jQuery Mobile是jQuery库的一个扩展,专为移动设备优化,...
本书以HTML与CSS为主,配合jQuery制作网页,并搭配jQuery Mobile制作移动网页,通过具体的范例从基础到高级循序渐进地讲解。全书首先介绍了HTML5网页开发和CSS网页美化,只要按本书的顺序学习,就能够轻松掌握网页...
HTML5、CSS3和jQuery Mobile是现代Web开发中的三大核心技术,它们共同为构建功能丰富的APP与移动网站提供了强大的支持。本书“HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站”由陈婉凌编著,由清华大学出版社于...
通过以上分析可以看出,《掌握移动Web应用开发:使用jQuery Mobile》这本书不仅提供了丰富的理论知识,还包含了实用的开发指南和实战案例,非常适合想要深入学习jQuery Mobile及其在移动Web应用开发中应用的读者。
jQuery Mobile 是一款基于 HTML5 的移动 Web 应用框架,由 jQuery 团队创建。它提供了丰富的 UI 组件、样式和交互功能,使开发者能够轻松地为各种触摸设备(如智能手机和平板电脑)构建美观且功能强大的应用程序。 ...
《jQuery Mobile实战》是陶国荣先生撰写的一本专业书籍,专注于讲解如何使用jQuery Mobile这一强大的前端框架来构建响应式、触屏友好的移动Web应用。这本书的源码提供了丰富的示例,对于初学者来说是极其宝贵的参考...
书中的源码部分则为读者提供了动手实践的机会,通过解压并研究`jQueryMobile权威指南源码.zip`,读者可以将理论知识应用于实际,进一步提升技能。 总之,《jQuery Mobile权威指南》是学习和掌握jQuery Mobile的宝贵...