zoukankan      html  css  js  c++  java
  • 用jQuery Mobile搭建一个简单的手机页面

    1.新增html页面。

    2.声明html5Document。

    3.载入jQuery Mobile Css、jQuery与jQuery Mobile链接库。

    4.使用jQuery Mobile定义的html标准、编写网页架构及内容。

    向网页中添加jQuery Mobile,添加方法如下:

             从CDN引用jQuery Mobile(推荐) 

       <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

       从jQuerymobile.com下载jQuery Mobile库

               从 jQuerymobile.com 下载文件。    

      <link rel=stylesheet href=jquery.mobile-1.3.2.css>
      <script src=jquery.js></script>
      <script src=jquery.mobile-1.3.2.js></script>
    • data-role="page" 是显示在浏览器中的页面
    • data-role="header" 创建页面上方的工具栏(常用于标题和搜索按钮)
    • data-role="content" 定义页面的内容,比如文本、图像、表单和按钮,等等
    • data-role="footer" 创建页面底部的工具栏

    在写移动端的网站的时候, 一定要写一个meta的name为viewport的属性, 因为该属性代表着网站页面的自适应。简单的写法为:<meta name="viewport" content="width=device-width, initial-scale=1">代表着网站为驱动设备的宽度。

    • 控制宽度,可以指定一个宽度值,或输入device-width,表示宽度随着设备宽度自动调整
    • height:控制高度,或输入device-height。
    • initial-scale:初始缩放比例,最小为0.25,最大为0.5。
    • minimum-scale:允许用户缩放的最小比例,最小为0.25,最大为0.5。
    • maximum-scale:允许用户缩放的最大比例,最小为0.25,最大为0.5。
    • user-scalable:是否允许用户手动缩放,可以输入0或者1,也可以是输入yes或no。

    代码示例:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1"><!--自适应页面-->
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">    
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    </head>
    <body>
    <div data-role="page" >
        <div data-role="header">
            <h1>我的网站</h1>
        </div>
        <div data-role="content">
            <p>这是正文部分</p>
            <ul data-role="listview">
                <li data-role="list-divider">我的目标</li>
                <li><a href="http://www.baidu.com">精彩内容即将呈现</a></li>
                <li><a href="http://www.baidu.com">百度一下,就知道</a></li>
                <li><a href="http://www.baidu.com">坚持才能成功</a></li>
            </ul>
        </div>
        <div data-role="footer">
            <h1>这个是页脚文本</h1>
        </div>
    </div>
    </body>
    </html>

    结果页面:

  • 相关阅读:
    java 虚拟机启动参数[转]
    Android SDK Manager 无法下载更新,或者更新速度超慢,或者待安装包列表不显示
    fluentnhibernet auto mapping
    取消sqlserver 锁表
    TFS 2010 配置的时候,提示TF255466错误
    doc中文乱码的解决方法 中英文切换
    silverlight 读取wcf服务 读取宿主端的config 良好的方法
    dojo+js+html5学习网址
    win 7 64位 配置silverlight 32位的应用程序(sl网站)
    HTTP协议及其POST与GET操作差异 & C#中如何使用POST、GET等
  • 原文地址:https://www.cnblogs.com/benefitworld/p/5462739.html
Copyright © 2011-2022 走看看