zoukankan      html  css  js  c++  java
  • 【jQueryMobile】Helloworld而页面切换

    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的文件放在一起吧。例如以下图:


    之后就能够在网页编写页面,代码例如以下,详情请看凝视。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>a</title>
    <!--要求自己主动适应屏幕,不同意手机用户自由调整页面尺寸-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="jqmobile/jquery.mobile-1.4.5.css">
    <script src="jqmobile/jquery-1.11.1.js"></script>
    <script src="jqmobile/jquery.mobile-1.4.5.js"></script>
    
    </head>
    
    <body>
    <!--定义一个page容器,全部组件都必须写在里面。要求其填充到整个屏幕-->
    <div data-role="page" data-position="fixed" data-fullscreen="true">
    <!--这就是标题栏,在最新的jqmobile中。自带的主题仅仅删得仅仅剩黑白两色,data-theme="a"为白,data-theme="b"为黑-->
    <!--data-tap-toggle = "false"是禁止用户点击页面内容,也就是content就隐藏页脚-->
      <div data-role="header" data-theme="b" data-tap-toggle = "false">
        <h1>Title</h1>
    
      </div>
    
      <div data-role="content">
        <p>中文是没有问题的aaa</p>
       
      </div>
    
      <div data-role="footer" data-position="fixed" data-fullscreen="true"  data-theme="b" data-tap-toggle = "false">
          <div data-role="navbar">
          <ul>
          <!--让abutton处于凹陷状态。使用info图标,在button中跳转到其他页面,要使用target="_self",否则链接出错-->
            <li><a href="#" class="ui-btn-active ui-state-persist" data-icon="info">a</a></li>
            <li><a href="b.html" target="_self" data-icon="grid">b</a></li>
            <li><a href="c.html" target="_self" data-icon="star">c</a></li>
          </ul>
        </div>
        
      </div> 
    </div> 
    
    
    </body>
    </html>
    

    于是。就能够写出例如以下的网页:


    当中w3cschool上对于主题的论述有些过时,请注意,最新版本号的jQueryMobile的自带主题删得仅仅剩下两种。

    jQueryMobile的自带图标例如以下:


    在调试的使用,应该使用谷歌浏览器、火狐浏览器等高级浏览器,由于WIN7自带的IE8出现非常多兼容性的问题,毕竟这产品是用来写页面的移动电话,所以,不要想象jQueryMobile适用于电脑翻页……

    版权声明:本文博主原创文章,博客,未经同意不得转载。

  • 相关阅读:
    eclipse中如何复制用点分隔的全类名
    win7 64下暗黑世界V1.1 服务器端及客户端的安装及运行 成功
    Firefly Http通信简单介绍
    win7 不能启动 memcached 总是反回failde to start service
    win7 安装 memcached
    memcached完全剖析–1. memcached的基础
    【Firefly API 新版文档】Package dbentrust
    《暗黑世界GM管理后台系统》部署+功能说明
    [官方教程] 暗黑世界 客户端 配置文档
    MAC下《暗黑世界》客户端版本编译说明!!
  • 原文地址:https://www.cnblogs.com/hrhguanli/p/4824257.html
Copyright © 2011-2022 走看看