你需要了解的 10 个 jQuery mobile 贴士和代码片段
1. 一个完整的基本页面
<head> <title>PageTitle</title> <linkrel="stylesheet"href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css"/> <scripttype="text/javascript"src="http://code.jquery.com/jquery-1.5.min.js"></script> <scripttype="text/javascript"src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script> </head> <body> <divdata-role="page"id="home"> <divdata-role="header"> <h1>Header</h1> </div> <divdata-role="content"> <p>Contentgoeshere</p> </div> <divdata-role="footer"> <h4>Footer</h4> </div> </div> </body> </html>
2.在什么地方添加jQuery的方法调用？
<script> $(document).ready(function(){ //在这里添加jQuery代码 }); </script> <scripttype="text/javascript"src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
3.一次性禁用所有链接的Ajax导航
//disableajaxnav $.mobile.ajaxLinksEnabled=false; }); </script>
某些比较长的条目会被自动截断并使用 ... 替换显示，该方法可避免出现这种情况 列表项:
} For footer content:
} 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:
6.使用jQuery判断目标平台
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"); } For example, I’ve found that this form tag never finds its target:
Whereas a full path like this works as expected:
Also, be sure that the results from the form handler produce a full, valid jQuery mobile page, as shown in tip #1. 8.创建弹出对话框
9.“取消”+“保存”的组合按钮
<div><buttontype="submit"data-theme="b">Submit</button></div> </fieldset>
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. |
