jQuery Mobile+Html5开发手机端网站感想与总结-(初)

看jQuery Mobile相关方面的东西,看了几天,发现,其实除了里边默认的图标、主题、以及点击后跳转的效果之外,其他的东西,和普通的html页面一样。

jQuery Mobile注意事项:

1、新的页面开始,标注:data-role=“page”

2、页面中的角色:data-role=“header”,其中的header、footer、navbar等,对应的css中,均为:ui-header、ui-footer、ui-navbar等。

3、页面中的图标,若想要自定义图标,则需要定义一个其他的data-icon的值,例如:页面中就可以这样写 data-icon="send-msg",css文件中,需要我们定义:ui-icon-send-msg{ background:url(../images/msg16.png);}

相当于ui-icon-加上你指定的data-icon就是对应css中的class值。

4、页面链接同html一样。

5、其他的样式修改,就很繁琐了,需要多次检查,因为一个地方的样式修改可能会牵扯很多地方的变动。

时间: 2024-09-30 16:01:06

jQuery Mobile+Html5开发手机端网站感想与总结-(初)的相关文章

PhoneGap与Jquery Mobile组合开发android应用的配置

PhoneGap与Jquery Mobile结合开发android应用的配置 由于工作需要,用到phonegap与jquery moblie搭配,开发android应用程序. 这些技术自己之前也都没接触过,可以说是压根没听说过,真是感慨,在开发领域,技术日新月异,知识真是永远学不完的.就算是做java开发的,可是细分下来,专业方向还是很多的:自己没有涉及的技术还是太多了,自个需要对单个领域专业点,知识丰富点.做不了全才,那咱做个专才,在如今社会还是必须的. 好了,咱们言归正传: PhoneGap

(转)jQuery Mobile 移动开发中的日期插件Mobiscroll 2.3 使用说明

(原)http://www.cnblogs.com/hxling/archive/2012/12/12/2814207.html jQuery Mobile 移动开发中的日期插件Mobiscroll 2.3 使用说明 近期在移动方面的开发,使用jQuery Mobile ,移动方面的插件不如Web 方面的插件多,选择的更少,有一些需要自己去封装,但功力尚不足啊. 日期插件JQM也提供了内置的,但样式方面不好看,只好百度.Google啦,找到了两款 jquery-mobile-datebox 和 

将PC端的网站转化成手机端网站需要增加以下这段代码即可,再布局一下界面即可

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> 将PC端的网站转化成手机端网站需要增加以下这段代码即可,再布局一下界面即可,布布扣,bubuko.com

jQuery Mobile + HTML5

最近项目需要,需要构建一个适合手持设备访问的站点,作者从网上查阅了一些资料,本文就是基于此而来. 首先下载jQuery Mobile http://jquerymobile.com/,选择稳定版即可. 打开VS 2013,新建一个Web Project,删除一些不必要的东西,如Default.aspx页面,添加对jQuery Mobile js和css的引用 新建一个HTML页面,并编码如下 <!DOCTYPE html> <html xmlns="http://www.w3.

jQuery Mobile 移动开发中的日期插件Mobiscroll使用说明

近期在移动方面的开发,使用jQuery Mobile ,移动方面的插件不如Web 方面的插件多,选择的更少,有一些需要自己去封装,但功力尚不足啊. 日期插件JQM也提供了内置的,但样式方面不好看,只好百度.Google啦,找到了两款 jquery-mobile-datebox 和 mobiscroll-2.3 jqueryMobileDatebox 这个在板上的表现不好,性能方面有点卡 mobiscroll 性能方面比前者要好一些,效果更简洁 ,划动更流畅 放在一起对比下 各位看官,你们觉得哪个

用jQuery.touchSwipe插件实现手机端场景滑动切换效果

使用jQuery的touchSwipe插件监听触摸滑动事件,结合css3实现手机端场景滑动切换效果.最好在手机端测试代码,也可以在PC端用鼠标点击模拟滑动. 1.html代码: <div class="container"> <div class="page page0 page_current"> <h1>你好,我是0号屏幕,第一屏,鼠标单击向下/向上拖动</h1> </div> <div clas

jQuery Mobile移动开发

1.在<head>元素中包含JavaScript文件是传统的方法.然而,根据Yahoo!"80%的最终用户响应时间在前端上"的说法,这些事件大部分花在资产的下载上,例如样式表,图片,脚本等.减少这些资产的数量明显很重要,在HTML文件的最后包含JavaScript也变得更加常见.这是因为脚本阻止并行下载,也就是说其他资产在每个脚本单独下载完之前无法下载.为了确保脚本放在正确的位置,在</html>结束标记之前包含它. 2.注意:创建自定义 data- 属性的唯一

jquery支持PC端手机端幻灯片代码

分享一款支持PC端手机端幻灯片代码是一款支持移动触摸,支持鼠标拖拽切换,支持带进度条的自动播放模式.交果图如下 : 在线预览   源码下载 实现的代码. html代码: <div class="flex"> <ul class="slides"> <li data-title="Slide 1"> <img alt="" src="img/beasts_feature.jpg

[js开源组件开发]-手机端照片预览组件

手机端照片预览组件 可怜的我用着华为3C手机,用别人现成的组件都好卡,为了适应我这种屌丝,于是自己简化写了一版的照片预览效果,暂时无缩放功能,以后可能有空再加吧,你也可以自己加下,这是个github上的开源项目.它的github地址是:https://github.com/tianxiangbing/mobile-photo-preview 下面是预览图,它的完整demo请点击这里手机端照片预览组件demo 使用方法案例: var photoPreview = new MobilePhotoPr