資訊專欄INFORMATION COLUMN
摘要：項(xiàng)目需求自適應(yīng)頁面，兼容安卓，和。要求頁面顯示視頻列表，點(diǎn)擊列表中的圖片和標(biāo)題就可以播放視頻，視頻列表每頁條，能翻頁。本項(xiàng)目由于是需要大量的數(shù)據(jù)渲染以及后期的數(shù)據(jù)填充，所以決定使用模板引擎。同時(shí)使用了作為部分框架。使用作為視頻彈窗。
項(xiàng)目需求:自適應(yīng)頁面，兼容安卓，IOS和PC。要求頁面顯示視頻列表，點(diǎn)擊列表中的圖片和標(biāo)題就可以播放視頻，視頻列表每頁5條，能翻頁。
本項(xiàng)目由于是需要大量的數(shù)據(jù)渲染以及后期的數(shù)據(jù)填充，所以決定使用模板引擎。
同時(shí)使用了boostrap作為部分UI框架。
使用Layer作為視頻彈窗。
2.模板引擎引用的是騰訊的art_Template.
模板引擎結(jié)構(gòu)如下：
該模板引擎很好的保證了頁面原結(jié)構(gòu)，即使我這樣的初學(xué)者也可以使用它。
注意它的官方如下：art-template官方文檔
標(biāo)準(zhǔn)語法：
`{{value}}
{{data.key}}
{{data["key"]}}
{{a ? b : c}}
{{a || b}}
{{a + b}}`
原始語法：
<%= value %> <%= data.key %> <%= data["key"] %> <%= a ? b : c %> <%= a || b %> <%= a + b %>
直接按照原來的結(jié)構(gòu)然后按照模板的語法進(jìn)行修改就是了。
3. JS處理：window.onload = function() {
var data;
$.ajax({
dataType: "json",
url: "data.json",
data: data,
type: "get",
success: function(data, key) {
//轉(zhuǎn)化為js對象
var jsArr = data;
//遍歷JSON對象，將JSON對象轉(zhuǎn)化為數(shù)組
for(var key in jsArr) {};
//點(diǎn)擊國家按鈕顯示指定內(nèi)容
$("body").on("click", ".country>li", function(e) {
$(this).addClass("active").siblings().removeClass("active");
//獲取當(dāng)前tab中鼠標(biāo)停在的table欄的索引
var index = $(this).index();
//根據(jù)這個(gè)索引切換，下面的展示
$("li").eq(index).addClass("selected").siblings().removeClass("selected");
//獲取當(dāng)前點(diǎn)擊項(xiàng)目的ID
var indexId = $(this).attr("id");
//新建數(shù)組，將當(dāng)前點(diǎn)擊項(xiàng)的id賦值給當(dāng)前要顯示的數(shù)組作為KEY值，就獲取的當(dāng)前顯示項(xiàng)的數(shù)據(jù)
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; //設(shè)置總條數(shù)
var pageSize = 5; //每頁顯示的條數(shù)
var pageCount = Math.ceil(count / pageSize); //能顯示幾頁
var currentPage = 1; //默認(rèn)顯示第一頁
//做個(gè)分頁按鈕
for(var i = 1; i <= pageCount; i++) {
var pageN = "" + i + ""
$("#page").append(pageN);
}
//默認(rèn)顯示第一頁
$(".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")
};
//顯示選擇頁的內(nèi)容
$(".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);
}
}
});
})
//點(diǎn)擊預(yù)覽圖顯示彈窗
$(".reload,.title").on("click", function() {
//取得當(dāng)前點(diǎn)擊的預(yù)覽圖的下標(biāo)
var indexB = $(this).parent().parent().parent().index();
//將預(yù)覽圖的下標(biāo)作為當(dāng)前顯示的國家數(shù)據(jù)的中的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("點(diǎn)擊任意處可關(guān)閉", function() {
time: 500
})
//Layer彈窗結(jié)束
}
});
});
//加載第一項(xiàng)美國
$("#Americia").trigger("click");
}
})
JS這里的思路解析
JS是重點(diǎn)項(xiàng)目，在這里遇到了很多問題。
1.需要PHP對JSON進(jìn)行轉(zhuǎn)換【注意：這段方法可以用js代替，所以可把這段php文件刪除】
代碼就這一行：
還需要注意，使用PHP必須要開虛擬機(jī)，因?yàn)閜hp是后臺語言。否則瀏覽器會報(bào)json格式錯(cuò)誤。
這里的file_get_contents()方法只是獲取數(shù)據(jù)，加上echo是輸出的意思。
2.然后再AJAX中，就可以直接引入php文件：【注意：這段方法可以用js代替】
url: "artTemp.php",
一般用get方式
type: "get",
Get是向服務(wù)器發(fā)索取數(shù)據(jù)的一種請求，而Post是向服務(wù)器提交數(shù)據(jù)的一種請求.通常我們請求數(shù)據(jù)用get,保存密碼用post.
數(shù)據(jù)請求成功后對數(shù)據(jù)進(jìn)行處理：
success：function()
{ ...... }
【1、2中用JS代替的方法】
這里如果要用PHP的話，需要用到虛擬機(jī)，以及對php有基本的了解；其實(shí)可以用jquery來代替，讓ajax直接獲取data.json:
var data;
$.ajax({
dataType:"json",
url:"data.json",
data:data,
type: "get",
success: function(data, key) {
//轉(zhuǎn)化為js對象
var jsArr = data;
這里要注意首先需要在ajax之前var 一個(gè)data變量，然后再ajax獲取到data.json后將值傳入data變量：
data:data,
同時(shí)，在success中的：var jsArr =JSON.parse(data)就可以直接換成var jsArr = data。因?yàn)?br>JSON.parse() 方法用來解析JSON字符串，構(gòu)造由字符串描述的JavaScript值或?qū)ο蟆?br>在這里還需設(shè)置dataType:json;因?yàn)樵趈query文檔中有這么一句：
這樣就不需要在用JSON.parse()方法了。關(guān)于這一點(diǎn)，這篇文章有說明：
How to Use JSON Data with PHP or JavaScript
這里馬上說的JSON.parse就可以不用了↓↓↓↓
3.將data數(shù)據(jù)轉(zhuǎn)化為JSON對象
使用JSON.parse()方法：
var jsArr = JSON.parse(data);
4.將JSON對象轉(zhuǎn)化為數(shù)組
然后再遍歷JSON對象，將JSON轉(zhuǎn)化為數(shù)組：
for(var key in jsArr) {
console.log(jsArr[key])
};
5.點(diǎn)擊國家按鈕顯示對應(yīng)內(nèi)容
然后是點(diǎn)擊事件，點(diǎn)擊指定的國家顯示相應(yīng)的視頻內(nèi)容列表：
//此處使用的是事件委托，將li的點(diǎn)擊委托給body.
$("body").on("click", ".country>li", function(e) {
//給當(dāng)前點(diǎn)擊項(xiàng)添加active樣式，先給自己添加樣式，再干掉其他人的樣式。
$(this).addClass("active").siblings().removeClass("active");
//獲取當(dāng)前tab中鼠標(biāo)停在的table欄的索引
var index = $(this).index();
//根據(jù)這個(gè)索引切換，下面的展示 $("li").eq(index).addClass("selected").siblings().removeClass("selected");
//獲取當(dāng)前點(diǎn)擊項(xiàng)目的ID
var indexId = $(this).attr("id");
//【重要】新建數(shù)組，將當(dāng)前點(diǎn)擊項(xiàng)的id賦值給當(dāng)前要顯示的數(shù)組作為KEY值，就獲取的當(dāng)前顯示項(xiàng)的數(shù)據(jù)
console.log(jsArr[this.id])
var jsArri = jsArr[this.id];
//此處由于json中的數(shù)據(jù)不完整，還導(dǎo)致我看錯(cuò)了，一直點(diǎn)擊沒有數(shù)據(jù)的按鈕，然后提示undefind....
接下倆還需要根據(jù)請求到的數(shù)據(jù)，如果 數(shù)據(jù)為空，就顯示提示圖片：沒有內(nèi)容；如果有數(shù)據(jù)，顯示內(nèi)容。
判斷：
if(jsArri === undefined || jsArri.length == 0) {
$(".medialist").html("");
$("#page").hide();
} else {
$("#page").show();
}
然后是對內(nèi)容進(jìn)行分頁顯示
此處稍微復(fù)雜，我用的是自己編寫的分頁工具，應(yīng)為各種插件和需求不相符。
首先對分頁工具進(jìn)行清空
$("#page").html("");
設(shè)置變量pagedata，將當(dāng)前請求到的國家內(nèi)的 數(shù)據(jù)長度賦值給它，就求到了請求到的數(shù)據(jù)有幾條
var pageData = jsArri.length;
進(jìn)行分頁：
$(function() {
var count = pageData; //設(shè)置總條數(shù)
var pageSize = 5; //每頁顯示的條數(shù)
var pageCount = Math.ceil(count / pageSize); //能顯示幾頁
var currentPage = 1; //默認(rèn)顯示第一頁
//做個(gè)分頁按鈕
for(var i = 1; i <= pageCount; i++) {
var pageN = "" + i + ""
$("#page").append(pageN);
這樣就顯示出基本的分頁列表了。
}
//默認(rèn)顯示第一頁
清空視頻列表
$(".medialist").html("");
由于數(shù)據(jù)index從0開始算，所以要用i=當(dāng)前顯示的數(shù)字-1.
for(i = (currentPage - 1) * pageSize; i < pageSize * currentPage; i++) {
var obj = {
items: jsArri[i]
};
在循環(huán)中渲染模板引擎
var result = template("template", obj);
$(".medialist").append(result);
給第一頁分頁添加樣式
$("#page span:first-child").addClass("choosed")
};
//顯示選擇頁的內(nèi)容
$(".pageName").click(function() {
選取到當(dāng)前被點(diǎn)擊的分頁數(shù)字
var selectPage = $(this).attr("selectPage");
給其他分頁數(shù)字去掉選中樣式
$("#page").children("span").removeClass("choosed");
給當(dāng)前選中的分頁數(shù)字添加樣式
$("#page").children("span").eq(selectPage - 1).addClass("choosed");
清空
$(".medialist").html("");
// 判斷是否是最后一頁
如果是最后一頁，只需要渲染最后幾條數(shù)據(jù)：
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 {
//如果不是最后一頁，就是中間的頁面，就直接計(jì)算出是那幾條數(shù)據(jù)進(jìn)行渲染。
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);
}
}
});
})
至此，已經(jīng)完顯示了json中的數(shù)據(jù)。
還有一點(diǎn)，由于渲染數(shù)據(jù)是由點(diǎn)擊上面的按鈕實(shí)現(xiàn)的，所以在頁面加載后默認(rèn)的第一項(xiàng)美國是不顯示的，所以需要美國的內(nèi)容顯示，就要在頁面加載完畢后模擬點(diǎn)擊事件，此處使用trigger()方法：
$("#Americia").trigger("click");
這樣就可以頁面加載后第一頁顯示默認(rèn)的國家欄目的數(shù)據(jù)啦，如果想第一頁顯示其他國家的數(shù)據(jù)，直接替換ID即可。
接下來的部分會演示如何利用Layer插件播放視頻。
4.點(diǎn)擊視頻預(yù)覽圖播放視頻
首先當(dāng)然是要給預(yù)覽圖的標(biāo)簽注冊點(diǎn)擊事件：
這里可以用事件委托
$(".title").on("click", function() { ...... }
然后再在點(diǎn)擊事件中獲取當(dāng)前點(diǎn)擊項(xiàng)的index：
var indexB = $(".item").find("img").index($(this));
也可以這么寫：
var indexB = $(this).parent().parent().index()
這個(gè)更容易理解，找當(dāng)前被點(diǎn)擊元素的父元素的父元素，再取他的index，因?yàn)槊總€(gè)父元素都有唯一一個(gè)img，所以就得到了index！
5.實(shí)現(xiàn)點(diǎn)擊圖片和標(biāo)題均可播放視頻：
要想實(shí)現(xiàn)點(diǎn)擊圖片和標(biāo)題都可以播放視頻，那么必須給他們綁定同一個(gè)事件。
jquery為多個(gè)選擇器綁定同一個(gè)事件方法：
("#start,#end").on("click",function(){
alert("The paragraph was clicked.");
});
所以此處可以使用這個(gè)方法：
$(".reload,.title").on("click",function() { }
但是在接下來的取indexB值的時(shí)候遇到了問題：$(".reloadimg")和 $(".title")他們的路徑不一樣，如何然他們?nèi)〉胕ndex值相同呢？
這里就必須要對元素進(jìn)行相對定位，找出他們的共同祖先元素，讓我們往模板的結(jié)構(gòu)里看：
<%=items.classify%> <%=items.title%> <%=items.pubdate%><%=items.intro%>
嘉 <%=items.name%> 職 <%=items.position%>
從這里可以看出他們的公共祖先元素自然就是$(".item")啦，所以，怎樣讓他們用一行代碼就同時(shí)找到他們的公共祖先元素？而且是點(diǎn)擊他們中的任意一項(xiàng)都能找到？我們自然想到了剛才的這種辦法：
var indexB = $(this).parent().parent().index()
這里的$(this)指代的是當(dāng)前項(xiàng)，既可以表示$(".img")，又可以表示$(".title")，但是從結(jié)構(gòu)上看，$(".img")只用向上找兩層就可以找到item,但是$(".title")卻需要往上找三層才可以找到item,怎么辦？
我們可以給$(".img")再套一個(gè)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();
就可以獲取到當(dāng)前點(diǎn)擊項(xiàng)和另一項(xiàng)的共同index啦！
然后將預(yù)覽圖的下標(biāo)作為當(dāng)前顯示的國家數(shù)據(jù)中的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("點(diǎn)擊任意處可關(guān)閉", function() {
time: 500
})
//Layer彈窗結(jié)束
}
OK，已經(jīng)可以實(shí)現(xiàn)點(diǎn)擊預(yù)覽圖顯示對應(yīng)的視頻了！
同時(shí)別忘了給美國追加click事件，不然第一頁的數(shù)據(jù)不顯示，因?yàn)轱@示隱藏是通過click操作的：
//加載第一項(xiàng)美國
$("#Americia").trigger("click");
至此已經(jīng)完成業(yè)務(wù)邏輯的重要部分，css移動端就不用說了，套boostrap就是，有疑問請?jiān)u論。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112866.html
摘要：項(xiàng)目需求自適應(yīng)頁面，兼容安卓，和。要求頁面顯示視頻列表，點(diǎn)擊列表中的圖片和標(biāo)題就可以播放視頻，視頻列表每頁條，能翻頁。本項(xiàng)目由于是需要大量的數(shù)據(jù)渲染以及后期的數(shù)據(jù)填充，所以決定使用模板引擎。同時(shí)使用了作為部分框架。使用作為視頻彈窗。 項(xiàng)目需求:自適應(yīng)頁面，兼容安卓，IOS和PC。要求頁面顯示視頻列表，點(diǎn)擊列表中的圖片和標(biāo)題就可以播放視頻，視頻列表每頁5條，能翻頁。 showImg(ht...
摘要：項(xiàng)目需求自適應(yīng)頁面，兼容安卓，和。要求頁面顯示視頻列表，點(diǎn)擊列表中的圖片和標(biāo)題就可以播放視頻，視頻列表每頁條，能翻頁。本項(xiàng)目由于是需要大量的數(shù)據(jù)渲染以及后期的數(shù)據(jù)填充，所以決定使用模板引擎。同時(shí)使用了作為部分框架。使用作為視頻彈窗。 項(xiàng)目需求:自適應(yīng)頁面，兼容安卓，IOS和PC。要求頁面顯示視頻列表，點(diǎn)擊列表中的圖片和標(biāo)題就可以播放視頻，視頻列表每頁5條，能翻頁。 showImg(ht...
摘要：項(xiàng)目需求自適應(yīng)頁面，兼容安卓，和。要求頁面顯示視頻列表，點(diǎn)擊列表中的圖片和標(biāo)題就可以播放視頻，視頻列表每頁條，能翻頁。本項(xiàng)目由于是需要大量的數(shù)據(jù)渲染以及后期的數(shù)據(jù)填充，所以決定使用模板引擎。同時(shí)使用了作為部分框架。使用作為視頻彈窗。 項(xiàng)目需求:自適應(yīng)頁面，兼容安卓，IOS和PC。要求頁面顯示視頻列表，點(diǎn)擊列表中的圖片和標(biāo)題就可以播放視頻，視頻列表每頁5條，能翻頁。 showImg(ht...
摘要：本文總結(jié)了前端老司機(jī)經(jīng)常問題的一些問題并結(jié)合個(gè)人總結(jié)給出了比較詳盡的答案。網(wǎng)易阿里騰訊校招社招必備知識點(diǎn)。此外還有網(wǎng)絡(luò)線程，定時(shí)器任務(wù)線程，文件系統(tǒng)處理線程等等。線程核心是引擎。主線程和工作線程之間的通知機(jī)制叫做事件循環(huán)。 showImg(https://segmentfault.com/img/bVbu4aB?w=300&h=208); 本文總結(jié)了前端老司機(jī)經(jīng)常問題的一些問題并結(jié)合個(gè)...
閱讀 2332·2021-11-24 10:18
閱讀 3414·2021-09-22 15:35
閱讀 3356·2021-09-13 10:37
閱讀 3778·2021-09-06 15:14
閱讀 2082·2021-09-06 15:02
閱讀 2227·2021-09-02 15:11
閱讀 559·2019-08-30 15:53
閱讀 3084·2019-08-29 16:15
