jquery mobile中data-url
时间: 2023-11-27 16:54:22 浏览: 36
在jQuery Mobile中,data-url是一个HTML5 data-*属性,用于定义一个页面的URL地址。它通常被用于实现单页应用程序(SPA)的导航功能。当用户点击链接或按钮时,jQuery Mobile会根据data-url属性的值加载相应的页面内容,而不是刷新整个页面。这种技术可以提高应用程序的性能和用户体验。例如,以下代码演示了如何使用data-url属性定义一个页面的URL地址:
```html
<div data-role="page" data-url="/page1">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div data-role="content">
<p>This is page 1.</p>
<a href="#page2" data-transition="slide">Go to page 2</a>
</div>
</div>
<div data-role="page" data-url="/page2" id="page2">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div data-role="content">
<p>This is page 2.</p>
<a href="#page1" data-transition="slide" data-direction="reverse">Go back to page 1</a>
</div>
</div>
```
在上面的代码中,每个页面都有一个data-url属性,它定义了该页面的URL地址。当用户点击链接或按钮时,jQuery Mobile会根据data-url属性的值加载相应的页面内容,并使用过渡效果(如slide)进行切换。注意,这里的链接是使用#符号作为前缀的内部链接,因为jQuery Mobile使用了hashchange事件来处理页面导航。