資訊專欄INFORMATION COLUMN
摘要：項目需求自適應頁面，兼容安卓，和。要求頁面顯示視頻列表，點擊列表中的圖片和標題就可以播放視頻，視頻列表每頁條，能翻頁。本項目由于是需要大量的數據渲染以及后期的數據填充，所以決定使用模板引擎。同時使用了作為部分框架。使用作為視頻彈窗。
項目需求:自適應頁面，兼容安卓，IOS和PC。要求頁面顯示視頻列表，點擊列表中的圖片和標題就可以播放視頻，視頻列表每頁5條，能翻頁。
本項目由于是需要大量的數據渲染以及后期的數據填充，所以決定使用模板引擎。
同時使用了boostrap作為部分UI框架。
使用Layer作為視頻彈窗。
2.模板引擎引用的是騰訊的art_Template.
模板引擎結構如下：
該模板引擎很好的保證了頁面原結構，即使我這樣的初學者也可以使用它。
注意它的官方如下：art-template官方文檔
標準語法：
`{{value}}
{{data.key}}
{{data["key"]}}
{{a ? b : c}}
{{a || b}}
{{a + b}}`
原始語法：
<%= value %> <%= data.key %> <%= data["key"] %> <%= a ? b : c %> <%= a || b %> <%= a + b %>
直接按照原來的結構然后按照模板的語法進行修改就是了。
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("");
$("#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 = "" + i + ""
$("#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是重點項目，在這里遇到了很多問題。
1.需要PHP對JSON進行轉換【注意：這段方法可以用js代替，所以可把這段php文件刪除】
代碼就這一行：
還需要注意，使用PHP必須要開虛擬機，因為php是后臺語言。否則瀏覽器會報json格式錯誤。
這里的file_get_contents()方法只是獲取數據，加上echo是輸出的意思。
2.然后再AJAX中，就可以直接引入php文件：【注意：這段方法可以用js代替】
url: "artTemp.php",
一般用get方式
type: "get",
Get是向服務器發索取數據的一種請求，而Post是向服務器提交數據的一種請求.通常我們請求數據用get,保存密碼用post.
數據請求成功后對數據進行處理：
success：function()
{ ...... }
【1、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("");
$("#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 = "" + i + ""
$("#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值相同呢？
這里就必須要對元素進行相對定位，找出他們的共同祖先元素，讓我們往模板的結構里看：
<%=items.classify%> <%=items.title%> <%=items.pubdate%><%=items.intro%>
嘉 <%=items.name%> 職 <%=items.position%>
從這里可以看出他們的公共祖先元素自然就是$(".item")啦，所以，怎樣讓他們用一行代碼就同時找到他們的公共祖先元素？而且是點擊他們中的任意一項都能找到？我們自然想到了剛才的這種辦法：
var indexB = $(this).parent().parent().index()
這里的$(this)指代的是當前項，既可以表示$(".img")，又可以表示$(".title")，但是從結構上看，$(".img")只用向上找兩層就可以找到item,但是$(".title")卻需要往上找三層才可以找到item,怎么辦？
我們可以給$(".img")再套一個div:
<%=items[i].classify%> <%=items[i].title%> <%=items[i].pubdate%><%=items[i].intro%>
嘉 <%=items[i].name%> 職 <%=items[i].position%> 888
這樣他們是不是就在同一層級了？
然后用：
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就是，有疑問請評論。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/26216.html
摘要：項目需求自適應頁面，兼容安卓，和。要求頁面顯示視頻列表，點擊列表中的圖片和標題就可以播放視頻，視頻列表每頁條，能翻頁。本項目由于是需要大量的數據渲染以及后期的數據填充，所以決定使用模板引擎。同時使用了作為部分框架。使用作為視頻彈窗。 項目需求:自適應頁面，兼容安卓，IOS和PC。要求頁面顯示視頻列表，點擊列表中的圖片和標題就可以播放視頻，視頻列表每頁5條，能翻頁。 showImg(ht...
摘要：項目需求自適應頁面，兼容安卓，和。要求頁面顯示視頻列表，點擊列表中的圖片和標題就可以播放視頻，視頻列表每頁條，能翻頁。本項目由于是需要大量的數據渲染以及后期的數據填充，所以決定使用模板引擎。同時使用了作為部分框架。使用作為視頻彈窗。 項目需求:自適應頁面，兼容安卓，IOS和PC。要求頁面顯示視頻列表，點擊列表中的圖片和標題就可以播放視頻，視頻列表每頁5條，能翻頁。 showImg(ht...
摘要：項目需求自適應頁面，兼容安卓，和。要求頁面顯示視頻列表，點擊列表中的圖片和標題就可以播放視頻，視頻列表每頁條，能翻頁。本項目由于是需要大量的數據渲染以及后期的數據填充，所以決定使用模板引擎。同時使用了作為部分框架。使用作為視頻彈窗。 項目需求:自適應頁面，兼容安卓，IOS和PC。要求頁面顯示視頻列表，點擊列表中的圖片和標題就可以播放視頻，視頻列表每頁5條，能翻頁。 showImg(ht...
摘要：本文總結了前端老司機經常問題的一些問題并結合個人總結給出了比較詳盡的答案。網易阿里騰訊校招社招必備知識點。此外還有網絡線程，定時器任務線程，文件系統處理線程等等。線程核心是引擎。主線程和工作線程之間的通知機制叫做事件循環。 showImg(https://segmentfault.com/img/bVbu4aB?w=300&h=208); 本文總結了前端老司機經常問題的一些問題并結合個...
閱讀 880·2021-11-15 11:38
閱讀 1600·2021-09-24 09:48
閱讀 838·2021-09-24 09:47
閱讀 2270·2021-08-26 14:15
閱讀 3497·2019-08-30 11:09
閱讀 2602·2019-08-29 16:55
閱讀 1582·2019-08-26 14:01
閱讀 3033·2019-08-23 16:47
