JQuery Mobile入门

 Jquery mobile构建于Jquery ,为前端开发人员提供了一个兼容所有主流移动设备平台的统一UI接口系统。拥有出色的弹性,轻量化以及渐进增强特性与可访问性    -----摘自jquerymobile中文官方API

      简而言之,Jquerymobile上运行的结果和手机等主流移动设备相同,完全兼容,你的内容在任何设备上都能正常显示。介绍就到这,接下来开始正文。首先从配置开始。

      首先下载Jquerymobile的代码下载地址:http://jquerymobile.com/blog/2013/04/10/announcing-jquery-mobile-1-3-1/ (如图所示下载压缩包)

      

      然后解压缩。随后是一些固定式的操作了,大家直接复制就行了,上代码:

        

 

       <head>
       <metacharset="utf-8">
       <metahttp-equiv='Content-Type' content="text/html;">
       <metaname="viewport"content="width=device-width,initial-scale=1">
       <linkrel="stylesheet"href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
       <scripttype="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
       <scripttype="text/javascript"src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

       </head>

       这样就可以使用这个框架了

       接下来我们写一个基本的网页应用:

       Jquery Mobile中,属性值由data-role指定,首先添加最基本的page

       <div data-role="page" id="page1">

              <h1>First Demo</h1>

       </div>

       加入id可以方便其他链接跳转

       然后写主题内容

       <div data-role="content" >

              <p>first para............</p>

       </div>

       最后可以加上footer,即网站最下面的那个页脚的东西

       <div data-role="footer">

                   <h4>PageFooter</h4>

       </div>

         这就是一个Jquery Mobile的基本元素 

         chrome下运行效果:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值