草庐IT

jQuery Mobile 面板

runoob 2023-04-07 原文

jQuery Mobile 面板

jQuery Mobile 中的面板会在屏幕的左侧向右侧划出。

通过向指定 id 的 <div> 元素添加 data-role="panel" 属性来创建面板。

在 <div> 中添加 HTML 标记来显示你的面板内容:

<div data-role="panel" id="myPanel">
  <h2>面板标题..</h2>
  <p>文本内容..</p>
</div>

注意: panel 标记必须置于头部、内容、底部组成的页面之前或之后。

要访问面板,需要创建一个指向面板 <div> id 的链接,点击该链接即可打开面板:

<a href="#myPanel" class="ui-btn ui-btn-inline">打开面板</a>

简单的面板实例

实例

<div data-role="page" id="pageone">
  <div data-role="panel" id="myPanel">
    <h2>面板头部..</h2>
    <p>面板内容..</p>
  </div>

  <div data-role="header">
    <h1>标准页面头部</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>点击下面按钮打开面板。</p>
    <a href="#myPanel" class="ui-btn ui-btn-inline">打开面板</a>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div>

尝试一下 »

关闭面板

你可以通过点击面板外部区域或按下 Esc 键或滑动来关闭面板。你可以通过使用 data-* 属性来禁用滑动和点击来关闭面板:

属性 描述 实例
data-dismissible true | false 指定面板是否可以通过点击面板外部区域来关闭。 尝试一下
data-swipe-close true | false 指定是否可以通过滑动来关闭。 尝试一下

你可以使用按钮来关闭面板:仅需要在面板的 <div> 中添加 data-rel="close" 属性。 从性能上考虑,我们需要键关闭链接的 href 属性指向页面的 ID 。

实例

<div data-role="panel" id="myPanel">
  <h2>面板头部..</h2>
  <p>面板中的一些文本内容..</p>
  <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline">关闭面板</a>
</div>

尝试一下 »

面板展示

你可以通过使用 data-display 属性来控制面板的展示方式:

属性值 描述
data-display="overlay" 在内容上显示面板
data-display="push" 是同时"推动"面板和页面。
data-display="reveal" 默认值,将页面像幻灯片一样从屏幕划出,将面板显示出来

实例

<div data-role="panel" id="overlayPanel" data-display="overlay">
<div data-role="panel" id="revealPanel" data-display="reveal">
<div data-role="panel" id="pushPanel" data-display="push">

尝试一下 »

面板定位

默认情况下,面板会显示在屏幕的左侧。如果想让面板出现在屏幕的右侧,可以指定 data-position="right" 属性。

实例

<div data-role="panel" id="myPanel" data-position="right">

尝试一下 »

你可以指定面板的内容根据页面滚动而滚动。默认情况下面板是随着页面一起滚动的(但是面板的内容仍然位于页面顶部)。如果你需要实现面板内容固定不随页面滚动而滚动,可以在面板添加 the data-position-fixed="true" 属性:

实例

<div data-role="panel" id="myPanel" data-position-fixed="true">

尝试一下 »

有关jQuery Mobile 面板的更多相关文章

  1. Unity Shader 学习笔记(5)Shader变体、Shader属性定义技巧、自定义材质面板 - 2

    写在之前Shader变体、Shader属性定义技巧、自定义材质面板,这三个知识点任何一个单拿出来都是一套知识体系,不能一概而论,本文章目的在于将学习和实际工作中遇见的问题进行总结,类似于网络笔记之用,方便后续回顾查看,如有以偏概全、不祥不尽之处,还望海涵。1、Shader变体先看一段代码......Properties{ [KeywordEnum(on,off)]USL_USE_COL("IsUseColorMixTex?",int)=0 [Toggle(IS_RED_ON)]_IsRed("IsRed?",int)=0}......//中间省略,后续会有完整代码 #pragmamulti_c

  2. ruby-on-rails - Rails 替代 Django 管理面板/CRUD View 生成器? - 2

    我目前正在尝试在Rails和Django之间做出决定。目前我发现ruby​​更优雅,所以我考虑Django的唯一原因是管理面板..我没有任何经验,但我必须在截止日期前快速开发应用程序。Rails中是否有一种方法可以根据您的模型(如django中的管理面板)为您的所有CRUD操作生成一组(接近生产就绪的)View?(即它会查看您的模型并看到您有一个属于某个组的人,并在创建人员View上为该组生成一个下拉列表)?如果不是,那是获得所有CRUDView初稿的最快方法(无需手动编写)?谢谢,丹尼尔 最佳答案 有趣的工具http://acti

  3. javascript - ExtJS:什么是检测网格数据更改的网格面板事件 - 2

    我有一个GridPanel,在工具栏中我有两个按钮“拒绝更改”和“保存更改”。下面的代码显示了每个按钮的作用,到目前为止一切正常。Ext.define('APP.view.MyGrid',{extend:'Ext.grid.Panel',...initComponent:function(){varme=this;me.store=myStore;me.plugins=[Ext.create('Ext.grid.plugin.CellEditing',{clicksToEdit:1,autoCancel:false}),];me.rejectBtn={xtype:'button',id

  4. javascript - 没有 Bootstrap 面板标记的 Bootstrap Accordion - 2

    是否有任何可行的方法可以在不使用“面板”标记的情况下创建自举Accordion控件?我有折叠控件,但我希望能够为控件中的每个部分定位父级。换句话说,我希望“收入”和“利润”桶相互切换,并且“收入”内部有“收入当前”、“收入基础”和“收入当前与基础”相互切换其他不干扰父层。http://jsfiddle.net/Lp903gc5/标记RevenueRevenueCurrentExtendedZonePriceNetAmountRevenueRevenueShareatDNRevenueBaseExtendedZonePriceNetAmountRevenueRevenueShareatD

  5. javascript - 如何在 ExtJS 面板的标题中放置下拉菜单? - 2

    我可以像这样将文本和图像等HTML元素放在面板标题中:vargrid=newExt.grid.GridPanel({region:'center',style:'margin:10px',store:newExt.data.Store({data:myData,reader:myReader}),headerCfg:{tag:'div',cls:'x-panel-header',children:[{tag:'div',cls:'panel_header_main','html':'ShoppingCart'},{tag:'div',cls:'panel_header_icon1','

  6. javascript - 在 Firefox 扩展中传递的面板和 PageMod 内容脚本消息 - 2

    我正在使用FirefoxAdd-onSDK将Chrome扩展移植到Firefox。扩展包含一个连接到toolbarbutton的面板。(相当于Chrome的popup.html+浏览器操作)和PageMod内容脚本。当面板打开时,它需要向当前选项卡的内容脚本发送消息以接收包含来自该页面的一些信息的对象。我遇到麻烦的部分是如何实际进行消息传递。有人可以帮我指出正确的方向吗?我似乎找不到很多资源来帮助Chrome扩展开发人员学习Firefox插件开发。以下问题在Chrome环境中演示了这个概念。我只是需要帮助将它移植到Firefox。ChromeExtension-MessagePassi

  7. javascript - 在 chrome 扩展中具有面板行为 - 2

    我需要在chrome中有面板行为:总是在顶部但不会影响导航的东西(除了屏蔽几个像素之外的任何其他方式)。目前我们有两个选择:面板模式下的窗口:尚不可用(尽管现在可用于GTalkextension)。弹出模式的窗口:我可以通过在每个事件中重新聚焦使其始终位于顶部,但是焦点将对准我的窗口(并影响导航)我正在寻找:GTalk的黑魔法一种使弹出窗口保持在顶部(或出现在顶部并将焦点移交给第二个最顶部的窗口)的方法 最佳答案 我发现GTalk是唯一带有面板的扩展。您也可以在自己的扩展中使用面板,使用真正的黑魔法:在您的manifest.json

  8. ASP.NET 在更新面板中嵌套的用户控件中注入(inject) javascript - 2

    我正在尝试在更新面板的异步回发期间通过Page.LoadControl方法将带有用户Web控件的JavaScript代码加载到页面中。我已经尝试过专门为该场景设计的脚本管理器方法,但javascript并没有返回给用户。为了更好地解释我的场景:母版页有脚本管理器,一个页面在异步回发期间通过Page.LoadControl方法加载用户控件。自定义控件在预呈现事件处理程序中注入(inject)javascript。这是注入(inject)js的时间问题还是不可能这样做? 最佳答案 为此你可以做到stringscr;scr=""Page.

  9. javascript - 如何自定义(或禁用)JQueryMobile 中的自动 "back"按钮 - 2

    是否可以自定义(或简单地禁用)JQueryMobile中的自动“后退”按钮? 最佳答案 我想你正在寻找这个:http://jquerymobile.com/demos/1.0a3/#docs/toolbars/docs-headers.html要禁用它,只需在页面的标题div中包含data-backbtn="false"。 关于javascript-如何自定义(或禁用)JQueryMobile中的自动"back"按钮,我们在StackOverflow上找到一个类似的问题:

  10. javascript - 没有 hack 或其他路由器的 Backbone.js 和 jQueryMobile 路由 - 2

    我将backbone.js(0.5.3)与JQueryMobile(1.0beta2)一起使用。我知道一起使用这些库时会发生路由冲突,我想知道是否有使用它们的解决方案:无需像BenNolan的pots中描述的那样侵入jquery移动源代码:http://bennolan.com/2010/11/23/backbone-and-jquery-mobile.html并且不使用其他路由器,如jquerymobile-router(除非没有其他选择...)我的问题与这篇文章中描述的问题非常相似:jquery-mobilebackbone.jsrouting当我发出请求时,相应主干View的主干

随机推荐