jquery mobile有三种方式来控制loading效果:
1.$.mobile.loading()
2.$.mobile.showPageLoadingMsg()
3.$.mobile.hidePageLoadingMsg()
其中showPageLoadingMsg和hidePageLoadingMsg方法在1.2以后使用loading方法代替了。
具体示例如下:
//cue the page loader
$.mobile.loading( ‘show’ );
//use theme swatch “b”, a custom message, and no spinner
$.mobile.loading( ‘show’, { theme: “b”, text: “foo”, textonly: true, textVisible:true });
background-image: -webkit-gradient(linear, right top, left top, rgba(255,255,255,0),#E1D9CD);/ Saf4+, Chrome /
background-image: -webkit-linear-gradient(left,rgba(255,255,255,0),#E1D9CD);/ Chrome 10+, Saf5.1+ /
background-image: -moz-linear-gradient(left,rgba(255,255,255,0),#E1D9CD);/ FF3.6 /
background-image: -ms-linear-gradient(left,rgba(255,255,255,0),#E1D9CD);/ IE10 /
background-image: -o-linear-gradient(left,rgba(255,255,255,0),#E1D9CD);/ Opera 11.10+ /
background-image: linear-gradient(left,rgba(255,255,255,0),#E1D9CD);}
这里用rgba颜色来设置颜色透明度，linear-gradient(left,rgba(255,255,255,0) 10%,#E1D9CD 10%);在颜色后面带上百分比来设置改颜色算占的比例
摘自:http://css-tricks.com/snippets/css/ipad-specific-css/在做响应式设计的时候个人兼容性css代码则将下面ipad兼容代码加入:
@media only screen and (device-width: 768px) {
/ For general iPad layouts /
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/ For portrait layouts only /
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/ For landscape layouts only /
}
在为各种手持设备专有的css则如下:
@media handheld, only screen and (max-width: 980px),only screen and (device-width: 768px){}
data-role="page"以外的元素不被加载data-role="page" element and its descendants and pulls that into the current dom.<head> of the document will not be included.data-role="page" element and it will be included when jQuery Mobile does its AJAX load of the page.data-ajax="false"来防止ajax提交一直以来都有一个问题，rain css框架的类名过长，导致页面的class内容特别多，如：<input type=’button’ class=’heightM widthM css3_roundS css3_gradient_blue button blueButton’ value=’button’/>
现在个人将所有长类名增加了一个缩写，页面class内容长度可大大缩短:
<input type=’button’ class=’heightM rounds gb btn bluebtn’ value=’button’/>
不过还有个问题就是使用者不明白的短类名的由来，也就不会直接书写(需要查阅css文件)，不过现成的各个模块的示例可以在控制台直接查看代码并复制代码来使用。
框架的github地址: https://github.com/RainZhai/Rain-CSS-Framework
[caption id=”attachment_194” align=”alignnone” width=”697” caption=”rain css 框架首页”]
[/caption]
关于类名的设计的一点规律:
类名虽然简化了，但是还是很容易使用，如width-10(宽度100像素)简写成了w-10,而textAlignCenter(文本居中)则简写成了tac,很明显，类名简写成了每个单词的首字母，并且每个字母都为小写.部分示例代码如下:
.fn,.fontNormal{ font-style:normal;}
.fi,.fontItalic{ font-style:italic;}
.fo,.fontOblique{ font-style:oblique;}
.fv,.fontVariant{ font-variant:small-caps;}
.fwn,.fontWeightNormal{ font-weight:normal;}
.bord,.fontBord{ font-weight:bold;}
.strong{ font-weight:bold;}
.border,.fontBorder{ font-weight:bolder;}
.lighter,.fontLighter{ font-weight: lighter;}
.fsxxs,.fontsizeXxsmall{ font-size:xx-small;}
.fsxs,.fontsizeXsmall{ font-size: x-small;}
.fss,.fontsizeSmall{ font-size: small;}
.fsm,.fontsizeMedium{ font-size: medium;}
.fsl,.fontsizeLarge{ font-size: large;}
.fsxl,.fontsizeXlarge{ font-size: x-large;}
.fsxxl,.fontsizeXxlarge{ font-size: xx-large;}
.fs-1,.fontsize-1{ font-size: 1em;}
很早的时候个人写了一个tabs效果插件,但是使用起来繁杂，不够简单,于是作了新的改动，现在使用非常的简便。
[caption id=”attachment_189” align=”alignnone” width=”633” caption=”jquery tabs plugin效果图”]
[/caption]
javascript调用如下:
$(‘.tabswrap-1’).tabs();
html则只需要符合一定的格式带有li标签和div标签即可:
<div class=’tabswrap-1’>
<ul class=’listStyleNo noPadding noRightMargin borderBottom heightL clearfix’>
<li class=’left marginBottomNeg-1 marginRightSS bgWhite displayBlock border noBottomBorder css3_round_topS textDecNone paddingLeft paddingRight itemColorBlack’ href=’#’>Home</li>
<li class=’left marginBottomNeg-1 marginRightSS bgWhite displayBlock css3_round_topS textDecNone paddingLeft paddingRight itemLightGrey itemColorBlack’ href=’#’>Profile</li>
<li class=’left marginBottomNeg-1 bgWhite displayBlock css3_round_topS textDecNone paddingLeft paddingRight itemLightGrey itemColorBlack’ href=’#’>Messages</li>
</ul>
<div class=’c_tabpanel’ id=’tab-0’ >
<h2>this is home detail.</h2>
</div>
<div class=’c_tabpanel hide’ id=’tab-1’ >
<h2>this is Profile detail.</h2>
</div>
<div class=’c_tabpanel hide’ id=’tab-2’ >
<h2>this is Messages detail.</h2>
</div>
</div>
新tabs插件的代码如下:
$.fn.extend({
tabs : function(obj) {
var o = $.extend({
tabSelector:null,
panelSelector:null,
‘event’:”click”,
currentClass:’’,
hoverClass:’’
}, obj || {});
var _this =$(this),
//tab 的钩子
temp_tab = o.tabSelector || ‘li’,
//受控的id开头
temp_panel = o.panelSelector || ‘div’,
tabsize = $(temp_tab).length,
//tab触发事件
tabE = o.event || ‘click’,
//当前tablink的样式类
tabClass = o.currentClass,
//未选中tablink的hover类
hoverClass = o.hoverClass;
_this.children(temp_panel).hide();
$(_this.children(temp_panel)[0]).show();
_this.find(temp_tab).bind(tabE,function(){
if(tabsize>0){
$(temp_tab).removeClass(tabClass).addClass(hoverClass);
$(this).addClass(tabClass).removeClass(hoverClass);
var i = $(this).index();
_this.children(temp_panel).hide();
$(_this.children(temp_panel)[i]).show();
}
});
return _this;
}
});
个人使用QuarkJS开发了一款小游戏《松鼠蹦蹦蹦》，支持ios端，安卓端和pc端。打开链接地址就可以在浏览器里面直接玩起来，并且同时支持横屏和竖屏。
游戏地址: http://www.webdevelopmentmachine.com/demo/game.html
安卓版本客户端下载地址: 松鼠蹦蹦蹦安卓版下载
欢迎大家对游戏提出意见，各种改进:)
[caption id=”attachment_183” align=”alignnone” width=”639”]
松鼠蹦蹦蹦游戏图片[/caption]
jj:320623198811292501
ph:15298805212