jTemplates异步加载实现与HTML5 video视频开发
1.PHP后台提交自动生成静态列表页面。
2.PHP后台提交自动生成列表页资源/文章的json数据文件，javascriptFileName.js。下面的17881.js。
2.列表页滑动加载使用jTemplates读取javascriptFileName.js数据文件的数据进行展现。
jTemplates是一个基于JQuery的模板引擎插件,适合用来在页面上动态绑定数据动态生成展现数据。。在使用jTemplates时最好先定义好模板，然后将模板迁移至textarea隐藏文本框。官网地址：http://jtemplates.tpython.com/
jTemplates包含三个预定全局变量，分别是$T、$P、$Q。$T为模板提供数据调用功能，$P为模板提供参数变量调用功能，$Q.version提供当前jTemplate的版本.
jTemplates还支持#if、#for、#cycle、#foreach、#include、#param标签，处理实现复杂的业务。
#if 语法：
{#if |COND|}..{#elseif |COND|}..{#else}..{#/if}
#if 示例:
{#if $T.list_id} {$T.list_id} {#/if}
{#if 2*8==16} good {#else} fail {#/if}
{#if $T.age>=18)} 成人了 {#else} 未成年 {#/if}
{#if $T.list_id == 3} System list {#elseif $T.list_id == 4} Users List {#elseif $T.list_id == 5} Errors list {#/if}
#for 语法：
{#for |VAR| = |CODE| to |CODE| [step=|CODE|]}..{#else}..{#/for}
或
{#for |variable| = |start| to |end| [step=|stepBy|]}..{#else}..{#/for}
#for 示例：
默认步长：{#for index = 1 to 10} {$T.index} {#/for}
正向步长：{#for index = 1 to 10 step=3} {$T.index} {#/for}
负向步长及空循环：{#for index = 1 to 10 step=-3} {$T.index} {#else} nothing {#/for}
也可以在循环中使用变量：{#for index = $T.start to $T.end step=$T.step} {$T.index} {#/for}
注意条件中支持使用javascript代码，{#else}是在{#for...}未能执行的时的输出内容。。
主要代码：
数据格式17881.js
var data = {
TotalCount:20,
Lists:[
{reit_url:'pv01q2',elementname:'终极狂飙3',elementlogo:'../img/res/pv01q2/element_logo_1308051724017817.png',flodertype:'你沸腾的节操将会悲催的碎一地！',downpath:'../pack/3dcar3_0820_4028.apk?n=3dcar3_0820_4028'},
{reit_url:'mgv520',elementname:'海贼王',elementlogo:'../img/res/mgv520/element_logo_1308140947295130.png',flodertype:'热门游戏',downpath:'../pack/dreamonepiece_feiliu_build_100537.apk?n=DreamOnePiece_feiliu_build_100537'},
]};data.js相当于数据处理层，文件代码：
(function($) {
// 插件的定义
$.fn.busdata = function(options) {
// build main options before element iteration
var opts = $.extend({}, $.fn.busdata.defaults, options);
return this.each(function() {
var obj = $(this);
opts.start = (opts.page - 1) * opts.pageSize;
opts.end = opts.pageSize;
$.fn.busdata.start(obj,opts.start,opts.end,opts.template,opts.jsName);
//$(opts.menuDiv_dom, $("#"+opts.menuDiv)).hide(opts.showSpeed);
});
};
//$.fn.busdata.n = 0;
// 定义暴露函数
$.fn.busdata.start = function(obj,start,end,template,jsName) {
$loadbtn = $(".load-btn");
jQuery.ajax({
type: "get",
url: jsName,
dataType : "script",
beforeSend: function(){
$loadbtn.html(""); //设置加载状态图
},
success: function(msg){
data.start = start;
data.end = end;
videoHead = "";
var thisUrl = document.location.host;
var tip = thisUrl.split(":");
if(thisUrl.indexOf("16wifi") > -1){
videoHead = "http://"+tip[0]+"/pack/feiliu/video";
} else {
videoHead = "http://"+tip[0]+":8090/pack/feiliu/video";
}
data.videoHead = videoHead;
if(data.TotalCount - data.start > 0){
// 设置模板
if(template=="focusTemplateContainer"){
$("#buttonFoucs").setTemplateElement("buttonFocusTemplateContainer");
$("#buttonFoucs").processTemplate(data);
}
obj.setTemplateElement(template);
// 处理模板
obj.processTemplate(data);
$loadbtn.html("点击加载更多");
}else{
$loadbtn.text("少年 :-) 你已浏览到末页！");
return;
}
},
complete: function(){
//
}
})
};
// 插件的defaults
$.fn.busdata.defaults = {
pageSize:10,
page:1,
data:'',
jsName: '../js/17881.js',
template: ''
};
// 闭包结束
})(jQuery);
我们知道HTML5
这里暂且不讨论。而手机目前主要是
ios和android两大阵营。如果是为手机端做开发进行视频播放，如今已经可以大胆的使用video了。安卓系统上HTML5