zoukankan      html  css  js  c++  java

  • （二）Jquery Mobile介绍以及Jquery Mobile页面与对话框

    Jquery Mobile介绍以及Jquery Mobile页面与对话框 

    一、 Adobe Dreamweaver CS6 环境

          最新版本的cs6会支持JM的使用，有自动提示功能，很强大。
    安装说明地址：http://www.phonegap100.com/article-79-1.html 
    下载地址说明：http://bbs.phonegap100.com/thread-135-1-1.html 

    二、JM说明

          默认data-ajax="true"jquery mobile 是默认通过ajax切换页面的

          1、Jquery Mobile页面的基本组成 
            <meta name="viewport" content="width=device-width" /> 
            通常情况移动设备以900px的宽度显示页面,加上这句话,可以使页面的宽度与移动设备的屏幕宽度相同
            需要引用的文件有：
            
    1
    2
    3
    <linkhref="Css/jquery.mobile-1.0.1.min.css"rel="Stylesheet"type="text/css"/>
    <scriptsrc="Js/jquery-1.6.4.js"type="text/javascript"></script>
    <scriptsrc="Js/jquery.mobile-1.0.1.js"type="text/javascript"></script>

           2、JM主要标签说明

            

    1
    2
    3
    4
    5
    <div   data-role="page">
      <div   data-role="header">头部</div>
      <div   data-role="content">被容</div>
      <div   data-role="footer">底部</div>
    </div>

    第一个实例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    !DOCTYPEhtml>
    <html>
    <head>
    <title>jQuery Mobile 页面框架</title>
    <metaname="viewport"content="width=device-width"/>
      <metacharset="utf-8">
    <linkhref="Css/jquery.mobile-1.0.1.min.css"
    rel="Stylesheet"type="text/css"/>
    <scriptsrc="Js/jquery-1.6.4.js"
    type="text/javascript"></script>
    <scriptsrc="Js/jquery.mobile-1.0.1.js"
    type="text/javascript"></script>
    </head>
    <body>
    <sectionid="page1"  data-role="page">
    <header  data-role="header"><h1>标题</h1></header>
    <div data-role="content"class="content">
    <p>这是内容</p>
    </div>
    <footer data-role="footer"><h1>这是底部</h1></footer>
    </section>
    </body>
    </html>


    3、跳转

          第一种：<a href="#page">返回主页</a> 将跳转到id=page的div上

          第二种：与普通的html跳转相同，<a href="index2.htm">第 2 页</a> 

    4、对话框    

          通过设置data-rel="dialog"，来打开一个对话框。 

          <a href="foo.html" data-rel="dialog">Open dialog</a> 

    <a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a> 

    属性可选值：

    1
    pop（默认）, fade，flip，turn，flow，slidefade，slide，slideup，slidedown，none
  • 相关阅读:
    寻找SQL注入点
    根域名服务器
    Solr 文章集成
    Android事件分发机制
    王自如与老罗的辩论赛谁赢了?!
    ACdream原创群赛(13)のwuyiqi退役专场 C True love
    使用JS对select标签进行联动选择
    c++代码赏析之类对象传參
    基因治疗的现状
    解决手机訪问站点时总体相对屏幕缩小问题？（已解决）
  • 原文地址：https://www.cnblogs.com/wang3680/p/4d31e423b5f35215028d4a6f721a0eef.html
Copyright © 2011-2022 走看看