zoukankan      html  css  js  c++  java
  • jqmobile

    标准页面结构

    <!DOCTYPE html> 
    <html> 
    <head> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="jquery.mobile-1.0a3.min.css" /> 
    <script type="text/javascript" src="jquery-1.4.3.min.js"></script> 
    <script type="text/javascript" src="jquery.mobile-1.0a3.min.js"></script> 
    </head> 
    <body> 
    <div data-role="page"> 
     <div data-role="header"> 
      <h1>Page Title</h1> 
    </div><!-- /header --> 
    <div data-role="content"> 
     <p>Page content goes here.</p> 
    </div><!-- /content --> 
    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div><!-- /footer --> 
    </div><!-- /page --> 
    </body> 
    </html>

    ---------------------------------------

    data-role=...
    page header content footer   navbar list-divider

    fieldcontain button controlgroup listview slider(<select>)

    collapsible  collapsible-set

    none//保持原生html元素的外观 jqm不做渲染

    ------------------------------
    data-role=controlgroup data-type=horizontal

    data-role=listview data-filter=true data-inset=true/false

    data-inline=true/false

    data-position=inline/fixed
    data-role=header data-position=inline data-backbtn=false

    data-theme=a/b/c..
    data-content-theme=a/b/c..

    data-icon=delete/check/arrow-l/arrow-r/arrow-u/arrow-d/plus/minus/gear/grid/star/alert/info/home...
    data-iconpos=right/top/bottom/notext(隐藏文字) 默认left

    data-transition=slide/pop/slideup/slidedown/fade/flip

    data-role=collapsible data-collapsed=true/false

    data-role=listview data-split-icon=delete data-split-theme=a/bc..

    data-role=page data-direction=reverse

    data-rel=dialog //模态对话框

    data-back-btn-text="previous"

    $.mobile.page.prototype.options.backBtnText = 'previous';


    ---------------------------------
    .ui-grid-a
    .ui-grid-a > .ui-block-a + .ui-block-b
    .ui-btn-active
    .ui-bar
    <div data-role="footer" class="ui-bar"><a>..</a></div>
    -----------------------------------
    $('.ui-dialog').dialog('close');
    $('ul').listview('refresh');

    $('body').bind('taphold',function(){..});
    $('body').bind('swipe', function(){...});

    -----------------------------------------------------------------------------------------

    定义页面切换动画

    data-transition=slide/slideup/slidedown/pop/fade/flip

    data-rel="dialog" //打开模态对话框

    $('.ui-dialog').dialog('close'); //关闭模态对话框

    data-backBtn="false" //阻止后退按钮的自动创建

    data-back-btn-text="previous" //定义后退按钮的文本
    $.mobile.page.prototype.options.backBtnText="previous";

    data-iconshadow=false / $('a').buttonMarkup({iconshadow:'false'});
    data-shadow="false" //可让按钮没阴影

    改变表单中按钮的初始化选择器 默认为button, [type=button], [type=submit] , [type="reset"], [type=image]
    $.mobile.button.prototype.options.initselectors = ".mybtn";

    data-type="horizontal"

    data-id=""

    data-role="navbar" //导航条组件可1行容纳5个按钮

    class=ui-bar/ui-btn-active
    class=ui-btn-right/ ui-btn-left

    data-inline=true //让按钮变为自适应宽度的
    data-theme=a/b/c/d...
    data-content-theme=a/b/c..

    data-inset="true"
    data-filter="true"

    html5新控件 range: <input type="range" value="20" min="0" max="100" />

    data-url=""
    data-title=""

    data-corners="true" //圆角 或者 $('a').buttonMarkup({corners:'true'});

    启用和禁用按钮
    $("[type='submit']").button('enable');
    $("[type='submit']").button('disable');

    更新一个按钮 所有表单元素都有这个方法refresh
    $('[type=submit]').button('refresh');

    jquery mobile 会把同一个域下所有指向页面的链接都转换为ajax请求 并用动画效果做切换
    指向别的域的链接 或 rel="external" 或 data-ajax="false" 或包含target=""的链接不会通过ajax方式加载 页面整体刷新

    为节省空间工具栏中的按钮都是内联的

  • 相关阅读:
    在Eclipse上实现简单的JDBC增删查改操作
    Java学习路线:day12 面向对象(中)
    Java学习路线:day11 客户信息管理软件
    Android个人手机通讯录开发详解
    解决:keeps stopping(停止运行)
    Java学习路线:day10 面向对象(上)3
    2020最新版大数据学习路线
    Java学习路线:day9 面向对象(上)2
    一个简单的ASP登录页面
    Python笔记_第四篇_高阶编程_检测_2.对类进行单元检测
  • 原文地址:https://www.cnblogs.com/stephenykk/p/3821647.html
Copyright © 2011-2022 走看看