詳解MVC如何使用開(kāi)源分頁(yè)插件(shenniu.pager.js)
最近比較忙,前期忙公司手機(jī)端接口項(xiàng)目,各種開(kāi)發(fā)+調(diào)試+發(fā)布現(xiàn)在幾乎上線無(wú)問(wèn)題了;雖然公司項(xiàng)目忙不過(guò)在期間抽空做了兩件個(gè)人覺(jué)得有意義的事情,一者使用aspnetcore開(kāi)發(fā)了個(gè)人線上項(xiàng)目(要說(shuō)線上其實(shí)只能ip訪問(wèn),沒(méi)有域名哈哈),其架構(gòu)組成由:aspnetcore1.0.0+redis+ postgressql+TaskMainForm服務(wù),這個(gè)項(xiàng)目在后期會(huì)開(kāi)源出來(lái)供大家分享學(xué)習(xí),站點(diǎn)地址點(diǎn)這里心聲網(wǎng);一者是目前正在做的后臺(tái)管理框架一葉子,現(xiàn)目前剛好吧js分頁(yè)插件shenniu.pager.js寫(xiě)完,個(gè)人覺(jué)得還是可以的,這也是本章將要和大家分享的內(nèi)容;那么開(kāi)始今天的分享內(nèi)容,希望各位多多掃碼支持:
- 為什么采用js分頁(yè)及效果圖
- 在view中如何使用及分享個(gè)后臺(tái)方法
- 開(kāi)發(fā)者視角閱讀shenniu.pager.js代碼
下面一步一個(gè)腳印的來(lái)分享:
. 為什么采用js分頁(yè)及效果圖
首先,咋們來(lái)了解下市面上mvc兩種常用的分頁(yè)方式:跳轉(zhuǎn)分頁(yè)和ajax分頁(yè);跳轉(zhuǎn)分頁(yè)意思就是頁(yè)面重定向到指定的頁(yè)面并通過(guò)傳遞分頁(yè)需要的參數(shù),從而獲取數(shù)據(jù)后通過(guò)Modal來(lái)綁定數(shù)據(jù),這個(gè)每次都會(huì)刷下頁(yè)面體驗(yàn)上不是很好;ajax分頁(yè)通過(guò)異步j(luò)s請(qǐng)求某個(gè)接口,然后從接口獲取到數(shù)據(jù)后,再賦值到展示的界面上,這種方式是不會(huì)刷新頁(yè)面,從而保證了用戶體驗(yàn);
下面來(lái)看下這次分享的js分頁(yè)插件效果圖:
圖一:
圖二:
圖三:
看效果圖好像看不出來(lái)什么東西,我只能說(shuō)沒(méi)辦法,以后爭(zhēng)取弄個(gè)gif動(dòng)態(tài)圖片吧,后面代碼才是關(guān)鍵
. 在view中如何使用及分享個(gè)后臺(tái)方法
首先,為了頁(yè)面樣式好看我使用了bootstrap+ace樣式框架,樣式效果就是如上面幾張圖所示(這里是樣式和js文件);由于該插件是采用jquery格式書(shū)寫(xiě)的所以需要引用jquery.js,如上面圖所示使用到了日期選擇框,因?yàn)槲也捎玫臉邮蕉际腔趆5的設(shè)計(jì)所以這里引用的日期選擇插件bootstrap-datepicker.min.js和她的樣式bootstrap-datepicker3.min.css;該實(shí)例需要的引用文件都好了,下面看下截圖:
再來(lái),咋們就開(kāi)始使用shenniu.pager.js,我們需要在點(diǎn)擊“查詢(xún)”按鈕的時(shí)候去調(diào)用這個(gè)插件,然后通過(guò)插件去獲取后臺(tái)接口返回的數(shù)據(jù),并綁定到頁(yè)面展示出來(lái),所以有了如下代碼:
var snTool = new shenniuTool(); $("button[id='btnSearch']").on("click", function () { var data = { txtName: $("input[name='txtName']").val(), nStatus: $("select option:selected").val(), dOperateTime: $("input[name='dOperateTime']").val() }; snTool.listFun({ showId: "divShowResult", //內(nèi)容顯示的div的Id url: "/Menu/Search", data: data, pageSize: 2, //每頁(yè)N條 headText: [ { nickName: "全選", name: "Id", colType: "checkbox" }, { nickName: "名稱(chēng)", name: "Name", colType: "label", isModalHeadText: true }, { nickName: "鏈接", name: "Link" }, { nickName: "狀態(tài)", name: "EnableDes" }, { nickName: "操作人", name: "OperatorDes" }, { nickName: "操作時(shí)間", name: "OperateTime", format: "yyyy-MM-dd" }, { nickName: "操作", name: "Id", colType: "operate" } ], editeOption: { url: "/Menu/Edit", title: "編輯", height: 500 }, viewOption: { url: "/Menu/Details", title: "查看", height: 500 }, delOption: { url: "/Menu/Delete", title: "刪除", height: 500 }, modalExt: modalExt }); });
注意參數(shù)url: "/Menu/Search",這個(gè)指向的就是后臺(tái)接口,那么咋們來(lái)看下我后臺(tái)咋們寫(xiě)的:
[HttpGet] public JsonResult Search() { var moPageResult = new StageModel.MoPageResult<dynamic>(); try { var txtName = Request.Params["txtName"]; var nStatus = string.IsNullOrWhiteSpace(Request.Params["nStatus"]) ? -1 : Convert.ToInt32(Request.Params["nStatus"]); var dOperateTime = string.IsNullOrWhiteSpace(Request.Params["dOperateTime"]) ? Convert.ToDateTime("1991-01-01") : Convert.ToDateTime(Request.Params["dOperateTime"]); var data = db.MoMenus.AsQueryable(); if (!string.IsNullOrWhiteSpace(txtName)) { data = data.Where(b => b.Name.Contains(txtName)); } if (nStatus >= 0) { data = data.Where(b => b.IsEnable == (nStatus == (int)StageEnumHelper.ComStatus.啟用)); } if (dOperateTime > Convert.ToDateTime("1991-01-01")) { data = data.Where(b => b.OperateTime >= dOperateTime && b.OperateTime < dOperateTime.AddDays(1)); } moPageResult.MoPageContent( data, b => b.OperateTime, b => new { Id = b.Id, Name = b.Name, Link = b.Link, Des = b.Des, IsEnable = b.IsEnable, Operator = b.Operator, OperatorDes = b.MoUserInfo.NickName, EnableDes = b.IsEnable ? "啟用" : "禁用", OperateTime = b.OperateTime }); } catch (Exception ex) { } return Json(moPageResult, JsonRequestBehavior.AllowGet); }
后臺(tái)接口Request.Params獲取的幾個(gè)參數(shù)就是從前端
var data = { txtName: $("input[name='txtName']").val(), nStatus: $("select option:selected").val(), dOperateTime: $("input[name='dOperateTime']").val() };
傳遞過(guò)來(lái)的,分別代碼了視圖中的名稱(chēng),狀態(tài),操作時(shí)間等查詢(xún)條件;下面來(lái)看下,后臺(tái)這兒沒(méi)有看到獲取類(lèi)似分頁(yè)的當(dāng)前頁(yè)數(shù)和分頁(yè)記錄數(shù)的操作,是封裝到了MoPageResult類(lèi)中的MoPageContent()中,來(lái)看下MoPageResult類(lèi)代碼如:
#region 分頁(yè)數(shù)據(jù)返回 public class MoPageResult<TResult> where TResult : class, new() { public MoPageResult() { } public IQueryable<TResult> MoResult; /// <summary> /// 總頁(yè)數(shù) /// </summary> public int PageTotal { get; set; } /// <summary> /// 當(dāng)前頁(yè)數(shù) /// </summary> public int CurrentPage { get; set; } /// <summary> /// 分頁(yè)記錄數(shù) /// </summary> public int PageSize { get; set; } /// <summary> /// 分頁(yè)方法 /// </summary> /// <typeparam name="TKey"></typeparam> /// <param name="query"></param> /// <param name="order_desc"></param> public void MoPageContent<T, TKey>(IQueryable<T> query, Expression<Func<T, TKey>> desc, Expression<Func<T, TResult>> selector = null, bool isDesc = true) where T : class,new() { if (HttpContext.Current == null) { return; } var Request = HttpContext.Current.Request; this.PageSize = string.IsNullOrWhiteSpace(Request.Params["pageSize"]) ? 15 : Convert.ToInt32(Request.Params["pageSize"]); this.CurrentPage = string.IsNullOrWhiteSpace(Request.Params["currentPage"]) ? 1 : Convert.ToInt32(Request.Params["currentPage"]); var nTotal = query.Count(); this.PageTotal = nTotal / this.PageSize + (nTotal % this.PageSize > 0 ? 1 : 0); if (selector != null) { if (isDesc) { query = query.OrderByDescending(desc); } else { query = query.OrderBy(desc); } this.MoResult = query. Skip((this.CurrentPage - 1) * this.PageSize). Take(this.PageSize). Select(selector); } } } #endregion
MoPageContent()中默認(rèn)是獲取了pagesize,currentpage參數(shù),這樣減少了用戶操作性,并且此方法承擔(dān)了計(jì)算總頁(yè)數(shù)和執(zhí)行分頁(yè)語(yǔ)句的角色,注意最后查詢(xún)語(yǔ)句Select(selector),selector是Expression<Func<T, TResult>>類(lèi)型,這個(gè)T有條件約束where T : class,new();我在調(diào)用該分頁(yè)類(lèi)的使用傳遞的T是dynamic,因?yàn)橘?lài)人如我覺(jué)得匿名類(lèi)更方便;唯一遺憾的是select輸出暫時(shí)無(wú)法直接對(duì)某個(gè)屬性直接使用方法;
最后,插件使用還需要注意一個(gè)地方,就是時(shí)間,如果后臺(tái)不處理時(shí)間直接DateTime的json格式化,那么在插件獲取出來(lái)的時(shí)間格式如:
這個(gè)時(shí)候就需要在使用shenniu.pager.js插件時(shí)候在屬性headText中,指定時(shí)間列的格式如:
{ nickName: "操作時(shí)間", name: "OperateTime", format: "yyyy-MM-dd" }
使用format格式化時(shí)間格式,這個(gè)插件兼容的給有:yyyy,MM,dd,HH,mm,ss,相信滿足大家需要了;
. 開(kāi)發(fā)者視角閱讀shenniu.pager.js代碼
首先,我們從上而下,映入眼簾的是插件屬性:
var defOption = { showId: "divShowResult", //內(nèi)容顯示的div url: "", //ajax數(shù)據(jù)來(lái)源地址 headText: [ { nickName: "A", colType: "checkbox", name: "Id" }, { nickName: "B", colType: "label", name: "Name", isModalHeadText: true } //isModalHeadText:是否是模式窗體頭部顯示的信息 ], data: {}, //查詢(xún)條件 editeOption: { url: "", title: "編輯", width: 500, height: 500 }, //編輯地址,不包括id viewOption: { url: "", title: "查看", width: 500, height: 500 }, //查看地址 delOption: { url: "", title: "刪除", width: 500, height: 500 }, //刪除地址 currentPage: 1, //當(dāng)前頁(yè)數(shù) pageSize: 15, //分頁(yè)記錄數(shù) showPageTab: 6, //展示6個(gè)頁(yè)數(shù) modalExt: null, //模式窗體對(duì)象 //可忽略 callback: function () { }, //回調(diào)函數(shù) tabId: "tab001", loading: "努力加載中,等會(huì)吧...", //可以直接寫(xiě)出<img src=''/> sucFun: function (data) { }, befFun: function () { }, errFun: function () { }, comFun: function () { }, timeout: 60000 //超時(shí)60S }; $.extend(defOption, option);
里面已經(jīng)包括了注釋說(shuō)明,看起來(lái)應(yīng)該不是問(wèn)題; $.extend(defOption, option); 這段代碼意思是吧用戶傳遞進(jìn)來(lái)的參數(shù)和插件里面默認(rèn)的參數(shù)合并,用戶大于插件直接可以覆蓋相同屬性的值;
再來(lái),看請(qǐng)求后臺(tái)的方法:
//請(qǐng)求后臺(tái) function ajaxFun(option) { if (option) { $.extend(defOption, option); } //獲取分頁(yè)參數(shù) var hidPageSize = defOption.pageSize; var hidCurrentPage = defOption.currentPage; if ($("form input[name='pageSize']").val()) { hidPageSize = $("form input[name='pageSize']").val(); } if ($("form input[name='currentPage']").val()) { hidCurrentPage = $("form input[name='currentPage']").val(); } //合并用戶查詢(xún)條件和分頁(yè)參數(shù)條件 var searchData = { pageSize: hidPageSize, currentPage: hidCurrentPage }; $.extend(searchData, defOption.data); //請(qǐng)求后臺(tái)數(shù)據(jù) $.ajax({ url: defOption.url, type: "get", data: searchData, dataType: "json", timeout: defOption.timeout, async: true, beforeSend: defOption.befFun, success: defOption.sucFun, }); }
這個(gè)方法就是請(qǐng)求接口獲取數(shù)據(jù)的方法,里面默認(rèn)獲取了頁(yè)面中的pageSize,currentPage兩個(gè)分頁(yè)所需要的參數(shù),這里采用的是get方式來(lái)請(qǐng)求,當(dāng)然可以寫(xiě)成post,不過(guò)需要后臺(tái)支持post就行了;
我們?cè)倏?strong>查詢(xún)列表方法:
//查詢(xún)列表 listFun: function (option) { if (option) { $.extend(defOption, option); } //默認(rèn)格式 var tab = []; tab.push('<table id="' + defOption.tabId + '" class="table table-bordered table-hover">'); tab.push('<thead><tr role="row">'); for (var i in defOption.headText) { var head = defOption.headText[i]; if (head.colType == "label") { tab.push('<th class="center" tabindex="0" rowspan="1" colspan="1">' + head.nickName + '</th>'); } else if (head.colType == "checkbox") { tab.push('<th class="center " rowspan="1" colspan="1" aria-label="">'); tab.push(' <label class="pos-rel">'); tab.push(' <input type="checkbox" name="cbAll" class="ace">'); tab.push(' <span class="lbl">' + head.nickName + '</span>'); tab.push(' </label>'); tab.push('</th>'); } else { tab.push('<th class="center" tabindex="0" rowspan="1" colspan="1">' + head.nickName + '</th>'); } } tab.push('</tr></thead>'); tab.push('<tbody><tr><td class="text-center" colspan="' + defOption.headText.length + '">' + defOption.loading + '</td></tr></tbody>'); tab.push('</table>'); tab.push('<div id="divPager" class="text-center"></div>'); $("#" + defOption.showId).html(tab.join('')); //全選事件 $("input[type='checkbox'][name='cbAll']").on("click", function () { var cbStatus = $(this).is(":checked"); if (cbStatus) { $("input[name='cb']:checkbox").prop("checked", true); } else { $("input[name='cb']:checkbox").prop("checked", false); } }); //數(shù)據(jù)返回成功處理 defOption.sucFun = function (data) { var head = $("table[id='" + defOption.tabId + "'] tbody"); if (data) { if (data.MoResult) { //遍歷table展示的數(shù)據(jù) var rows = []; $.each(data.MoResult, function (i, item) { rows.push('<tr>'); var modalHeadText = ""; for (var h_i in defOption.headText) { var head = defOption.headText[h_i]; var item_val = item[head.name]; if (item_val && typeof (item_val) != "undefined") { } else { item_val = ""; } //時(shí)間格式化 if (head.format && item_val.length > 0) { console.log(item_val); var date = new Date(parseInt(item_val.replace("/Date(", "").replace(")/", ""), 10)); item_val = head.format. replace("yyyy", date.getFullYear()). replace("MM", date.getMonth() + 1). replace("dd", date.getDate()). replace("HH", date.getHours()). replace("mm", date.getMinutes()). replace("ss", date.getMilliseconds()); } //獲取模式窗體頭部信息 if (modalHeadText.length <= 0) { modalHeadText = head.isModalHeadText ? item_val : "" }; if (head.colType == "label") { rows.push('<td class="center">' + item_val + '</td>'); } else if (head.colType == "checkbox") { rows.push('<td class="center">'); rows.push(' <label class="pos-rel">'); rows.push(' <input type="checkbox" name="cb" value="' + item_val + '" class="ace">'); rows.push(' <span class="lbl"></span>'); rows.push(' </label>'); rows.push('</td>'); } else if (head.colType == "operate") { rows.push('<td class="center"><div class="hidden-sm hidden-xs action-buttons">'); if (defOption.editeOption.url.length > 0) { var editOption = $.extend({}, defOption.editeOption); editOption.url += "/" + item_val; editOption.title += modalHeadText.length > 0 ? "-" + modalHeadText : ""; var op = JSON.stringify(editOption); rows.push('<a class="blue" data-item=\'' + op + '\' href="javascript:;"><i class="ace-icon fa fa-pencil bigger-130"></i></a>'); } if (defOption.viewOption.url.length > 0) { var viewOption = $.extend({}, defOption.viewOption); viewOption.url += "/" + item_val; viewOption.title += modalHeadText.length > 0 ? "-" + modalHeadText : ""; var op = JSON.stringify(viewOption); rows.push('<a class="blue" data-item=\'' + op + '\' href="javascript:;"><i class="ace-icon fa fa-search-plus bigger-130"></i></a>'); } if (defOption.delOption.url.length > 0) { var delOption = $.extend({}, defOption.delOption); delOption.url += "/" + item_val; delOption.title += modalHeadText.length > 0 ? "-" + modalHeadText : ""; var op = JSON.stringify(delOption); rows.push('<a class="blue" data-item=\'' + op + '\' href="javascript:;"><i class="ace-icon fa fa-trash-o bigger-130"></i></a>'); } rows.push('</div></td>'); } else { rows.push('<td class="center">' + item_val + '</td>'); } } rows.push('</tr>'); }); //頁(yè)數(shù)展示 if (data.MoResult.length > 0) { var pager = []; pager.push('<div class="text-center">'); pager.push(' <ul class="pagination" style="margin-top:0px">'); var nPager = defOption.showPageTab;//每次展示6個(gè)分頁(yè) //上一頁(yè) var nprev = (data.CurrentPage - 1 >= 1 ? data.CurrentPage - 1 : 1); pager.push(' <li class="paginate_button previous" aria-controls="dynamic-table" tabindex="0" id="dynamic-table_previous">'); pager.push(' <a href="javascript:;" name="npager" data-page="' + nprev + '">上一頁(yè)</a>'); pager.push(' </li>'); //當(dāng)前頁(yè)之前頁(yè)碼 var preTotal = data.CurrentPage - nPager >= 1 ? data.CurrentPage - nPager : 1; for (var i = preTotal; i < data.CurrentPage ; i++) { pager.push(' <li class="paginate_button ' + (i == data.CurrentPage ? "active disabled" : "") + '" aria-controls="dynamic-table">'); pager.push(' <a href="javascript:;" name="npager" data-page="' + i + '">' + i + '</a>'); pager.push(' </li>'); } //當(dāng)前頁(yè) pager.push(' <li class="paginate_button active disabled" aria-controls="dynamic-table">'); pager.push(' <a href="javascript:;" name="npager" data-page="' + data.CurrentPage + '">' + data.CurrentPage + '</a>'); pager.push(' </li>'); //當(dāng)前頁(yè)以后頁(yè)碼 var nextTotal = data.CurrentPage + nPager > data.PageTotal ? data.PageTotal : data.CurrentPage + nPager; for (var i = data.CurrentPage + 1; i <= nextTotal; i++) { pager.push(' <li class="paginate_button ' + (i == data.CurrentPage ? "active disabled" : "") + '" aria-controls="dynamic-table">'); pager.push(' <a href="javascript:;" name="npager" data-page="' + i + '">' + i + '</a>'); pager.push(' </li>'); } //下一頁(yè) var nnext = (data.PageTotal < data.CurrentPage + 1 ? data.PageTotal : data.CurrentPage + 1); pager.push(' <li class="paginate_button next" aria-controls="dynamic-table" tabindex="0" id="dynamic-table_next">'); pager.push(' <a href="javascript:;" name="npager" data-page="' + nnext + '">下一頁(yè)</a>'); pager.push(' </li>'); pager.push(' </ul>'); //分頁(yè)查詢(xún)條件 pager.push('<div style="display:none">'); pager.push(' <form>'); pager.push(' <input type="hidden" name="pageSize" value="' + defOption.pageSize + '"/>'); pager.push(' <input type="hidden" name="currentPage" value="' + defOption.currentPage + '"/>'); pager.push(' </form>'); pager.push('</div>'); pager.push('</div>'); //移除加載中 //head.html(""); //添加結(jié)果 head.html(rows.join('')); $("div[id='divPager']").html(pager.join('')); //操作按鈕事件 $("a[data-item]").on("click", function () { var data_Item = $(this).attr("data-item"); if (data_Item) { var data_Item_Obj = JSON.parse(data_Item); defOption.modalExt.modalFun({ width: data_Item_Obj.width, height: data_Item_Obj.height, url: data_Item_Obj.url, title: data_Item_Obj.title, callback: defOption.callback }); } }); //綁定分頁(yè)按鈕事件 $("a[name='npager']").on("click", function () { var nPager = $(this).attr("data-page"); if (nPager.length <= 0) { return; } $("form input[name='currentPage']").val(nPager); //執(zhí)行請(qǐng)求后臺(tái) ajaxFun(defOption); }); } else { head.html("<tr><td class=\"text-center\" colspan=\"" + defOption.headText.length + "\">未能查詢(xún)到數(shù)據(jù)!</td></tr>"); $("div[id='divPager']").html(""); } } else { head.html("<tr><td class=\"text-center\" colspan=\"" + defOption.headText.length + "\">未能查詢(xún)到數(shù)據(jù)。</td></tr>"); $("div[id='divPager']").html(""); } } else { head.html("<tr><td class=\"text-center\" colspan=\"" + defOption.headText.length + "\">未能查詢(xún)到數(shù)據(jù)</td></tr>"); $("div[id='divPager']").html(""); } }; if (option) { $.extend(defOption, option); } //執(zhí)行請(qǐng)求后臺(tái) ajaxFun(defOption); }
這個(gè)方法體挺長(zhǎng)的,主要操作是:
默認(rèn)格式展示列表頭部并呈現(xiàn)出加載中的提示=》綁定復(fù)選框全選事件=》創(chuàng)建數(shù)據(jù)返回成功函數(shù)sucFun()=》調(diào)用請(qǐng)求后臺(tái)方法ajaxFun();
再來(lái)看函數(shù)sucFun()等到數(shù)據(jù)返回后執(zhí)行的操作是:
遍歷json返回?cái)?shù)據(jù)展示到table中(其中包括了時(shí)間格式化的處理,復(fù)選框,label及操作按鈕類(lèi)型operate的初始化)=》頁(yè)數(shù)展示及事件綁定(目前只有上一頁(yè),當(dāng)前頁(yè)之前頁(yè)碼,當(dāng)前頁(yè),當(dāng)前頁(yè)以后頁(yè)碼,下一頁(yè)的效果展示,分頁(yè)查詢(xún)條件(生成pagesize和currentPage隱藏控件),綁定分頁(yè)按鈕事件)
以上就是shenniu.pager.js整個(gè)插件內(nèi)容,不多且清晰,感覺(jué)分享給大家挺高興,下面貼出示例中用到的js文件和css文件可以在這里下載:http://xiazai.jb51.net/201612/yuanma/shenniu.pager_jb51.rar
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
- jquery.pager.js分頁(yè)實(shí)現(xiàn)詳解
- jquery.pager.js實(shí)現(xiàn)分頁(yè)效果
- 用jQuery中的ajax分頁(yè)實(shí)現(xiàn)代碼
- JQuery+Ajax無(wú)刷新分頁(yè)的實(shí)例代碼
- 基于jQuery的實(shí)現(xiàn)簡(jiǎn)單的分頁(yè)控件
- 基于JQuery的Pager分頁(yè)器實(shí)現(xiàn)代碼
- jQuery中jqGrid分頁(yè)實(shí)現(xiàn)代碼
- jQuery DataTables插件自定義Ajax分頁(yè)實(shí)例解析
- jquery pagination插件實(shí)現(xiàn)無(wú)刷新分頁(yè)代碼
- jquery向上向下取整適合分頁(yè)查詢(xún)
- jQuery pager.js 插件動(dòng)態(tài)分頁(yè)功能實(shí)例分析
相關(guān)文章
javascript多行字符串的簡(jiǎn)單實(shí)現(xiàn)方式
之前我們給大家講訴過(guò)javascript多行字符串的7種解決辦法,今天來(lái)給大家分享一個(gè)更簡(jiǎn)單的方法,非常的實(shí)用,大家一定要仔細(xì)看看哦。2015-05-05JS模擬實(shí)現(xiàn)ECMAScript5新增的數(shù)組方法
ECMAScript5 新增了十個(gè)數(shù)組方法,這些方法只有在ie9及以上瀏覽器中可以被使用,下面是對(duì)于這些方法的模擬實(shí)現(xiàn)簡(jiǎn)單介紹下,需要的朋友參考下2017-03-03如何通過(guò)js實(shí)現(xiàn)圖片預(yù)覽功能【附實(shí)例代碼】
如何通過(guò)js實(shí)現(xiàn)圖片預(yù)覽功能呢?下面小編就為大家?guī)?lái)一篇用js實(shí)現(xiàn)圖片預(yù)覽功能。給大家做個(gè)參考吧,一起跟隨小編過(guò)來(lái)看看2016-03-03原生JS實(shí)現(xiàn)自定義滾動(dòng)條效果
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)自定義滾動(dòng)條效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07