您需要了解的 10 个 jQuery mobile 贴士和代码片段

你需要了解的 10 个 jQuery mobile 贴士和代码片段

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>

复制代码

您需要了解的 10 个 jQuery mobile 贴士和代码片段 ?

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.0a3.min.js"></script>

复制代码

您需要了解的 10 个 jQuery mobile 贴士和代码片段 ?

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

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

复制代码

您需要了解的 10 个 jQuery mobile 贴士和代码片段

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 判断目标平台
1. var deviceAgent = navigator.userAgent.toLowerCase();
2. var agentID = deviceAgent.match(/(iphone|ipod|ipad|android)/);
3. if(agentID.indexOf("iphone")>=0){
4. ??alert("iphone");
5. }
6. if(agentID.indexOf("ipod")>=0){
7. ??alert("ipod");
8. }
9. if(agentID.indexOf("ipad")>=0){
10. ??alert("ipad");
11. }
12. if(agentID.indexOf("android")>=0){
13. ??alert("android");
14. }
复制代码

7. 使用完整路径来处理表单 action
For example, I’ve found that this form tag never finds its target:
?
1. <form action=" form-handler.php " method="get" >
复制代码
?
Whereas a full path like this works as expected:
?
1. <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. 创建弹出对话框
1. <a href="#pop.html" data-rel="dialog">Pop up!</a>
复制代码

?

9. “取消” + “保存” 的组合按钮
1. <fieldset>
2. <div><button type="submit" data-theme="c">Cancel</button></div>
3. <div><button type="submit" data-theme="b">Submit</button></div>
4. </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.

您需要了解的 10 个 jQuery mobile 贴

热点推荐