首页 >web前端 >js教程 >jQueryMobile之Helloworld与页面切换的方法_jquery

jQueryMobile之Helloworld与页面切换的方法_jquery

WBOY
WBOY原创
2016-05-16 16:15:571113浏览

本文实例讲述了使用jQueryMobile实现滑动翻页效果的方法。分享给大家供大家参考。具体分析如下:

jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。就是能够迅速能把页面写成APP的界面,让用户浏览网页,相当于在使用布局好的app一样。

首先要在jQueryMobile(点击此处本站下载)下载一个压缩包,然后把这个压缩包的所有内容拉到你的站点文件夹,虽然在网页仅仅是引用jquery.mobile-1.4.5.js与jquery.mobile-1.4.5.css,但是其他的辅助文件除了说明文档demo文件夹外缺一不可。即使它的js文件与css文件,但它不像Bootstrap一样,把所有功能集成到一个js里面,如果缺乏某些文件夹,某些图标可能无法显示。而且,请把原根文件夹jquery.mobile-1.4.5的名字改成jqmobile或者其他,反正文件夹中别有.-这些标点符号,否则,在网页中引用jquery.mobile-1.4.5.js与jquery.mobile-1.4.5.css可能失效。

同时,jquery.mobile作为一个插件,需要jQuery1.11支持,可以到jQuery官网中下载兼容旧浏览器IE6的jQuery1.11,而不是不兼容旧浏览器IE6的jQuery2。把下载到的jQuery1.11.js也与jQueryMobile的文件放在一起吧。如下图:

之后就可以在网页编写页面,代码如下,详情请看注释。

复制代码 代码如下:
 
 
 
 
a 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
   

Title

 
 
 
 
 
   

中文是没有问题的aaa

 
 
 
 
 
     
 
     
     
           
           
  • a
  •  
           
  • b
  •  
           
  • c
  •  
         
 
   
 
 
  
  
 

于是,就可以写出如下的网页:

其中w3cschool上对于主题的论述有些过时,请注意,最新版本的jQueryMobile的自带主题删得只剩下两种。jQueryMobile的自带图标如下:

在调试的使用,应该使用谷歌浏览器、火狐浏览器等高级浏览器,因为WIN7自带的IE8出现很多兼容性的问题,毕竟这货就是用来写手机页面的,因此别妄想把jQueryMobile运用到电脑页面上去。

希望本文所述对大家的jQueryMobile程序设计有所帮助。

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn