• jquery mobile -role


    data-page 页面

    data-header 页面的头部

    data-content 页面的内容

    data-footer 页面的页脚

    data-navbar 定义一个导航条,一般位于header中

    data-button 渲染为一个可视化的按钮

    data-controlgroup  渲染一个组件

    data-collapsible-set 一组可折叠的内容面板

    data-filedcontain  用于表单-域的容器

    data-listview 由多项内容组成的列表

    data-dialog 对话页面

    slider 用于布尔值的可视化滑块

    data-nojs 在兼容jquery mobile的浏览器上会被隐藏的元素

    1.jquery mobile的首页不能增加后退按钮,http://stackoverflow.com/questions/13662696/data-add-back-btn-true-doesnt-work

    2.跳转页面后js失效可能是没有添加下面的某一项:一:data-rel="external"  二:target="_blank"  三:data-ajax=“fasle”

    3.添加logo:在header中,在h1中使用img标签比较好<h1><img src=""/></h1>

    4.导航栏(navbar) 导航栏只是一个容器,通常为一个div元素,内容为一个包含各个导航链接的无序列表。导航栏上被选中的元素用ui-btn-active标识(class="ui-btn-active")。使用固定页脚的导航栏时,要在选中项上加上两个类:class="ui-btn-active ui-state-persist".

    5.可折叠内容,:<div data-role="collapsible" data-collapsed="false"><h2></h2><p></p></div>打开折叠块的内容; <div data-role="collapsible" data-collapsed="true">是收缩折叠区的内容。在折叠容器中没有定义hX元素,则内容将处于打开状态且不能收起,如果定义多个hX元素,则第一个会被当做标题,其他的将被渲染为内部的内容。

    6.可折叠内容也可嵌套,不过最好不要超过两级的嵌套。

     <div data-role="collapsible" data-collapsed="true">
                        <h2> 一级嵌套</h2>
                        <div data-role="collapsible">
                            <h3>二级嵌套 </h3>
                        <p>hsajdoajdpajfapjspjadfpasjfpasjfjsaiojfsalshalsjlalsjf ajajsf;sjaf ajsfjafls 
                        </p>
                        </div>
                    </div>
    

    7.手风琴部件, <div data-role="collapsible-set">放一些可折叠的标题和内容</div> 当打开其中一个折叠项时,其它折叠项将关闭。

    8.类ui-grid-a表示两列,ui-grid-b表示三列,ui-grid-c表示四列,ui-grid-d表示五列。用来布局网格,采用平铺排版。

    9.按钮,1:使用button元素,2:使用会被渲染为按钮的input元素,包括type="button",type="submit",type="reset" 以及type="image" ,3:任何带有data-role="button"的a元素。给id=btn的标签添加跳转属性$("#btn").attr('href', 'http://www.baidu.com/');<a href="" id="btn" data-role="button" data-inline="true"> <img src="../img/1.jpg" alt="Alternate Text" /></a>

    <a href="http://www.baidu.com/" onclick="location='http://www.google.cn/';alert(location.href);">去百度</a> 
    <a href="#" onclick="location='http://www.google.com.hk/';alert(location.href);">去谷歌</a>

    10.内联按钮,data-inline="true" 

    11.分组按钮

    12.data-role="list-divider"  和  data-role="listview"联合起来一起用是用一行区分不同的列表

  • 相关阅读:
    windows10环境运用SSH和SwitchySharp自由翱翔
    Windows10 Virtualization Technology虚拟化技术功能
    [转]docker 基本原理及快速入门
    通俗易懂介绍机器学习与深度学习的差别
    对于python setup.py install安装的包如何卸载
    在Ubuntu上安装boost库[转]
    word2vec相关资源
    ubuntu16.04 LTS Server 安装mysql phpmyadmin apache2 php5.6环境
    tmux配置与用法整理
    Oracle学习笔记:LOB大数据字段类型
  • 原文地址:https://www.cnblogs.com/cc-jony/p/3378811.html
Copyright © 2020-2023  润新知