html5

jQuery/html5 的插件turn.js实现的书本和杂志翻页效果

星期日, 五月 6th, 2012 | html5, pagemaker | 没有评论

看到一个很不错的jquery的插件turn.js,在支持html5的设备上(PC,平板,手机等)实现的像很多电子杂志和电子书的翻页效果

turn.js 支持硬件加速来让翻页效果更加平滑。

可通过 API 来获取当前显示的页号,并提供选项来定制默认页号、加速器、阴影和延时 等

更多TURN.JS信息可以去翻阅下列资料:
——————————————————
Github: https://github.com/blasten/turn.js
Reference: https://github.com/blasten/turn.js/wiki/Reference
Website: www.turnjs.com
——————————————————

上贴图:

Tags: , , , ,

jquery moblie 按钮图标那点事

星期四, 四月 12th, 2012 | html5, pagemaker | 一条评论

记忆力不好记不住jqm图标的样子,做此文图文对照,很方便自己知道是什么图如下(系统提供的18个图标):本文参照api摘录版:

<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>
 
data-icon属性可以被用来创建如下所示的图标
左箭头 	data-icon="arrow-l"
右箭头 	data-icon="arrow-r"
上箭头 	data-icon="arrow-u"
下箭头 	data-icon="arrow-d"
删除   	data-icon="delete"
添加 	data-icon="plus"
减少 	data-icon="minus"
检查 	data-icon="check"
齿轮 	data-icon="gear"
刷新    data-icon="refresh"
前进 	data-icon="forward"
后退 	data-icon="back"
网格 	data-icon="grid"
五角星 	data-icon="star"
警告 	data-icon="alert"
信息 	data-icon="info"
首页 	data-icon="home"
搜索 	data-icon="search"

› Continue reading

Tags: , , , ,

javascript判断变量是否定义(undefined)转换函数

星期四, 四月 12th, 2012 | ajax, html5 | 没有评论

在处理html5的页面取值的时候,发现当取不到的时候报错,js程序不再执行,直接写个修正函数处理
如下:

//修正未定义的变量
function checkUnfined(value){
	if(typeof(value)=='undefined'){
	return "";	
	}
	return value;	
}

话说判断是否未定义也是很常用的东东

Tags: , , ,

jquery mobile动态添加元素之后不能正确渲染解决方法(listview和div html 元素)

星期日, 四月 8th, 2012 | html5, pagemaker | 没有评论

问题就不描述了,ajax处理玩数据对于按钮等操作都没有被渲染,需要调用jqm的css去渲染,方法如下:
一:对于listview: $(‘ul’).listview(‘refresh’);
二:对于div或其他: $(‘allAddContent’).trigger( “create” );

1.
var list = $("<li><a href='http://blog.i5a6.com'>智友工作室-"+i+"</a></li>");
  $("#listShow").append(list).find("li:last").hide();
  $('ul').listview('refresh');
html 如下:
<div data-role="content">
        <ul data-role="listview" id="listShow" data-inset="true">
          <li><a href="#">html5</a> </li>
          <li><a href="#">css</a></li>
        </ul>
      </div>
2.
var allAddCon="<a href=\"javascript:goto('i5a6?id="+data.rows[i-1].id+"')\"; data-role='button' data-theme='b'>智友网络</a>";
$("#allAddContent").html(allAddCon).trigger( "create" );;

Tags: , , ,

Rss

Search

文章分类

Meta