10个 jQuery mobile 贴士和代码片段-优快云博客

本文介绍了网页开发中使用的基本页面结构，如何在页面中添加jQuery方法调用，以及如何进行Ajax导航设置、防止关键条目截断显示、利用媒体查询针对不同设备优化布局、判断目标平台、使用完整路径处理表单、创建弹出对话框、实现“取消”+“保存”组合按钮等技术。同时，提供了使用jQuery判断目标平台和媒体查询进行设备适配的实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 一个完整的基本页面

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
 <div data-role="header">
  <h1>Header</h1>
 </div>
 <div data-role="content">
  <p>Content goes here</p>
 </div>
 <div data-role="footer">
  <h4>Footer</h4>
 </div>
</div>
</body>
</html>

2. 在什么地方添加 jQuery 的方法调用？

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>

<script> $(document).ready(function() {

// 在这里添加 jQuery 代码

});

</script>

<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1

3. 一次性禁用所有链接的 Ajax 导航

<script>
 $(document).ready(function() {
  // disable ajax nav
  $.mobile.ajaxLinksEnabled = false;
 });
</script>

4. 防止某些关键条目被截断

某些比较长的条目会被自动截断并使用 ... 替换显示，该方法可避免出现这种情况

列表项:

body .ui-li .ui-li-desc {
 white-space: normal;
 }

For footer content:

body .ui-footer .ui-title {
 white-space: normal;
 }

5. Use media queries to target devices

One of the first questions I had with this library was how to target devices in the CSS (based on screen size). For example, I wanted a two-column layout for the iPad and a single column for smartphones. The absolute best way to accomplish this is with media queries.

With some simple media queries in place, you can quickly make the CSS target screen sizes. And with this type of targeting, we can quickly set up different layouts based on the available screen space by relying on conventional CSS techniques.

Two fantastic resources for this are:

“CSS Media Queries and Using Available Space,” CSS-Tricks;
Hardboiled CSS3 Media Queries,” Stuff and Nonsense.

6. 使用 jQuery 判断目标平台

 var deviceAgent = navigator.userAgent.toLowerCase();
 var agentID = deviceAgent.match(/(iphone|ipod|ipad|android)/);
 if(agentID.indexOf("iphone")>=0){
  alert("iphone");
 }
 if(agentID.indexOf("ipod")>=0){
  alert("ipod");
 }
 if(agentID.indexOf("ipad")>=0){
  alert("ipad");
 }
 if(agentID.indexOf("android")>=0){
  alert("android");
 }

7. 使用完整路径来处理表单 action

For example, I’ve found that this form tag never finds its target:

<form action=" form-handler.php " method="get" >

Whereas a full path like this works as expected:

<form action="/current-directory/form-handler.php" method="get" >

Also, be sure that the results from the form handler produce a full, valid jQuery mobile page, as shown in tip #1.

8. 创建弹出对话框

<a href="#pop.html" data-rel="dialog">Pop up!</a>

9. “取消” + “保存” 的组合按钮
<fieldset>
 <div><button type="submit" data-theme="c">Cancel</button></div>
 <div><button type="submit" data-theme="b">Submit</button></div>
</fieldset>
10. Create a column structure on your own
In my quest to optimally structure a single page for multiple devices, I found myself combining the media query tricks above with the “columns in any order” technique.
Fortunately, web developers figured out long ago how to move columns around. By combining this technique with media queries, we can very easily set up various structures depending on the screen size we’re working with.