JQuery 移动面板-6ren

JQuery 移动面板

转载作者：行者123 更新时间：2023-11-28 00:07:05

我是 jquery 的新手，我想使用面板功能，但是我的代码并没有真正起作用。我从以下位置复制了大部分内容:http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/只是为了测试，面板正在接管整个屏幕，关闭按钮不起作用，我无法弄清楚我做错了什么。这是我的代码:

<body>
    <div id="content">
        <div data-role="page">
            <div data-theme="a" data-role="header" data-position="fixed">
                <h3>
                    Test
                </h3>
                <a href="#menu-panel"class="ui-btn-left" data-icon="bars">Menu</a>
            </div>
        </div>
        <div data-role="panel" data-position="left" data-theme="a" data-position-fixed="true" data-display="push" id="menu-panel">
            <ul data-role="listview" data-theme="a" class="nav-search">
                <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
                    <li><a href="#panel-fixed-page2">Accordion</a></li>
                    <li><a href="#panel-fixed-page2">AJAX Navigation</a></li>
                    <li><a href="#panel-fixed-page2">Autocomplete</a></li>
                    <li><a href="#panel-fixed-page2">Buttons</a></li>
                    <li><a href="#panel-fixed-page2">Checkboxes</a></li>
                    <li><a href="#panel-fixed-page2">Collapsibles</a></li>
                    <li><a href="#panel-fixed-page2">Controlgroup</a></li>
                    <li><a href="#panel-fixed-page2">Dialogs</a></li>
                    <li><a href="#panel-fixed-page2">Fixed toolbars</a></li>
                    <li><a href="#panel-fixed-page2">Flip switch toggle</a></li>
                    <li><a href="#panel-fixed-page2">Footer toolbar</a></li>
                    <li><a href="#panel-fixed-page2">Form elements</a></li>
                    <li><a href="#panel-fixed-page2">Grids</a></li>
                    <li><a href="#panel-fixed-page2">Header toolbar</a></li>
                    <li><a href="#panel-fixed-page2">Icons</a></li>
                    <li><a href="#panel-fixed-page2">Links</a></li>
                    <li><a href="#panel-fixed-page2">Listviews</a></li>
                    <li><a href="#panel-fixed-page2">Loader overlay</a></li>
                    <li><a href="#panel-fixed-page2">Navbar</a></li>
                    <li><a href="#panel-fixed-page2">Navbar, persistent</a></li>
                    <li><a href="#panel-fixed-page2">Pages</a></li>
                    <li><a href="#panel-fixed-page2">New</a></li>
                    <li><a href="#panel-fixed-page2">Popup</a></li>
                    <li><a href="#panel-fixed-page2">Radio buttons</a></li>
                    <li><a href="#panel-fixed-page2">Select</a></li>
                    <li><a href="#panel-fixed-page2">Slider, single</a></li>
                    <li><a href="#panel-fixed-page2">New</a></li>
                    <li><a href="#panel-fixed-page2">New</a></li>
                    <li><a href="#panel-fixed-page2">New</a></li>
                    <li><a href="#panel-fixed-page2">Text inputs & textarea</a></li>
                    <li><a href="#panel-fixed-page2">Transitions</a></li>
            </ul>
        </div><!-- /panel -->
    </div>    
</body>

头部有脚本 .js 和 .css 调用:

<script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
<script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css"/>
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"/>
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"/>

任何帮助将不胜感激!

最佳答案

根据 http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/

"A panel must be a sibling to the header, content and footer elements inside a jQuery Mobile page. You can add the panel markup either before or after these elements, but not in between. A panel cannot be placed outside a page, but this constraint will be removed in a future version."

所以只需将面板 div 放在您的页面中 :)

<body>
<div id="content">
    <div data-role="page">
        <div data-theme="a" data-role="header" data-position="fixed">
            <h3>
                Test
            </h3>
            <a href="#menu-panel"class="ui-btn-left" data-icon="bars">Menu</a>
        </div>
        <div data-role="panel" data-position="left" data-theme="a" data-position-fixed="true" data-display="push" id="menu-panel">
        <ul data-role="listview" data-theme="a" class="nav-search">
            <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
                <li><a href="#panel-fixed-page2">Accordion</a></li>
                <li><a href="#panel-fixed-page2">AJAX Navigation</a></li>
                <li><a href="#panel-fixed-page2">Autocomplete</a></li>
                <li><a href="#panel-fixed-page2">Buttons</a></li>
                <li><a href="#panel-fixed-page2">Checkboxes</a></li>
                <li><a href="#panel-fixed-page2">Collapsibles</a></li>
                <li><a href="#panel-fixed-page2">Controlgroup</a></li>
                <li><a href="#panel-fixed-page2">Dialogs</a></li>
                <li><a href="#panel-fixed-page2">Fixed toolbars</a></li>
                <li><a href="#panel-fixed-page2">Flip switch toggle</a></li>
                <li><a href="#panel-fixed-page2">Footer toolbar</a></li>
                <li><a href="#panel-fixed-page2">Form elements</a></li>
                <li><a href="#panel-fixed-page2">Grids</a></li>
                <li><a href="#panel-fixed-page2">Header toolbar</a></li>
                <li><a href="#panel-fixed-page2">Icons</a></li>
                <li><a href="#panel-fixed-page2">Links</a></li>
                <li><a href="#panel-fixed-page2">Listviews</a></li>
                <li><a href="#panel-fixed-page2">Loader overlay</a></li>
                <li><a href="#panel-fixed-page2">Navbar</a></li>
                <li><a href="#panel-fixed-page2">Navbar, persistent</a></li>
                <li><a href="#panel-fixed-page2">Pages</a></li>
                <li><a href="#panel-fixed-page2">New</a></li>
                <li><a href="#panel-fixed-page2">Popup</a></li>
                <li><a href="#panel-fixed-page2">Radio buttons</a></li>
                <li><a href="#panel-fixed-page2">Select</a></li>
                <li><a href="#panel-fixed-page2">Slider, single</a></li>
                <li><a href="#panel-fixed-page2">New</a></li>
                <li><a href="#panel-fixed-page2">New</a></li>
                <li><a href="#panel-fixed-page2">New</a></li>
                <li><a href="#panel-fixed-page2">Text inputs & textarea</a></li>
                <li><a href="#panel-fixed-page2">Transitions</a></li>
        </ul>
    </div><!-- /panel -->
    </div>

</div>    
</body>

这是 JSFiddle .

关于JQuery 移动面板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17949642/

文章推荐： html - 自定义 css 不会覆盖第一个 css 文件中的属性

文章推荐： c++ - 套接字编程简单聊天 C++

文章推荐： javascript - 使用 git 创建美化 js 的自定义过滤器

javascript - 面板 : Both glyphicons toggle when inner panel is clicked 中的 Bootstrap 面板
我有一个 Bootstrap 面板，里面有另一个面板。两者在面板标题中都有一个字形图标。默认情况下，面板是折叠的。当面板折叠时，将设置 glyphicon-unchecked。当我点击这个字形图标时，
Grafana 自动刷新仪表板布局/面板？
使用 Grafana 时，我们会在某些电视上使用它。有谁知道制作它的方法，如果有人添加面板，更改布局等，它不仅会自动刷新数据，还会自动刷新实际仪表板？我们真的厌倦了不断要求具有远程访问权限的人登录并
java - java中的隐藏标签/面板
基本上，我试图让屏幕底部有 3 个按钮，然后在屏幕中间有一个包含文字的标签。但是，我似乎无法同时在 GUI 中同时拥有按钮和标签。我是一名初学者，对布局了解不多(即使我已经阅读过它们)，因此任何帮助/
java - 面板/按钮和重新绘制令人头痛
作为学校的类(class)作业，我们必须提出一个自定义项目，我选择了一个原本打算在 ActionScript 上编写的游戏创意，但决定在 Java 上插入它。最初进展顺利，游戏代码正常运行， Spri
Java 面板/框架图形不工作
我正在尝试使用 Java Graphics 制作一个生命模拟游戏，但是当运行我的代码时，屏幕的左侧三分之一是灰色的。我希望整个屏幕是白色的，黑色方 block 代表生命方 block 。我对所有 ja
javascript滑动(侧)面板
下面是动态驱动的一个不错的“下拉面板”。 http://www.dynamicdrive.com/dynamicindex17/dddropdownpanel.htm 如您所见，它是一个面板，在打开时
javascript - 只打开一个弹出窗口(面板)
所以我有这个函数 onDisplayError ，如果请求失败，每次都会调用它。这意味着如果用户按下保存按钮并且 3 个请求失败，我当前会收到 3 个弹出消息。我的目标是此函数检查我的弹出窗口是否已打
Java GUI 面板
我正在尝试为我的一个类(class)制作一款游戏，但在实现一些我想做的事情时遇到了麻烦。本质上，我希望在同一个图形用户界面窗口中包含多个不同的部分。据我了解，我会使用 JPanel 来创建这些不同的
Jquery 面板 + 从顶部检测滚动？
我目前正在测试这种类型的面板 jquery: http://codyhouse.co/gem/css-slide-in-panel/ 但是当我想检测从顶部滚动以显示一个 div 时:没办法:( 一种检
c# - 面板——滚动条可见事件
我可能正在搜索错误的问题，但我找不到这个问题的答案。我有一个 AutoScroll 设置为 true 的面板。控件动态添加到面板。我需要在滚动条可见时触发一个事件，但我找不到这样的事件。如有任何建
html - 通过连接器连接 Bootstrap 面板
我有一堆 Bootstrap 面板，其中一些是相互关联的。有点像 Panel A -> Panel B -> Panel C 当用户单击面板 B 时，将显示面板 C，当单击面板 C 时，将显示面板 D
panel - 根据选定的模板变量隐藏 grafana 面板
我正在尝试开发一种带有指标的下拉列表，并相应地针对应该出现在仪表板上的选定指标特定面板。反之亦然，如果未选择指标，则面板应隐藏。我找到了链接 http://search-devops.com/m/k
dynamic - ExtJs 面板 - 添加动态组件
我有一个窗口，窗口里面有面板。我动态地向面板添加组件。这些组件采用“hbox”布局，以便它们水平排列。单击按钮后，我将在“hbox”布局中再向面板添加一行类似组件。这里的问题是我想在第一行下面添加第二
jquery - 展开验证错误时的 Accordion 面板
我使用 jQuery Accordion 将表单拆分为多个面板，并使用 jQuery 验证来检查所需字段。只要验证字段位于打开的面板中，它就可以很好地显示已验证字段中的错误。举个例子。假设我有三个
jQuery Mobile 面板 - 检查它是否打开
我正在尝试检查我的面板是打开还是关闭。我尝试过这样的: $(document).on('open', '.ui-panel', function(){ console.log('open');
macos - 如何制作在全屏模式下消失的 float 面板
我有一个面板，我想将其 float 在所有窗口之上并出现在所有空间中。这可以通过轻松完成 [self.panel setLevel:kCGUtilityWindowLevel]; [self.win
r - 具有分组回归线的叠加 xyplot 面板
我想在格子中的单个面板上叠加多个组，并且想要独立的回归线。获得多个面板相当容易，每个面板都有一条使用条件因子的回归线: xyplot( Petal.Width ~ Petal.Length |
Delphi:滑动(动画)面板
Delphi 有滑动(动画)面板组件吗？例如可以在 Raize Components 中找到它(带有“热点”或隐藏/显示按钮的左侧面板)。我不需要一个可调整大小的面板，而是一个可以从左向右水平平滑
javascript - 验证事件的 Accordion 面板
我有一个 Bootstrap Accordion : 我想禁用非事件面板中的所有输入控件。仅验证事件面板。我有一个检测事件选项卡的功能: $(".panel").on("show.bs.collap
java - 不同尺寸的 Swing 面板
我正在尝试将组件放入不同尺寸的面板中。但是，我意识到 GridLayout 将大小相同的部分分开。如何实现如下图所示 enter image description here import java.

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

JQuery 移动面板