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

caibinghong

浏览: 150101 次
性别:
来自: 福建

最近访客更多访客>>

470394419

morelily

xihuanxiaoxin

sn200837

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

webkit webApp 开发

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

复制代码

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.

分享到：

javascript 拖拽替换 | [翻译]jQuery Mobile入门教程——主题的使 ...

2011-09-05 10:45
浏览 1087
评论(0)
分类:移动开发
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论