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

最新推荐文章于 2024-08-01 13:45:06 发布

前端开发工程师

最新推荐文章于 2024-08-01 13:45:06 发布

阅读量84

点赞数

分类专栏： webkit webApp 开发文章标签：移动开发 php javascript ViewUI

本文链接：https://blog.csdn.net/caibinghong/article/details/84012682

版权

webkit webApp 开发专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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.

前端开发工程师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
你需要了解的 10 个 jQuery mobile 贴士和代码片段

1. 一个完整的基本页面&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;Page Title&lt;/title&gt;&lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-
复制链接

扫一扫

专栏目录