【視頻列表頁面】利用模板引擎動態渲染數據
項目需求:自適應頁面，兼容安卓，IOS和PC。要求頁面顯示視頻列表，點擊列表中的圖片和標題就能夠播放視頻，視頻列表每頁5條，能翻頁。javascript
本項目因爲是須要大量的數據渲染以及後期的數據填充，因此決定使用模板引擎。
同時使用了boostrap做爲部分UI框架。
使用Layer做爲視頻彈窗。php
先說模板引擎及渲染
1.頭部tab切換按鈕以下：
<!--導航欄start-->
<nav class="container">
<ul class="country">
<li class="active selected" id="Americia">美國</li>
<li id="England">英國</li>
<li id="Canada">加拿大</li>
<li id="Austrilia">澳大利亞</li>
<li id="NewZealand">新西蘭</li>
<li id="Europe">歐洲</li>
<li id="Asia">亞洲</li>
</ul>
</nav>
2.模板引擎引用的是騰訊的art_Template.
<script src="lib/template-web.js"></script>
模板引擎結構以下：css
<!--模板引擎start-->
<script id="template" type="text/html">
<div class="item clearfix">
<div class="reload pull-left">
<div class="playreload">
<img class="reloadimg" src="<%=items.imgsrc%>" alt="" />
<div class="mengban"></div>
<img class="play" src="img/play.png" alt="" />
</div>
</div>
<div class="info pull-left">
<div class='top'>
<span class="classify"><%=items.classify%></span>
<span class="title"> <%=items.title%></span>
<span class="time">
<span class="glyphicon glyphicon-time "></span>
<span class="pubdate "><%=items.pubdate%></span>
</span>
</div>
<p class='intro text-overflow'>
<%=items.intro%>
</p>
<div class="bot">
<span class="jia">嘉</span>
<span class="name"><%=items.name%></span>
<span>
</span>
<span class="zhi">職</span>
<span class="position"><%=items.position%></span>
<span class="click-rite"></span>
</div>
</div>
</div>
</script>
<!--模板引擎end-->
該模板引擎很好的保證了頁面原結構，即便我這樣的初學者也可使用它。
注意它的官方以下：art-template官方文檔html
標準語法：java
`{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}`jquery
原始語法：ios
<%= value %> <%= data.key %> <%= data['key'] %> <%= a ? b : c %> <%= a || b %> <%= a + b %>
直接按照原來的結構而後按照模板的語法進行修改就是了。git
3. JS處理：
window.onload = function() {
var data;
$.ajax({
dataType: 'json',
url: 'data.json',
data: data,
type: 'get',
success: function(data, key) {
//轉化爲js對象
var jsArr = data;
//遍歷JSON對象，將JSON對象轉化爲數組
for(var key in jsArr) {};
//點擊國家按鈕顯示指定內容
$("body").on("click", ".country>li", function(e) {
$(this).addClass('active').siblings().removeClass('active');
//獲取當前tab中鼠標停在的table欄的索引
var index = $(this).index();
//根據這個索引切換，下面的展現
$("li").eq(index).addClass("selected").siblings().removeClass("selected");
//獲取當前點擊項目的ID
var indexId = $(this).attr('id');
//新建數組，將當前點擊項的id賦值給當前要顯示的數組做爲KEY值，就獲取的當前顯示項的數據
var jsArri = jsArr[this.id];
if(jsArri === undefined || jsArri.length == 0) {
$('.medialist').html('<img class="no-content" style="" src="img/no_content.png" alt="" />');
$('#page').hide();
} else {
$('#page').show();
}
// 分頁
$('#page').html("");
var pageData = jsArri.length;
$(function() {
var count = pageData; //設置總條數
var pageSize = 5; //每頁顯示的條數
var pageCount = Math.ceil(count / pageSize); //能顯示幾頁
var currentPage = 1; //默認顯示第一頁
//作個分頁按鈕
for(var i = 1; i <= pageCount; i++) {
var pageN = '<span class="pageName" selectPage="' + i + '">' + i + '</span>'
$('#page').append(pageN);
}
//默認顯示第一頁
$('.medialist').html('');
for(i = (currentPage - 1) * pageSize; i < pageSize * currentPage; i++) {
var obj = {
items: jsArri[i]
};
var result = template('template', obj);
$('.medialist').append(result);
$('#page span:first-child').addClass('choosed')
};
//顯示選擇頁的內容
$('.pageName').click(function() {
var selectPage = $(this).attr('selectPage');
$('#page').children('span').removeClass('choosed');
$('#page').children('span').eq(selectPage - 1).addClass('choosed');
$('.medialist').html('');
// 判斷是不是最後一頁
if(selectPage == pageCount) {
for(i = (selectPage - 1) * pageSize; i < pageData; i++) {
var obj = {
items: jsArri[i]
};
var result = template('template', obj);
$('.medialist').append(result);
}
} else {
for(i = (selectPage - 1) * pageSize; i < pageSize * selectPage; i++) {
var obj = {
items: jsArri[i]
};
console.log(obj);
var result = template('template', obj);
console.log(result);
$('.medialist').append(result);
}
}
});
})
//點擊預覽圖顯示彈窗
$(".reload,.title").on("click", function() {
//取得當前點擊的預覽圖的下標
var indexB = $(this).parent().parent().parent().index();
//將預覽圖的下標做爲當前顯示的國家數據的中的urlpc值
var urlpc = jsArri[indexB].urlpc;
var title = jsArri[indexB].title;
if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {
//Layer彈窗開始
layer.open({
type: 2,
title: title,
area: ['320px', '240px'],
shade: 0.6,
closeBtn: 0,
shadeClose: true,
content: urlpc,
});
} else {
//Layer彈窗開始
layer.open({
type: 2,
title: title,
area: ['640px', '360px'],
shade: 0.6,
closeBtn: 0,
shadeClose: true,
content: urlpc,
});
layer.msg('點擊任意處可關閉', function() {
time: 500
})
//Layer彈窗結束
}
});
});
//加載第一項美國
$("#Americia").trigger("click");
}
})
JS這裏的思路解析
JS是重點項目，在這裏遇到了不少問題。github
1.須要PHP對JSON進行轉換【注意：這段方法能夠用js代替，因此可把這段php文件刪除】
代碼就這一行：web
<?php
echo file_get_contents("data.json")
?>
還須要注意，使用PHP必需要開虛擬機，由於php是後臺語言。不然瀏覽器會報json格式錯誤。
這裏的file_get_contents()方法只是獲取數據，加上echo是輸出的意思。
2.而後再AJAX中，就能夠直接引入php文件：【注意：這段方法能夠用js代替】
url: 'artTemp.php',
通常用get方式
type: 'get',
Get是向服務器發索取數據的一種請求，而Post是向服務器提交數據的一種請求.一般咱們請求數據用get,保存密碼用post.
數據請求成功後對數據進行處理：
success：function()
{ ...... }
【一、2中用JS代替的方法】
這裏若是要用PHP的話，須要用到虛擬機，以及對php有基本的瞭解；其實能夠用jquery來代替，讓ajax直接獲取data.json:
var data;
$.ajax({
dataType:'json',
url:'data.json',
data:data,
type: 'get',
success: function(data, key) {
//轉化爲js對象
var jsArr = data;
這裏要注意首先須要在ajax以前var 一個data變量，而後再ajax獲取到data.json後將值傳入data變量：
data:data,
同時，在success中的：var jsArr =JSON.parse(data)就能夠直接換成var jsArr = data。由於
JSON.parse() 方法用來解析JSON字符串，構造由字符串描述的JavaScript值或對象。
在這裏還需設置dataType:json;由於在jquery文檔中有這麼一句：
這樣就不須要在用JSON.parse()方法了。關於這一點，這篇文章有說明：
How to Use JSON Data with PHP or JavaScript
這裏立刻說的JSON.parse就能夠不用了↓↓↓↓
3.將data數據轉化爲JSON對象
使用JSON.parse()方法：
var jsArr = JSON.parse(data);
4.將JSON對象轉化爲數組
而後再遍歷JSON對象，將JSON轉化爲數組：
for(var key in jsArr) {
console.log(jsArr[key])
};
5.點擊國家按鈕顯示對應內容
而後是點擊事件，點擊指定的國家顯示相應的視頻內容列表：
//此處使用的是事件委託，將li的點擊委託給body.
$("body").on("click", ".country>li", function(e) {
//給當前點擊項添加active樣式，先給本身添加樣式，再幹掉其餘人的樣式。
$(this).addClass('active').siblings().removeClass('active');
//獲取當前tab中鼠標停在的table欄的索引
var index = $(this).index();
//根據這個索引切換，下面的展現 $("li").eq(index).addClass("selected").siblings().removeClass("selected");
//獲取當前點擊項目的ID
var indexId = $(this).attr('id');
//【重要】新建數組，將當前點擊項的id賦值給當前要顯示的數組做爲KEY值，就獲取的當前顯示項的數據
console.log(jsArr[this.id])
var jsArri = jsArr[this.id];
//此處因爲json中的數據不完整，還致使我看錯了，一直點擊沒有數據的按鈕，而後提示undefind....
接下倆還須要根據請求到的數據，若是 數據爲空，就顯示提示圖片：沒有內容；若是有數據，顯示內容。
判斷：
if(jsArri === undefined || jsArri.length == 0) {
$('.medialist').html('<img class="no-content" style=""
src="img/no_content.png" alt="" />');
$('#page').hide();
} else {
$('#page').show();
}
而後是對內容進行分頁顯示
此處稍微複雜，我用的是本身編寫的分頁工具，應爲各類插件和需求不相符。
首先對分頁工具進行清空
$('#page').html("");
設置變量pagedata，將當前請求到的國家內的 數據長度賦值給它，就求到了請求到的數據有幾條
var pageData = jsArri.length;
進行分頁：
$(function() {
var count = pageData; //設置總條數
var pageSize = 5; //每頁顯示的條數
var pageCount = Math.ceil(count / pageSize); //能顯示幾頁
var currentPage = 1; //默認顯示第一頁
//作個分頁按鈕
for(var i = 1; i <= pageCount; i++) {
var pageN = '<span class="pageName" selectPage="' + i + '">' + i + '</span>'
$('#page').append(pageN);
這樣就顯示出基本的分頁列表了。
}
//默認顯示第一頁
清空視頻列表
$('.medialist').html('');
因爲數據index從0開始算，因此要用i=當前顯示的數字-1.
for(i = (currentPage - 1) * pageSize; i < pageSize * currentPage; i++) {
var obj = {
items: jsArri[i]
};
在循環中渲染模板引擎
var result = template('template', obj);
$('.medialist').append(result);
給第一頁分頁添加樣式
$('#page span:first-child').addClass('choosed')
};
//顯示選擇頁的內容
$('.pageName').click(function() {
選取到當前被點擊的分頁數字
var selectPage = $(this).attr('selectPage');
給其餘分頁數字去掉選中樣式
$('#page').children('span').removeClass('choosed');
給當前選中的分頁數字添加樣式
$('#page').children('span').eq(selectPage - 1).addClass('choosed');
清空
$('.medialist').html('');
// 判斷是不是最後一頁
若是是最後一頁，只須要渲染最後幾條數據：
if(selectPage == pageCount) {
for(i = (selectPage - 1) * pageSize; i < pageData; i++) {
var obj = {
items: jsArri[i]
};
var result = template('template', obj);
$('.medialist').append(result);
}
} else {
//若是不是最後一頁，就是中間的頁面，就直接計算出是那幾條數據進行渲染。
for(i = (selectPage - 1) * pageSize; i < pageSize * selectPage; i++) {
var obj = {
items: jsArri[i]
};
console.log(obj);
var result = template('template', obj);
console.log(result);
$('.medialist').append(result);
}
}
});
})
至此，已經完顯示了json中的數據。
還有一點，因爲渲染數據是由點擊上面的按鈕實現的，因此在頁面加載後默認的第一項美國是不顯示的，因此須要美國的內容顯示，就要在頁面加載完畢後模擬點擊事件，此處使用trigger()方法：
$("#Americia").trigger("click");
這樣就能夠頁面加載後第一頁顯示默認的國家欄目的數據啦，若是想第一頁顯示其餘國家的數據，直接替換ID便可。
接下來的部分會演示如何利用Layer插件播放視頻。
4.點擊視頻預覽圖播放視頻
首先固然是要給預覽圖的標籤註冊點擊事件：
這裏能夠用事件委託
$(".title").on("click", function() { ...... }
而後再在點擊事件中獲取當前點擊項的index：
var indexB = $('.item').find('img').index($(this));
也能夠這麼寫：
var indexB = $(this).parent().parent().index()
這個更容易理解，找當前被點擊元素的父元素的父元素，再取他的index，由於每一個父元素都有惟一一個img，因此就獲得了index！
5.實現點擊圖片和標題都可播放視頻：
要想實現點擊圖片和標題均可以播放視頻，那麼必須給他們綁定同一個事件。
jquery爲多個選擇器綁定同一個事件方法：
("#start,#end").on("click",function(){
alert("The paragraph was clicked.");
});
因此此處可使用這個方法：
$(".reload,.title").on("click",function() { }
可是在接下來的取indexB值的時候遇到了問題：$('.reloadimg')和 $('.title')他們的路徑不同，如何然他們取得index值相同呢？
這裏就必需要對元素進行相對定位，找出他們的共同祖先元素，讓咱們往模板的結構裏看：
<div class="item clearfix">
<div class="reload pull-left">
<img class="reloadimg" src="<%=items.imgsrc%>" alt="" />
<div class="mengban"></div>
<img class="play" src="img/play.png" alt="" />
</div>
<div class="info pull-left">
<div class='top'>
<span class="classify"><%=items.classify%></span>
<span class="title"> <%=items.title%></span>
<span class="time">
<span class="glyphicon glyphicon-time "></span>
<span class="pubdate "><%=items.pubdate%></span>
</span>
</div>
<p class='intro text-overflow'>
<%=items.intro%>
</p>
<div class="bot">
<span class="jia">嘉</span>
<span class="name"><%=items.name%></span>
<span>
</span>
<span class="zhi">職</span>
<span class="position"><%=items.position%></span>
<span class="click-rite"></span>
</div>
</div>
</div>
從這裏能夠看出他們的公共祖先元素天然就是$(".item")啦，因此，怎樣讓他們用一行代碼就同時找到他們的公共祖先元素？並且是點擊他們中的任意一項都能找到？咱們天然想到了剛纔的這種辦法：
var indexB = $(this).parent().parent().index()
這裏的$(this)指代的是當前項，既能夠表示$(".img")，又能夠表示$(".title")，可是從結構上看，$(".img")只用向上找兩層就能夠找到item,可是$(".title")卻須要往上找三層才能夠找到item,怎麼辦？
咱們能夠給$(".img")再套一個div:
<div class="item clearfix">
<div class="reload pull-left" >
<div class="playreload">
<img class="reloadimg" src="<%=items.imgsrc%>" alt="" />
<div class="mengban"></div>
<img class="play" src="img/play.png" alt="" />
</div>
</div>
<div class="info pull-left">
<div class='top'>
<span class="classify"><%=items[i].classify%></span>
<span class="title"><%=items[i].title%></span>
<span class="pubdate pull-right"><%=items[i].pubdate%></span>
<span class="glyphicon glyphicon-time pull-right"></span>
</div>
<p class='intro text-overflow'>
<%=items[i].intro%>
</p>
<div class="bot">
<span class="jia">嘉</span>
<span class="name"><%=items[i].name%></span>
<span class="zhi">職</span>
<span class="position"><%=items[i].position%></span>
<span class="glyphicon glyphicon-eye-open"></span>
<span class="click-rite">888</span>
</div>
</div>
</div>
這樣他們是否是就在同一層級了？
而後用：
var indexB = $(this).parent().parent().parent().index();
就能夠獲取到當前點擊項和另外一項的共同index啦！
而後將預覽圖的下標做爲當前顯示的國家數據中的urlpc值
var urlpc = jsArri[indexB].urlpc; var title = jsArri[indexB].title;
最後使用layer插件：
在此奉上 layer彈出層插件官方演示文檔
這裏還須要判斷客戶端：
if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {
//Layer彈窗開始
layer.open({
type: 2,
title: title,
area: ['320px', '240px'],
shade: 0.6,
closeBtn: 0,
shadeClose: true,
content: urlpc,
});
} else {
//Layer彈窗開始
layer.open({
type: 2,
title: title,
area: ['640px', '360px'],
shade: 0.6,
closeBtn: 0,
shadeClose: true,
content: urlpc,
});
layer.msg('點擊任意處可關閉', function() {
time: 500
})
//Layer彈窗結束
}
OK，已經能夠實現點擊預覽圖顯示對應的視頻了！
同時別忘了給美國追加click事件，否則第一頁的數據不顯示，由於顯示隱藏是經過click操做的：
//加載第一項美國
$("#Americia").trigger("click");
至此已經完成業務邏輯的重要部分，css移動端就不用說了，套boostrap就是，有疑問請評論。
- 1. 模板引擎渲染頁面
- 2. 模板引擎 Thymeleaf 動態渲染 HTML
- 3. 模板渲染引擎
- 4. 【模板引擎】什麼會用到模板引擎？頁面渲染選擇thymeleaf模板引擎還是Vue？
- 5. 解決動態渲染頁面表格
- 6. 模板渲染引擎手冊
- 7. koa test3 ejs模板引擎 views渲染
- 8. 第三天： 使用Themeleaf模板引擎渲染web視圖
- 9. Spring Boot使用Freemarker模板引擎渲染web視圖
- 10. Spring Boot使用Thymeleaf模板引擎渲染web視圖
- 更多相關文章...
- • jQuery Mobile 面板 - jQuery Mobile 教程
- • jQuery Mobile 列表視圖 - jQuery Mobile 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Flink 數據傳輸及反壓詳解
-
每一个你不满意的现在，都有一个你没有努力的曾经。