<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> //user-scalable=no 禁用缩放
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<!--<script src="/blog_article/custom-srcipt-js/index.html"></script>--> //自定义脚本位置
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Header</h1>
</div>
<div data-role="content">
<p>你好</p> //注意:html文件的编码格式要为utf-8,否则有中文会乱码
</div>
<div data-role="footer" data-position="fixed"> //默认页脚在内容之后,添加此句后定位到屏幕底部
<h4>Page Footer</h4>
</div>
<script type="text/javascript">
/*Page specific scripts here*/
</script>
</div>
</body>
</html>
1.2 多页模板<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Multi Page Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">/* Shared scripts for all internal and ajax-loaded pages */</script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<!-- First Page -->
<div data-role="page" id="home" data-title="Welcome">
<div data-role="header">
<h1>Multi-Page</h1>
</div>
<div data-role="content">
<a href="#contact-info" data-role="button">Contact Us</a>
</div>
<script type="text/javascript"> //多页面文档内部javascript
/* Page specific scripts here. */
</script>
</div>
<!-- Second Page -->
<div data-role="page" id="contact-info" data-title="Contacts">
<div data-role="header">
<h1>Contact Us</h1>
</div>
<div data-role="content">
Contact information...
</div>
</div>
(1)每个页面必须包含唯一id
(2)最初显示多个页面时,只有第一个页面得到增强并显示
(3)链接到一个内部页面时,必须通过页面id来引用,href="#contact",载入页面的地址multi-page.html#contact
(4)多页面文档内部的javascript不能被其他页面访问
(5)父文档head标签内声明的所有脚本,都可以被内部页面和通过Ajax载入的页面访问
2、页面切换和过度 2.1 切换分类(1)一个多页文档中,一个内部页到另一内部页(Ajax导航)
根据#id <a href="#next">
(2)同一个域范围内,一个单页文档切换到另一单页文档(Ajax导航)
<a href="/blog_article/otherDocument.html">Go to next page</a>
(3)当连接到一个多页面文档时,必须为其链接添加rel="external"(HTTP)
<a href="/blog_article/multi-page.html" rel="external">Home</a>
(4)外部绝对地址,连接到另一个域(HTTP)
<a href="/blog_article/www.mobileweb.com" data-rel="external"></a>
<a href="/blog_article/www.mobileweb.com" target="_blank"></a>
(5)打开dailog
<a href="/blog_article/confirmtion.html" data-rel="dialog">Open Dialog</a>
<a href="/blog_article/confirmtion.html" data-role="dialog">Open Dialog</a>
(6)返回到上一页面
<a href="/blog_article/back.html" data-direction="reverse">Back</a>
(7)移动应用特殊链接,URI
电话
<a href="tel:+1800229933">Call us free!</a>
Video and VoIP Calls
<a href="facetime:101010">Call me using Facetime</a>
<a href="skype:skype_user?call">Call us using Skype</a>
<a href="mailto:info@mobilexweb.com">Mail us</a>
<a href="mailto:info@mobilexweb.com?subject=Contact%20from%20mobile">Mail us</a>
<a href="mailto:info@mobilexweb.com?subject=Contact&body=This%20is%20the%20body">Mail us</a>
2.2 页面间过度<a href="/blog_article/otherDocument.html" data-transition="slide">Go to next page</a>
slide
slideup
slidedown
pop
fade
flip
The default right-to-left animation.
Bottom-to-top animation, mostly used for modal pages.
Top-to-bottom animation.
The new page will grow from a small point in the middle to a full-screen page.
A cross-fade animation between old and new pages.
A 2D or 3D rotation animation. 3D is available only on some devices, such as iOS
devices. On other devices, such as those that are Android-based, this transition
renders a 2D rotation that may not be the effect you really want.
3、toolbar 工具条——使用页眉或页脚 3.1位置模式(1)默认模式(Default:Inline mode)
当页面content内容超过一屏时,滚动页面时,页眉和页脚将隐藏。
<div data-role="header">
<h1>Default</h1>
</div>
(2)固定模式(Fixed)
<div data-role="header" data-position="fixed">
<h1>Fixed</h1>
</div>
<div data-role="footer" data-position="fixed">
</div>
页眉和页脚位于顶部和底部,位置不变,否则当内容较少是,页脚紧随内容之后显示
(3)全屏模式(FullScreen)适用于浏览图片,电子书应用
<div data-role="page" data-fullscreen="true">
<div data-role="header" data-position="fixed">
<h1>Fixed</h1>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
页眉和页脚基于响应来出现和消失
3.2 添加按钮(通用于页眉和页脚)(1)只带有文本按钮
<a href="#">Done</a>
(2)只带有图标的按钮
<a href="#" data-icon="plus" data-iconpos="notext"></a>
(3)既有文本又有图标的按钮
<a href="#" data-icon="plus" >Done</a>
3.3页眉(1)修改按钮位置,默认左侧对齐(),可修改到右侧对齐
<a href="#" data-icon="plus" >Done</a>
(2)添加回退按钮
a)在页面容器添加data-auto-back-btn="true",为某个特定页面添加回退按钮
<div data-role="page" data-auto-back-btn="true" data-back-btn-text="Pervious" data-back-btn-theme="e">
b)在绑定mobileinit选项时,全局启动回退按钮
$(document).bind('mobileinit',function(){
$.mobile.page.prototype.option.addBackBtn=true;
$.mobile.page.prototype.option.backBtnText="Previous"; //回退按钮显示的文字
$.mobile.page.prototype.option.backBtnTheme="b";
});
如果在全局启用了回退按钮,可通过在页面页眉中添加data-auto-back-btn="false"禁用特定页面回退按钮
c)回退链接
<a href="/blog_article/home.html" data-rel="back" data-role="button"> Go Back</a>
3.4 页脚(1)添加永久导航条
<div data-role="footer" data-id="main" data-position="fixed" data-theme="b"> //创建永久导航条,避免页面转换期间闪烁,需要唯一data-id="main"
<div data-role="navbar"> //标记为导航条
<ul>
<li><a href="#" data-icon="star" >天气</a></li> //ui-btn-active默认选中项,ui-state-persist保持固定
<li><a href="#" data-icon="info" >趋势</a></li> //ui-btn-active默认未选中项
<li><a href="/blog_article/setup.html" data-icon="gear" >城市</a></li>
<li><a href="#exit" data-icon="delete" data-rel="dialog" data-transition="pop" >退出</a></li>
</ul>
</div>
</div>
(2)带自定义图标导航条
<!-- tab bar with custom icons -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar" >
<ul>
<li><a href="#" id="home" data-icon="custom">Home</a></li>
<li><a href="#" id="movies" data-icon="custom" >Movies</a></li>
<li><a href="#" id="theatres" data-icon="custom">Theatres</a></li>
</ul>
</div>
</div>
<style>
.ui-navbar-custom .ui-btn .ui-btn-inner { font-size: 11px!important; padding-top: 24px!important; padding-bottom: 0px!important; }
.ui-navbar-custom .ui-btn .ui-icon { width: 30px!important; height: 20px!important; margin-left: -15px!important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: none !important; border-radius: none !important; }
#home .ui-icon { background: url(/images/53-house-w.png) 50% 50% no-repeat; background-size: 22px 20px; }
#movies .ui-icon { background: url(/images/107-widescreen-w.png) 50% 50% no-repeat; background-size: 25px 17px; }
#theatres .ui-icon { background: url(/images/15-tags-w.png) 50% 50% no-repeat; background-size: 20px 20px; }
</style>
4、Main roles available in jQuery Mobile 1.0data-role =""
Role
Description
page
header
content
footer
navbar
button
controlgroup
collapsible
collapsible-set
fieldcontain
listview
dialog
slider
nojs
Defines a page, the unit that jQuery Mobile uses to show content
Header of a page
Content of a page
Footer of a page
Defines a navigation bar, typically inside a header
Renders a visual button
Renders a component
Collapsible panel of content inside a page
Group of collapsible panels (accordion)
Container for form fields
Content of multiple items as a list
Dialog page
Visual slider for Boolean values
Element that will be hidden on jQuery Mobile’s compatible browsers
5、主题(data-theme)Letter Description Color in the default theme
a Highest level of visual priority (default on toolbars) black黑
b Secondary level of visual priority blue蓝
c Baseline level (default swatch for most situations) silver银
d Alternate secondary level gray灰
e Accent yellow黄
猴子原创,欢迎转载。转载请注明: 转载自Cocos2D开发网--Cocos2Dev.com,谢谢!
原文地址: http://www.cocos2dev.com/?p=287
今天用Versions的对比功能查看修改了什么的时候,提示"The FileMerge application could not be located.Please install Xcode Tools from the Apple Developer website."
我查看Xcode的tool中,可以看到FileMerge,出现这个的原因,一般是直接首次安装xcode4.3.3,系统没有设置xcode路径的原因。从老版本 升级到4.3.3的不会出现该问题。
解决办法:
打开终端.输入"sudo xcode-select -switch /Applications/Xcode.app"
我的Xcode是在应用程序中,如果你的不是的话,将/Applications/Xcode.app替换为自己的xcode路径就可以了。
(xcode直接拖到终端的话,可以自动补全路径的哦)。
方法一:使用extern 传递参数args
三个文件 a.h a.cpp 和 b.cpp
1、在a.cpp 中定义参数 int args;
2、在a.h 中继承参数
extern int args;3、在b.cpp 中添加#include "a.h"
然后你就能使用args 这个参数了,这个办法项目qt 中的Signal 和 Slot 来说的有点,就是他不需要你实时触发,只需要你最后监听args 的值,然后产生相应的动作就行。
情况2, 在主界面上要弹出一个 需要一个密码 登录验证的界面。
比如 触发LineEdit 就弹出一个键盘,这种情况。
需要改写LineEdit 类。比较复杂,之后我再写。