서문 : 최근에, 부트 스트랩 구성 요소를 사용할 때, 나는 사용하기 쉬운 문제를 발견했다. 많은 간단한 구성 요소 초기화에는 간단한 선택 태그와 같은 JS에서 많은 초기화 코드를 작성해야합니다. 백그라운드에서 데이터를 얻고 옵션으로 채우면되지만 배경에서 데이터를 얻으려면 JS 초기화가 필요하므로 페이지가 초기화 될 때 JS 초기화 코드에서 많은 중복 코드가 발생하여 매우 성가신 것으로 보입니다. 그래서 부트 스트랩 테이블의 데이터 속성을 기억했습니다. 데이터를 사용하여 HTML에서 간단한 구성 요소를 직접 초기화 할 수 있다면 너무 멋질 것입니다. 먼저 부트 스트랩 테이블 문서를 살펴 보겠습니다.
부트 스트랩 테이블의 거의 모든 속성과 이벤트가 데이터*에 사용할 수 있음을 알 수 있습니다. 그러면 블로거가 연구를 시작할 것입니다. 데이터-*이 일은 어디에서 왔습니까?
1. jQuery Data ()에 대한 예비 연구
온라인을 검색 한 후 마침내 데이터 소스를 찾았습니다. jQuery와 HTML5에서 나온 것으로 판명되었습니다. 좋은 것, 정말 좋은 것! jQuery API를 살펴 보겠습니다
원래 사용량은 다음과 같습니다.
이 함수는 실제로 매우 명백하며, 이는 요소에 특정 속성과 데이터를 추가하거나 값을 취하는 것입니다.
Data () 메소드와 HTML5 Data-* 속성의 조합을 살펴 보겠습니다.
하하, 이건 좋다. html5 data-*에 의해 설정된 값은 jquery의 data () 메소드를 사용하여 얻을 수 있습니다. 여기의 규칙은 다음과 같습니다.
1) 모든 데이터 속성은 "데이터"로 시작해야합니다.
2) 속성은 "-"로 분리됩니다.
3) jQuery에서 속성을 취할 때 "데이터"및 "-"를 제거하십시오.
이를 통해 기본으로, 우리는 태그에서 속성을 설정 한 다음 JS에서 해당 속성을 취하는 방법을 알고 있습니다. 콤보 박스의 마지막 캡슐화의 예와 함께 아래에서 설명해 봅시다.
2. JQuery Data ()는 데이터를 구현합니다.* 초기화 구성 요소
이전 JS 구성 요소 시리즈 - 자신의 JS 구성 요소를 캡슐화하십시오. 이 기사에서 간단한 콤보 박스를 캡슐화 할 수도 있으며,이 기사는 URL을 통해 백엔드에서 데이터를 가져올 수 있습니다. 따라서 아래에서도 여전히이 구성 요소의 기초까지 최선을 다하고 DROPDOW 박스 구성 요소를 초기화하기 위해 데이터-* 속성을 선택 태그에 직접 추가합니다.
1. JS 구성 요소 캡슐화 코드
(function ($) {// 1. jQuery 확장 메소드 정의 combobox $ .fn.combobox = function (옵션, param) {if (typeof 옵션 == 'string') {return $ .fn.combobox.methods [옵션] (this, param); .fn.com.defa는 {}를 추가합니다. 옵션 (옵션). 옵션. var 옵션 = '옵션', 옵션 옵션 (target.val); $ .getJson (url, function (data) {jq.empty (); var 옵션 = $ ( '<plooct> </옵션>'); 옵션 .attr ( 'value', ''); 옵션 .text ( 'please'); 항목 [valuefield '). }}; // 6. 기본 매개 변수 목록 $ .fn.combobox.defaults = {url : null, param : null, null, data : null, valuefield : 'valuefield :'value ', textfield :'text ','select ','select ', onbeforeLoad : onjeforEload : ontail (param)}, onloadsuccess : function () {{value (value)}}; //이 단락은 새로 추가되고 초기화 메소드 $ (document) .ready (function () {$ ( '. combobox'). 각 (function () {var $ combobox = $ (this); $ .fn.combobox.call ($ combobox, $ combobox.data ())}); }) (jQuery);대부분의 코드는 마지막 코드와 다르지 않습니다. 다음 단락에 초점을 맞추겠습니다
//이 단락은 새로 추가되었습니다. 페이지 초기화가 완료되면 초기화 메소드 $ (document) .ready (function () {$ ( '. combobox'). 각 (function () {var $ combobox = $ (this); $ .fn.combobox.call ($ combobox, $ combobox.data ())});페이지 초기화가 완료된 후에는 스타일 선택기를 통해 구성 요소가 초기화된다는 것이 명백합니다. 여러 .combobox 스타일이있는 경우 각각이 사용됩니다. 통화 방법에 전화하여 $ .fn.combobox.call을 통해 Combobox의 초기화를 호출하십시오 ($ combobox, $ combobox.data ());. 호출 방법의 두 매개 변수는 다음과 일치합니다.
1) 현재 초기화 된 jQuery 객체
2) 매개 변수 목록. 여기서 $ combobox.data ()를 통해 얻은 데이터* 속성은 모든 HTML 데이터-* 속성입니다. 모든 데이터-* 속성을 매개 변수로 전달하여 Combobox의 초기화 방법으로 전달하십시오.
2. 데이터를 통해 HTML에서 초기화하십시오.*
<select id = "search_"name = "search_province"data-url = "/home/getProvince"data-param = '{ "type": "0"}'data-text-field = "name"data-value-field = "id"> </select>데이터-* 속성을 지정합니다. 위의 초기화는 여기서 초기화가 스타일 selector.combobox를 통해 구성 요소를 초기화하는 것임을 알고 있으므로 데이터를 사용하려면 구성 요소를 초기화하려면 클래스 = "combobox"스타일을 설정하여 배경이 초기화 해야하는 태그를 얻을 수 있도록해야합니다.
3. 백엔드 C# 메소드
공개 클래스 HomeController : 컨트롤러 {public list <string> lstprovince = new List <string> () { "Beijing", "Tianjin", "Chongqing", "Shanghai", "Hebei", "Shanxi", "Liaoning", "Jilin", "Heilongjiang", "Zhejang", "Anhui", "Fujian", "Jiangxi", "Shandong", "Henan", "Hubei", "Hunan", "Guangdong", "Hainan", "Sichuan", "Guizhou", "Yunnan", "Yannan", "Shaanxi", "Gansu", "Qinghai Province", ",", ",", ","Gansu " 몽골 자치 지역 ","광신 자치 지역 ","티베트 자치 지역 ","닝스 시아 후이 자율 지역 ","Xinxia Uygur 자율 지역 ","홍콩 특수 행정 지역 ","마카오 특수 행정 지역 "}; public jsonresult getProvince (문자열 유형) {var lstres = 새 목록 <지방> (); for (var i = 0; i <10; i ++) {var omodel = 새로운 지방 (); omodel.id = i; omodel.name = lstprovince [i]; lstres.add (omodel); } return JSON (lstres, jsonRequestBehavior.allowget); }} public class province {public int id {get; 세트; } 공개 문자열 이름 {get; 세트; }}코드 테스트에 대해 할 말이 없습니다.
4. 디버깅 효과
효과를 얻으십시오
이는 기본적으로 데이터를 통해 구성 요소의 초기화를 완료합니다.
3. 요약
상기는 HTML5 데이터-* 속성과 결합 된 jQuery data () 메소드의 사용을 간략하게 보여줍니다. 기본적으로 블로거의 요구를 충족시킬 수 있습니다. 태그를 직접 초기화하기 위해 JS 코드를 하나 더 쓸 필요가 없습니다. 그것을 사용할 때는 jquery.js 및 jquery.extension.js 파일 만 참조하십시오. 그러나 우리는 그것이 HTML5의 기능이므로 브라우저에 대한 특정 요구 사항이 있어야한다는 것을 알고 있습니다. 물론,이 사용 기능은 비교적 기본이지만 일부 간단한 구성 요소의 초기화에 충분합니다.
기사에 잘못된 이해가 있으면 지적하면 블로거가 매우 감사 할 것입니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.