jTemplates是一个基于JQuery的模板引擎插件,适合用来在页面上动态绑定数据动态生成展现数据。。在使用jTemplates时最好先定义好模板,然后将模板迁移至textarea隐藏文本框。官网地址:http://jtemplates.tpython.com/
<textarea id="txtTemplate" style="display:none"> <![CDATA[ This is {$T.name}. ]]> </textarea>
#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...}未能执行的时的输出内容。。
主要代码:
<script type="text/javascript" src="../js/jquery-jtemplates.js"></script> <script type="text/javascript" src="../js/data.js"></script> <textarea id="resourceTemplateContainer" style="display: none;"> {#foreach $T.Lists as row begin=$T.start count=$T.end} <li> <div class="icon"> <img alt="{$T.row.elementname}" src="{#if $T.row.elementlogo}{$T.row.elementlogo}{#else}../img/bg72.png{#/if}" title=""> <i class=""></i> </div> <div class="info"> <h2>{$T.row.elementname}</h2> <p class="txt">{$T.row.flodertype}</p> <span class="arrow"></span> <div class="downbtn free"><a title="{$T.row.elementname}" href="{$T.row.downpath}"></a>免费下载</div> </div> <a class="down-area" title="点击查看详情" href="res_{#if document.getElementById("isios").value ==0}17881{#elseif document.getElementById("isios").value ==1}17941{#/if}_{$T.row.reit_url}.html"></a> </li> {#/for} </textarea> <script type="text/javascript"> $(document).ready(function(){ $(".bar .slidemenubtn").click(function(){ //bug fix -chrome中的 blur事件要先调用focus()否则blur无效 this.focus(); $(".slidemenu").slideToggle("slow"); }).blur(function(){ $(".slidemenu").hide("slow"); }); var pagenum = 1 , dataFileName = '../js/17881', templateName = "resourceTemplateContainer"; $(".ajax-wrap ul").busdata({pageSize:"10", page:1, jsName:dataFileName + ".js",template:templateName}); $(".load-btn").click(function(){ pagenum++; var con = $(".ajax-wrap ul").busdata({pageSize:"10", page:pagenum, jsName:dataFileName + ".js", template:templateName}); }); }); </script> 数据格式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("<b class='loading'></b>"); //设置加载状态图 }, 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 <video>标签在PC端各浏览器的支持不尽如人意,如果要考虑兼容,需要很多种的fallback支持,如下事例:
<video onclick="this.play();" poster="../html5video/Clip_1080_5sec_10mbps_h264.jpg" width="80" height="60" title="Clip_1080_5sec_10mbps_h264"> <source src="../html5video/Clip_1080_5sec_10mbps_h264.m4v" type="video/mp4" /> <source src="../html5video/Clip_1080_5sec_10mbps_h264.webm" type="video/webm" /> <object type="application/x-shockwave-flash" data="../html5video/flashfox.swf" width="80" height="60" style="position:relative;"> <param name="movie" value="../html5video/flashfox.swf" /> <param name="allowFullScreen" value="true" /> <param name="flashVars" value="autoplay=true&controls=true&fullScreenEnabled=true&posterOnEnd=true&loop=false&poster=../html5video/Clip_1080_5sec_10mbps_h264.jpg&src=Clip_1080_5sec_10mbps_h264.m4v" /> <embed src="../html5video/flashfox.swf" width="80" height="60" style="position:relative;" flashVars="autoplay=true&controls=true&fullScreenEnabled=true&posterOnEnd=true&loop=false&poster=../html5video/Clip_1080_5sec_10mbps_h264.jpg&src=Clip_1080_5sec_10mbps_h264.m4v" allowFullScreen="true" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_en" /> <img alt="Clip_1080_5sec_10mbps_h264" src="../html5video/Clip_1080_5sec_10mbps_h264.jpg" style="position:absolute;left:0;" width="80" height="60" title="Video playback is not supported by your browser" /> </object> </video>
这里暂且不讨论。而手机目前主要是
ios和android两大阵营。如果是为手机端做开发进行视频播放,如今已经可以大胆的使用video了。既然两大阵营目前都对 HTML5 video 支持的不错,下面就说说使用中基础知识。
支持的属性表:
Attribute |
Value |
Description |
---|---|---|
preload This attribute was formerly named autobuffer, and was boolean. |
|
|
autoplay |
Boolean—any value sets this to |
If present, asks the browser to play the media automatically. |
controls |
Boolean—any value sets this to |
If present, causes the browser to display the default media controls. |
height (video only) |
pixels |
The height of the video player. |
loop |
Boolean—any value sets this to |
If present, causes the media to loop indefinitely. This attribute is supported in iOS 5.0 and later. |
poster (video only) |
url of image file |
If present, shows the poster image until the first frame of video has downloaded. |
src |
url |
The URL of the media. |
width (video only) |
pixels |
The width of the video player. |
Extensions |
MIME type |
---|---|
|
video/quicktime |
|
video/mp4 |
|
video/x-m4v |
|
video/3gpp |
补充: