欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS組件系列之使用HTML標(biāo)簽的data屬性初始化JS組件

 更新時(shí)間:2016年09月14日 09:48:21   作者:懶得安分  
這篇文章主要介紹了JS組件系列之使用HTML標(biāo)簽的data屬性初始化JS組件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

前言:最近使用bootstrap組件的時(shí)候發(fā)現(xiàn)一個(gè)易用性問題,很多簡單的組件初始化都需要在JS里面寫很多的初始化代碼,比如一個(gè)簡單的select標(biāo)簽,因?yàn)閮H僅只是需要從后臺(tái)獲取數(shù)據(jù)填充到option里面,可是從后臺(tái)取數(shù)據(jù)就需要js的初始化,所以導(dǎo)致頁面初始化的時(shí)候js的初始化代碼里面出現(xiàn)很多重復(fù)的代碼,看著很鬧心。于是想起bootstrap table里面的data屬性來,如果能夠直接在html里面使用data-*這種方式來初始化簡單的組件,那該多爽。我們先來看看bootstrap table的文檔:

可以看到bootstrap table里面幾乎所有的屬性、事件都可以用data-*這種方式來做,感覺還不錯(cuò)。那博主就要開始研究了。data-*這東西是哪里來的呢?

一、jquery data()初探

網(wǎng)上查了一圈,終于找到data-*的出處了,原來是Jquery和html5里面的,好東西,真是好東西!我們先來看看jquery的API

原始用法如下:

作用其實(shí)很明顯,就是給元素加某些屬性和數(shù)據(jù),或者取值。

下面看看data()方法和html5 data-*屬性的結(jié)合使用

哈哈,這個(gè)東西好,通過html5 的data-*設(shè)置的值,能夠用jquery 的data()方法取到。這里的規(guī)則如下:

1)所有的data屬性必須以“data-”開頭,

2)屬性用“-”隔開,

3)jquery里面取屬性的時(shí)候去掉“data”和“-”即可。

有了這個(gè)作為基礎(chǔ),我們就知道如何在標(biāo)簽里面設(shè)置屬性,然后在js里面取對(duì)應(yīng)的屬性了。下面就結(jié)合上次封裝combobox的例子來說明下。

二、jquery data()實(shí)現(xiàn)data-*初始化組件

還記得之前JS組件系列——封裝自己的JS組件,你也可以這篇里面封裝了一個(gè)簡單的combobox,可以通過url去后臺(tái)取數(shù)據(jù)。那么下面我們?nèi)匀辉谶@個(gè)組件的基礎(chǔ)上做手腳,實(shí)現(xiàn)直接在select標(biāo)簽里面添加data-*屬性來初始化下拉框組件。

1、js組件封裝代碼

(function ($) {
 //1.定義jquery的擴(kuò)展方法combobox
 $.fn.combobox = function (options, param) {
 if (typeof options == 'string') {
  return $.fn.combobox.methods[options](this, param);
 }
 //2.將調(diào)用時(shí)候傳過來的參數(shù)和default參數(shù)合并
 options = $.extend({}, $.fn.combobox.defaults, options || {});
 //3.添加默認(rèn)值
 var target = $(this);
 target.attr('valuefield', options.valueField);
 target.attr('textfield', options.textField);
 target.empty();
 var option = $('<option></option>');
 option.attr('value', '');
 option.text(options.placeholder);
 target.append(option);
 //4.判斷用戶傳過來的參數(shù)列表里面是否包含數(shù)據(jù)data數(shù)據(jù)集,如果包含,不用發(fā)ajax從后臺(tái)取,否則否送ajax從后臺(tái)取數(shù)據(jù)
 if (options.data) {
  init(target, options.data);
 }
 else {
  //var param = {};
  options.onBeforeLoad.call(target, options.param);
  if (!options.url) return;
  if (typeof options.param == "string"){
  options.param = JSON.parse(options.param);
  }
  $.getJSON(options.url, options.param, function (data) {
  init(target, data);
  });
 }
 function init(target, data) {
  $.each(data, function (i, item) {
  var option = $('<option></option>');
  option.attr('value', item[options.valueField]);
  option.text(item[options.textField]);
  target.append(option);
  });
  options.onLoadSuccess.call(target);
 }
 target.unbind("change");
 target.on("change", function (e) {
  if (options.onChange)
  return options.onChange(target.val());
 });
 }

 //5.如果傳過來的是字符串,代表調(diào)用方法。
 $.fn.combobox.methods = {
 getValue: function (jq) {
  return jq.val();
 },
 setValue: function (jq, param) {
  jq.val(param);
 },
 load: function (jq, url) {
  $.getJSON(url, function (data) {
  jq.empty();
  var option = $('<option></option>');
  option.attr('value', '');
  option.text('請(qǐng)選擇');
  jq.append(option);
  $.each(data, function (i, item) {
   var option = $('<option></option>');
   option.attr('value', item[jq.attr('valuefield')]);
   option.text(item[jq.attr('textfield')]);
   jq.append(option);
  });
  });
 }
 };

 //6.默認(rèn)參數(shù)列表
 $.fn.combobox.defaults = {
 url: null,
 param: null,
 data: null,
 valueField: 'value',
 textField: 'text',
 placeholder: '請(qǐng)選擇',
 onBeforeLoad: function (param) { },
 onLoadSuccess: function () { },
 onChange: function (value) { }
 };

 //這一段是新加的,在頁面初始化完成之后調(diào)用初始化方法
 $(document).ready(function () {
 $('.combobox').each(function () {
  var $combobox = $(this);
  $.fn.combobox.call($combobox, $combobox.data());
 })
 });
 
})(jQuery);

大部分代碼和上次的沒啥區(qū)別,我們重點(diǎn)看看最下面這一段

//這一段是新加的,在頁面初始化完成之后調(diào)用初始化方法
 $(document).ready(function () {
 $('.combobox').each(function () {
  var $combobox = $(this);
  $.fn.combobox.call($combobox, $combobox.data());
 })
 });

很明顯,就是在頁面初始化完成之后通過樣式選擇器去初始化組件。使用了each,如果有多個(gè).combobox樣式,依次去初始化每一個(gè)。通過$.fn.combobox.call($combobox, $combobox.data());調(diào)用call方法去調(diào)用combobox的初始化,call方法里面兩個(gè)參數(shù)分別對(duì)應(yīng):

1)當(dāng)前初始化的jquery對(duì)象

2)參數(shù)列表。這里通過$combobox.data()得到的就是所有html里面的data-*屬性。將所有的data-*屬性作為參數(shù)傳入combobox的初始化方法中。

2、html里面通過data-*初始化

<select id="Search_"
  name="Search_province"
  class="form-control combobox"
  data-url="/Home/GetProvince"
  data-param='{"type":"0"}'
  data-text-field="Name"
  data-value-field="Id">
 </select>

指定data-*屬性。從上面我們知道這里初始化是通過樣式選擇器.combobox來初始化組件的,所以就要求,如果想要使用data-*做組件的初始化,必須要設(shè)置一個(gè)class="combobox"樣式,這樣后臺(tái)才取得到需要初始化的標(biāo)簽。

3、后臺(tái)C#方法

public class HomeController : Controller
 {
 public List<string> lstProvince = new List<string>() { "北京市", "天津市", "重慶市", "上海市", "河北省", "山西省", "遼寧省", "吉林省", "黑龍江省", "江蘇省", "浙江省", "安徽省", "福建省", "江西省", "山東省", "河南省", "湖北省", "湖南省", "廣東省", "海南省", "四川省", "貴州省", "云南省", "陜西省", "甘肅省", "青海省", "臺(tái)灣省", "內(nèi)蒙古自治區(qū)", "廣西壯族自治區(qū)", "西藏自治區(qū)", "寧夏回族自治區(qū)", "新疆維吾爾自治區(qū)", "香港特別行政區(qū)", "澳門特別行政區(qū)" };

 public JsonResult GetProvince(string type)
 {
  var lstRes = new List<Province>();
  for (var i = 0; i < 10; i++)
  {
  var oModel = new Province();
  oModel.Id = i;
  oModel.Name = lstProvince[i];
  lstRes.Add(oModel);
  }
  return Json(lstRes, JsonRequestBehavior.AllowGet);
 }

 }

 public class Province
 {
 public int Id { get; set; }

 public string Name { get; set; }
 }

測(cè)試代碼,沒什么好說的。

4、調(diào)試效果

得到效果

這樣基本就完成通過data-*來初始化組件了。

三、總結(jié)

上面簡單演示了下jquery data()方法結(jié)合html5 data-*屬性的使用?;旧夏苓_(dá)到博主的需求:不用多寫一行js代碼直接初始化標(biāo)簽。使用的時(shí)候直接引用jquery.js和jquery.extension.js文件即可。但是我們知道既然是html5里面的特性,那么對(duì)瀏覽器就得有一定的要求了。當(dāng)然,此用法功能比較初級(jí),但是對(duì)于一些簡單組件的初始化夠用了。

文中如果有理解不對(duì)的地方,歡迎指出,博主將不勝感激。

以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • JavaScript中的this指向問題詳解

    JavaScript中的this指向問題詳解

    這篇文章主要給大家介紹了關(guān)于JavaScript中this指向問題的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-04-04
  • javascript刷新父頁面方法匯總詳解

    javascript刷新父頁面方法匯總詳解

    這篇文章主要介紹了javascript刷新父頁面方法匯總詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-10-10
  • js實(shí)現(xiàn)ctrl+v粘貼上傳圖片(兼容chrome、firefox、ie11)

    js實(shí)現(xiàn)ctrl+v粘貼上傳圖片(兼容chrome、firefox、ie11)

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)ctrl+v粘貼上傳圖片,兼容chrome,firefox,ie11,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-03-03
  • uniapp實(shí)現(xiàn)審批流程的具體操作步驟

    uniapp實(shí)現(xiàn)審批流程的具體操作步驟

    這篇文章主要介紹了uniapp實(shí)現(xiàn)審批流程的具體操作方法,實(shí)現(xiàn)思路大概是需要要定義一個(gè)變量,記錄當(dāng)前激活的步驟,通過數(shù)組的長度來循環(huán)數(shù)據(jù),如果有就采用3元一次進(jìn)行選擇,具體實(shí)現(xiàn)步驟跟隨小編一起看看吧
    2024-03-03
  • JavaScript判斷瀏覽器運(yùn)行環(huán)境的詳細(xì)方法

    JavaScript判斷瀏覽器運(yùn)行環(huán)境的詳細(xì)方法

    這篇文章主要給大家介紹了關(guān)于JavaScript判斷瀏覽器運(yùn)行環(huán)境的詳細(xì)方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-06-06
  • echarts設(shè)置暫無數(shù)據(jù)方法實(shí)例及遇到的問題

    echarts設(shè)置暫無數(shù)據(jù)方法實(shí)例及遇到的問題

    Echarts是百度旗下的一款開源的商業(yè)級(jí)數(shù)據(jù)可視化產(chǎn)品,具有豐富的圖表類型,下面這篇文章主要給大家介紹了關(guān)于echarts設(shè)置暫無數(shù)據(jù)方法及遇到的問題的相關(guān)資料,需要的朋友可以參考下
    2022-12-12
  • js實(shí)現(xiàn)點(diǎn)擊鏈接后窗口縮小并居中的方法

    js實(shí)現(xiàn)點(diǎn)擊鏈接后窗口縮小并居中的方法

    這篇文章主要介紹了js實(shí)現(xiàn)點(diǎn)擊鏈接后窗口縮小并居中的方法,實(shí)例分析了javascript操作窗口的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-03-03
  • javascript中的鏈?zhǔn)秸{(diào)用

    javascript中的鏈?zhǔn)秸{(diào)用

    鏈?zhǔn)秸{(diào)用就是調(diào)用對(duì)象的方法后返回到該對(duì)象,嚴(yán)格來講它并不屬于語法,而只是一種語法技巧,js令人著迷的一點(diǎn)就是這里。
    2010-02-02
  • js實(shí)現(xiàn)頁面刷新滾動(dòng)條位置不變

    js實(shí)現(xiàn)頁面刷新滾動(dòng)條位置不變

    本文介紹了js實(shí)現(xiàn)頁面刷新滾動(dòng)條位置不變的實(shí)例代碼,需要的朋友可以看下
    2016-11-11
  • 小程序頁面間傳參的五種方式實(shí)例詳解

    小程序頁面間傳參的五種方式實(shí)例詳解

    頁面跳轉(zhuǎn),頁面之間傳遞參數(shù)在開發(fā)APP應(yīng)用的時(shí)候會(huì)經(jīng)常用到這樣的功能,下面這篇文章主要給大家介紹了關(guān)于小程序頁面間傳參的五種方式,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-08-08

最新評(píng)論