Question

我正在学习'Jquery Mobile'编程。

我写了一个程序，但它没有用。

<html><head>
<link rel="stylesheet" href='../jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css' />


<link rel="stylesheet" href='../jquery.mobile-1.4.5/jquery.mobile-1.4.5.css' />
<script type='text/javascript' src='../jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js'></script>
<script type='text/javascript' src='../jquery.mobile-1.4.5/demos/js/jquery.min.js'></script></head>
<body>
<div data-role="page" id="pageone">
<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>Click on the link to see the slide effect (slides to the next page from right to left).</p>
    <a href="#pagetwo" data-transition="slide">Slide to Page Two</a>
  </div>

  <div data-role="footer">   <h1>Footer Text</h1>    </div>
</div> 

<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>Click on the link to see the slide effect REVERSED (slides to the previous page from left to right).</p>
    <a href="#pageone" data-transition="slide" data-direction="reverse">Slide to Page One (reversed)</a>
  </div>

  <div data-role="footer"> <h1>Footer Text</h1>    </div>
</div> 
</body></html>

css样式和数据角色属性无法正常工作。它只是将两个页面一次显示为HTML页面。

.css文件和.js文件的路径正确。

Answer 1

我注意到你的代码中有三个问题。首先你应该使用jquery-mobile css或jquery-mobile css的缩小版本而不是两者。在你的代码中你使用了两个。我在你的代码中注意到的另一个错误如下。

<div data-role="page" id="pageone">
<div data-role="page" id="pageone">

您使用了两个div元素，其data-role =“page”属性具有相同的id值。最后，当您包含jquery js时，请始终将其放在jquery-mobile js之上。

Answer 2

尝试按此顺序加载库：

jquery.mobile-1.4.5.min.css
jquery.min.js
jquery.mobile-1.4.5.min.js

并删除重复的pageone div。

为什么我的第一个jqm程序无效

2 个答案: