javascript - Jquerymobile 面板链接问题-6ren

javascript - Jquerymobile 面板链接问题

转载作者：太空宇宙更新时间：2023-11-04 13:20:24

25

4

我正在尝试配置一个滑动面板 jqm 1.3.1。我总是创建“one page-jqm”-Pages一个 index.html 和几个

现在我试图让滑动面板工作，但是当我添加第二个页面时，该页面卡在加载屏幕中。

我的代码会解释我的意思:

<!DOCTYPE html>
<html lang="de">
<head>
  ...
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">

  <!-- jQuery and jQuery Mobile -->

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

</head>
<body>
<!-- Page 1 -->
<div data-role="page" id="page1">


  <div id="header" data-theme="c" data-role="header">
    <a id="men" data-role="button" href="#menue" data-icon="grid" data-iconpos="notext" class="ui-btn-left info">
    </a>

    <h3>Body Change</h3>

  </div>
  <div id="content" data-role="content">
    Test123
  </div>

  <div id ="footer" data-role="footer">
    footer
  </div>
  <div data-role="panel" id="menue" data-display="push" data-theme="a">
    <div data-role="controlgroup">
      <h2>Menü</h2>
      <a href="#page1" data-role="button" class="ui-btn-active">Home</a>
      <a href="#page2" data-role="button">Erlaubte Lebensmittel</a>
      <a href="#page3" data-role="button">Verbotene Lebensmittel</a>
      <a href="#page4" data-role="button">Frühstück</a>

    </div>
  </div>
<div>


<!-- Page 2 -->
<div data-role="page" id="page2">


  <div id="header" data-theme="c" data-role="header">
    <a id="men" data-role="button" href="#menue" data-icon="grid" data-iconpos="notext" class="ui-btn-left info">
    </a>

    <h3>Body Change</h3>

  </div>
  <div id="content" data-role="content">
    Test123
  </div>

  <div id ="footer" data-role="footer">
    footer
  </div>
  <div data-role="panel" id="menue" data-display="push" data-theme="a">
    <div data-role="controlgroup">
      <h2>Menü</h2>
      <a href="#page1" data-role="button" class="ui-btn-active">Home</a>
      <a href="#page2" data-role="button">Erlaubte Lebensmittel</a>
      <a href="#page3" data-role="button">Verbotene Lebensmittel</a>
      <a href="#page4" data-role="button">Frühstück</a>

    </div>
  </div>
<div>

我提前感谢大家的帮助 cookies 182

编辑:浏览器控制台显示: 未捕获的类型错误:无法读取未定义的属性“选项”

EDIT2:我忘了关闭页面 Divs，非常感谢 Omar

最佳答案

             I stripped your footer menu blocks and if you look at this structure it will probably help you out to why your page is not navigating to the next page... Be sure to take a look at the naming conventions as well                  pertaining to the anchor tags...     

            <!DOCTYPE html>
            <html lang="de">
            <head>
            ...
            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">

            <!-- jQuery and jQuery Mobile -->

            <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
            <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

            </head>
            <body>
            <!-- Page 1 -->
            <section id="firstpage" data-role="page">
            <div id="header" data-theme="c" data-role="header">
            <a id="menu" data-role="button" href="#menue" data-icon="grid" data-iconpos="notext" class="ui-btn-left info"></a>

            <h3>Body Change</h3>

            </div>
            <div id="content" data-role="content">
            <p>This is page 1</p>
            <p><a href="#secondpage">Go to second page</a></p>
            </div>

            <div id ="footer" data-role="footer">
            footer
            </div>

            <div>
            </section>

            <!-- Page 2 -->
            <div data-role="page" id="secondpage">


            <div id="header" data-theme="c" data-role="header">
            <a id="menu" data-role="button" href="#menue" data-icon="grid" data-iconpos="notext" class="ui-btn-left info">
            </a>

            <h3>Body Change</h3>

            </div>
            <div id="content" data-role="content">
            this is page 2
            <p><a href="#firstpage">Go to first page</a></p>
            </div>

            <div id ="footer" data-role="footer">
            footer
            </div>
            <div>

关于javascript - Jquerymobile 面板链接问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18440311/

25

4

0

文章推荐： java - java的方法声明怎么写

文章推荐： Java - 捕获异步方法的异常

文章推荐： html - 如何以均匀间距水平分布包含图像的div？

jquerymobile Phone间隙后退按钮获取先前状态
我正在构建一个小型移动应用程序，我有一个关于 JQM 的问题。当用户登录时，用户将被重定向到页面 A。页面 A 通过 JQM 的 loadPage 进行加载(示例:$.mobile.loadPage
jquerymobile 后退按钮未显示在标题上
我正在尝试在 MVC 中创建一个移动网站，我是 jquerymobile 的新手，我从 JQM 教程中复制了以下代码并将其粘贴到 MVC 中的 View 中 Home
JqueryMobile 用图像替换单选按钮
我正在使用 jquerymobile 为网络应用程序创建一个 radio 组。在某一时刻，用户必须在“男性”和“女性”之间进行选择。我有点击(触摸)性别和未点击性别的图像。我想用具有两种状态的两个图像
JqueryMobile 弹出菜单不起作用
我正在尝试构建一个虚拟页面来理解 Jquerymobile，但我无法在以下链接上实现“菜单”[单击页面上的菜单按钮]: http://jquerymobile.com/branches/popup-w
JQueryMobile 自动完成点击条目不更改输入值
我尝试使用 jquery mobile 进行自动完成输入。 ' 所以我在这里找到了一个演示: http://demos.jquerymobile.com/1.4.0/listview-autocomp
JQueryMobile 可折叠标题
var dw=function(string){ document.write(string+"-Hello"); } dw("Hi") //Hi-Hello 这很好用。但是当我将此 header
jQueryMobile 删除输入字段
我想使用 jQuery 在发生某些事件时删除输入字段: $('#myInputId').remove(); 但是如果我尝试一下，周围的 div(由 jQueryMobile 自动添加)不会被删除。所以
jqueryMobile 将焦点设置在弹出窗口中的输入字段上
在我的 jquery 移动应用程序中，我想在打开弹出窗口后自动将焦点设置在输入字段上。输入字段位于弹出窗口中，如下所示。焦点在开始时设置正确，但在弹出窗口完全降低后丢失。 open
jQueryMobile 水平对齐网格元素
我有一个包含五个单元格的 jQuery Mobile 网格系统。我想让这些单元格的内容与单元格的中间对齐。我尝试添加: text 但这没有用。还有: text 没用。我创建了一个 fiddle检
jQueryMobile 的数据标题未显示在搜索结果中
我有一个多页面的 jQueryMobile 站点，它使用 data-title 属性来更新每个单独页面上的页面标题。这在大多数现代浏览器中都可以正常工作，但它不会反射(reflect)在 Google
jquery - 动态创建按钮 - JQueryMobile
如何使用 jQuertMobile 动态创建按钮。最佳答案非常简单: 首先创建一个按钮 HTML JQuery 元素: var button = $("My Button"); 接下来，将按钮插入
javascript - jQueryMobile 将单击事件添加到按钮而不是更改页面
VERIFY 我使用上面的代码，它是一个带有 onClick() 设置的 jQM 按钮。调用 onclick 并执行 doSomething() 但之后，jQM 显示“错误加载页面”消息。如何抑制该
javascript - jquerymobile。双执行函数
我有这样的代码: function getData(){ $.ajax({ url: 'http://pechati.ru/extdata/baseparts/filialsW
javascript - JqueryMobile 页面中的同一页面导航
我有一个使用 Jquery Mobile 的页面。我尝试过使用简单的 anchor Text text 但调用 Jquery Mobile 时似乎这是不可能的。有谁知道可用的解决方法？我搜索了一段
javascript - jquerymobile 确认似乎不会影响结果？
这是来自 jquerymobile 应用程序的片段。这是一个简单的文件管理器，允许删除文件，我想确认删除。我正在尝试使用 JavaScript confirm 来仔细检查操作是否应该继续；但似乎无论我
javascript - jQueryMobile 停止页面转换
我正在开发一个使用 jquerymobile fb 滑动方法的应用程序，不知道它在哪里显示原始内容。然而。我最大的问题是它需要一个链接并尝试通过某种 ajax get 方法动态加载页面。这不是我想要的
javascript - jQueryMobile 应用程序中的事件触发两次
我的 Phonegap 和 jQM 应用程序出现问题。其中，一个事件在 Android 设备上触发两次。为了消除闪烁效果，我将页面过渡设置为“无”。当我单击菜单按钮时，它会导航到第 2 页。此外，该
listview - jQueryMobile 中捕获过滤器清除单击事件
如何捕获单击 jQueryMobile 中 ListView 组件的过滤器清除按钮的事件？我尝试过选择器 $('.ui-input-clear'), $('.ui-input-search a'),
jquerymobile listview 以编程方式过滤
我正在努力完成这个任务。我有两列网格 A B C D
JQueryMobile Datepicker 和新框架
我正在使用JQueryMobile's experiment Datepicker有一段时间它在旧框架中工作了。昨天我将框架更改为最新的框架，发现当我单击外部时，它会破坏日期选择器的布局。有人遇到过

首页

博学

6Ren·AI

商城

javascript - Jquerymobile 面板链接问题