이전 기사에서는 부트 스트랩 구성 요소 시리즈에 몇 가지 유용한 구성 요소를 소개했습니다 (권장). 다음 으로이 기사에서는 부트 스트랩 구성 요소 시리즈 (권장 2)에 몇 가지 유용한 구성 요소가 소개됩니다. 관심있는 친구들이 함께 배울 것입니다!
7. 다중 값 입력 구성 요소 매니페스트
텍스트 상자의 다중 값 입력과 관련하여 항상 일반적인 요구 사항이었습니다. 오늘날 블로거는 모든 사람에게 유용한 다중 값 입력 구성 요소를 권장합니다. 고맙지 말고 "레드 스카프"라고 불러주세요!
1. 효과 디스플레이
로컬 다중 값 입력 상자
원격 다중 값 입력 상자
2. 소스 코드 설명
오픈 소스 커뮤니티와 공유하고 싶은 귀여운 사람들에게 감사합니다. 오픈 소스 주소.
3. 코드 예제
(1) 로컬 다중 값 입력
먼저 다음 파일을 참조해야합니다
<link href = "~/content/bootstrap/css/bootstrap.css"rel = "stylesheet"/<link href = "~/content/jquery-manifest-master/src/jquery.manifest.css"rel = "stylesheet"/> <script src = "~/컨텐츠/jquery-/jquery-1.9.1. src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/jquery-manifest-master/build/parts/jquery.ui.widget.js"> </script> <cript src = "~/content/jquery-manifest/jquery/jquery/jupery.jefest-master/
부트 스트랩의 JS 및 CSS 파일은 필요하지 않습니다. 이 기사는 좋은 스타일을위한 것이므로 참조됩니다. 매니페스트 구성 요소는 부트 스트랩에 의존하지 않지만 jQuery에 따라 다릅니다. 또한 jquery.manifest.css, jquery.ui.widget.js 및 jquery.marcopolo.js의 세 가지 파일도 참조해야합니다.
그런 다음 HTML 및 JS의 초기화가 있습니다
<입력 유형 = 'text'autocomplete = "off"id = "txt_man"/> <script type = "text/javaScript"> $ (function () {$ ( '#txt_man'). manifest ();}); </script>위와 같은 간단한 단계를 통해 위의 효과를 생성 할 수 있습니다. 매우 간단하지 않습니까? 몇 가지 사용법을 살펴 보겠습니다
// 일반적인 속성 : 텍스트 상자에 모든 항목의 수집을 가져옵니다. var value = $ ( '#txt_man'). manifest ( 'values'); // 일반 메소드 1 : 마지막 항목을 제거하십시오 $ ( '#txt_man'). 매니페스트 ( 'remove', ': last'); // 일반 메소드 2 : 항목 텍스트 상자에 새 항목을 추가하십시오. 두 번째 매개 변수의 형식은 JSON Data $ ( '#txt_man'). Manifest ( 'add', {id ', "1", name : "abc"}); // 일반 메소드 3 : 원격으로 검색된 데이터 목록 가져 오기 $ ('#txt_man '). Manifest ('list '); $ ( '#txt_man'). on ( 'ManifestAdd', 함수 (이벤트, 데이터, $ 항목, 초기) {// alert ( "새로 추가 된 항목은"+data);}); // 일반 이벤트 2 : 항목 이벤트 제거 $ ( '#txt_man'). ( 'Manifestremove', function, $ {{}); // 일반 이벤트 3 : // 이벤트 3 : // $ ( '#txt_man'). on ( 'manifestselect', function (이벤트, 데이터, $ item) {});(2) 원격 다중 값 입력
원격 검색 입력 방법을 사용하려면 URL 주소를 제공하고 데이터를 얻은 다음 브라우저로 돌아 가야합니다. 간단하게하기 위해이 기사는 소스 코드 웹 사이트의 URL을 직접 사용하여 효과를 표시합니다.
먼저 JS 파일을 참조해야합니다
<link href = "~/content/bootstrap/css/bootstrap.css"rel = "stylesheet"/<link href = "~/content/jquery-manifest-master/src/jquery.manifest.css"rel = "stylesheet"/> <script src = "~/컨텐츠/jquery-/jquery-1.9.1. src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/jquery-manifest-master/build/parts/jquery.ui.widget.js"> </script> <script src = "~/content/jquery-manifest-master/build/parts/jquery.marcopolo.js"> </script> <scrc = "~/content/jquery-manifest-master/build/jquery.manifest.js"> </script>
위와 비교하여 jquery.marcopolo.js 파일에 대한 추가 참조가 있습니다.
그런 다음 HTML 및 JS의 초기화가 있습니다
<form action = "https://api.foursquare.com/v2/venues/search?callback=?" 메소드 = "get"> <div> <div> <입력 유형 = 'text'id = "txt_man2"/> <img src = "~/content/jquery-manifest-master/busy.gif"/> </div> </div> </form> <script type = "text/javaScript"> $ (functions () {$ {txt _). 함수 (data, $ item, $ mpitem) {return data.name;}, formatValue : function (data, $ value, $ item, $ mpitem) {return data.id;}, marcopolo : {data : {client_id : {client_id : 'no2mtqvbqanw3q3sg23ofvmegyowizdt4e1qhrpzo0bfcn4x', client_secret : 'lg2wrkks1sxz2fmkdgg01ldw1kdtekktulmxm0xwrn0llhb', inpent : ', v v v v vlems : '20150601'}, formatdata : function (data) {return data.response.venues;}, formatitem : function (data, $ item) {return data.name;}, minchars : 3, param : 'query'}, 필수 : true});}); </screct>각 매개 변수의 중요성은 필요한 경우 이해하기 쉽습니다. 블로거는이 원격 검색 방법의 반환 값을 간단히 모니터링했습니다.
공원 친구 가이 원격 방법을 스스로 사용하려는 경우이 데이터 형식을 참조하여이를 구현할 수 있습니다.
8. 텍스트 상자 검색 구성 요소 부트 스트랩 유형
실제로, 많은 구성 요소는 텍스트 상자 검색의 기능과 관련 하여이 기능을 가지고 있습니다. 예를 들어, 블로거가 자동 완료를 달성하는 데 사용했던 jQuery UI에는 자동 완성 구성 요소가 있습니다. 부트 스트랩 텍스트 상자의 자동 검색 구성 요소가 온라인으로 떠오르고 있습니다. 오늘이 구성 요소를 선택한 이유는 Bootstrap의 스타일과 비슷하다고 생각하기 때문입니다. 구성 요소는 작고 간단하며 실용적이기 때문입니다.
1. 효과 디스플레이
로컬 정적 검색 (데이터 소스는 로컬입니다)
원격 검색 (데이터 소스는 AJAX 요청을 통해 원격으로 검색됩니다)
2. 소스 코드 설명
소스 코드 설명
3. 코드 예제
참조 해야하는 첫 번째 파일 : 주로 CSS 및 JS 파일이 포함됩니다. jQuery 및 부트 스트랩의 지원이 필요합니다.
<link href = "~/content/bootstrap/css/bootstrap.css"rel = "스타일 시트"/> <link href = "~/content/twit src = "~/content/jquery-1.9.1.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/twitter-bootstrap-typeahead-master/twit
그런 다음 구성 요소 초기화
<입력 유형 = 'text'id = "txt_man" />
로컬 데이터 소스
<script type = "text/javaScript"> $ (function () {$ ( "#txt_man"). typeahead ({keat : [{key : 1, value : 'toronto'}, {key : 2, value : 'montreal'}, {key : 3, 'new York'}, {value : '}, {key :'}, '}},'}}}, }, {key : 6, value : '콜럼버스'}, {key : 7, value : 'dallas'}, {key : 8, value : 'vancouver'}, {키 : 9, '시애틀'}, {key : 10, value : 'los angeles'}], display : "value :"key "}; </script>데이터 소스는 AJAX 요청을 통해 얻습니다
<script type = "text/javaScript"> $ (function () {$ ( "#txt_man"). typeahead ({ajax : {url : '/home2/typeaheaddata', timeout : 300, 'post', triggerlength : 1, loadingclass : null, displayfield : null, preprocess : null}, null} "value", val : "key"});}); </script>배경에 해당하는 테스트 방법
public jsonresult typeaheaddata () {var lstres = new List <botort> (); for (var i = 0; i <20; i ++) lstres.add (new {key = i, value = guid.newguid (). Tostring (). substring (0, 4)}; return JSON (lstres, jsonrequestbeHaverget);공통 속성 :
• 표시 : 필드 이름이 표시됩니다
• Val : 실제 가치
• 항목 : 기본적으로 표시되는 검색 결과 수. 기본값은 8입니다
• 출처 : 배열로 형식화 된 로컬 데이터 소스.
• Ajax : Ajax가 요청한 객체는 직접 문자열 URL 또는 객체 객체 일 수 있습니다. 객체 객체라면 URL에 대해 이야기하지 않습니다. TriggerLength 속성은 여러 문자의 입력이 검색을 트리거 함을 나타냅니다.
일반적으로 사용되는 이벤트 :
• 항목 선택 : 검색 값을 선택할 때 트리거됩니다.
<script type = "text/javaScript"> $ (function () {$ ( "#txt_man"). typeahead ({ajax : {url : '/home2/typeaheaddata', timeout : 300, 'post', triggerlength : 1, loadingclass : null, displayfield : null, null} "키", 항목 선택 : 함수 (항목, val, 텍스트) {}});}); </스크립트>매개 변수 항목은 선택된 객체를 나타내고, 매개 변수 val은 선택한 항목의 실제 값을 나타내고, 텍스트는 선택한 항목의 표시된 값을 나타냅니다.
9. 부트 스트랩 단계 구성 요소
부트 스트랩 단계 구성 요소와 관련하여 이전 기사는 ystep 위젯을 소개했습니다. 작업의 진행 상황을 보는 데 특정 역할을 할 수 있지만 일부 복잡한 비즈니스의 경우 현재 단계에 따라 해당 비즈니스를 처리하는 것이 약간 무력합니다. 오늘날 블로거는 매우 좋은 효과가있는 단계 구성 요소를 소개 할 것입니다. 이 구성 요소를 사용하면 프로그래머는 더 이상 복잡한 단계 설계에 대해 걱정할 필요가 없습니다.
1. 효과 디스플레이
스타일을 엿볼 수 있습니다
"이전 단계"및 "다음 단계"단계에 따라
더 많은 단계
2. 소스 코드 설명
이 구성 요소는 블로거 온라인에서 발견되었습니다. 나는 많은 스타일과 사용법이 부트 스트랩에서 나온 것을 보았다. 내가 언급해야 할 유일한 것은 JS와 CSS 파일입니다. 소스 코드 소스는 아직 발견되지 않았습니다. 누구나 소스 코드 소스를 알고 있다면 블로거에게 알릴 수 있습니다. 또한 저자의 노동 결과를 존중하기 위해 블로거는 독창성을 존중해야합니다!
3. 코드 예제
참조 해야하는 파일
<link href = "~/content/bootstrap/css/bootstrap.css"rel = "스타일 시트"/> <link href = "~/content/bootstrap-step/css/css/bs-is-fun.css"rel = "Stylesheet"/> <script src = "~/jquery-1. src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/bootstrap-step/js/brush.js"> </script>
BS-IS-FUN.CSS 및 BROSH.JS를 참조해야하며 구성 요소에는 jQuery 및 Bootstrap의 지원이 필요합니다.
그런 다음 구성 요소의 초기화가 있습니다.
(1) 화살표
<ul> <li> <a> step1 </a> </li> <li> <a> step2 </a> </li> <li> <a> step3 </a> </li> </ul>
정적 단계 인 경우 위의 그림에서 화살표 단계의 효과를보기 위해 위의 HTML 코드 만 있으면됩니다. 여기서 활성 스타일은 단계가 통과 한 스타일을 나타냅니다.
(2) 정사각형
<ul> <li> <a> step1 </a> </li> <li> <a> step2 </a> </li> <li> <a> step3 </a> </li> </ul>
(3) 원형 모양
<ul> <li> <a> step1 </a> </li> <li> <a> step2 </a> </li> <li> <a> step3 </a> </li> </ul>
(4) 진행률 막대
<ul> <li> <a> step1 <span> </span> </a> </li> <li> <a> step2 <Span> </span> </a> </li> <li> <a> step3 <span > </span> </a >> </li> <li> <a> step4 <span> </span> </a >> </a> <li> <a> step5 <span> </span> </a> </ul>
(5) 이전 단계, 다음 단계
위 그림의 "이전 단계"및 "다음 단계"는 Bootstrap 모달 구성 요소에서 직접 정의되거나 참조 용 코드입니다.
<div id = "mymodalnext"> <div> <div> <div> <버튼 유형 = "버튼"data-dismiss = "modal"aria-label = "close"> <span aria-hidden = "true"> </span> </button> <h4> 옵션 구성 </h4> <ul> <li> <a> <li> </</>> 2 <Span> </span> </a >> </li> <li> <a> 3 단계 <Span> </span> </a> <li> <a> 4 단계 <Span> </span> </a >> </a >> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> <div data-ride = "data-interval ="div ""false "> 역할 = "listbox"> <div> <p> 1 단계 </p> <div> 역할 구성 </div> <div> <입력 유형 = "text"/> </div> <div> <버튼 유형 = "button"> 저장 </div> <div> <p> Step </p> <div> </p> <div> <input type = "텍스트"/>>>>>>/p> <div> <div> 타입 = "버튼"> 저장 </button> </div> <div> <p> 단계 3 </p> </div> <div> <p> 단계 4 </div> <div> <p> 단계 5 </p> </div> <div> <p> 단계 6 </p> </div> </div> </div> <div> <버튼 유형 = "Button" type = "button"> next </button> </div> </div> </div>
물론 두 개의 버튼에 대한 클릭 이벤트를 등록해야합니다.
$ ( "#myModalNext .Modal-footer button"). 각 (function () {$ (this) .click (function () {if ($ (this) .hasclass ( "mn-next")) {$ ( "#myModalNext .carousel"). carousel ( '#mymodalnext. li.Active "). next (). addClass ("active ");} else {$ ("#myModalNext .carousel "). carousel ( 'prev'); if ($ ("#myModalNext .Step li "). 길이> 1) {$ ($ ($ ("#myModalNext .Step ly.Active ")). li.Active "). length -1]). RemoveClass ("active ")}})})논리는 불완전 할 수 있으며 공식적으로 사용하는 경우 테스트가 필요합니다.
10. 버튼 부하 구성 요소 Ladda-Bootstrap
버튼로드와 관련하여 블로거는 오랫동안 최적화 할 적절한 구성 요소를 찾고 싶었습니다. 처리되지 않으면 반복적 인 운영 가능성이 있습니다. 오늘 이렇게 작은 것을 살펴 보겠습니다.
1. 효과 디스플레이
첫 만남
사용자 정의 색상, 크기, 진행률 표시 줄
2. 소스 코드 설명
소스 코드 주소
3. 코드 예제
참조 해야하는 파일
<link href = "~/content/bootstrap/css/bootstrap.css"rel = "스타일 시트"/> <link href = "~/content/ladda-bootstrap-master/ladda-bootstrap-master/dist/ladda-temeless.min.css"rel = "script" src = "~/content/jquery-1.9.1.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/ladda-bootstrap-master/ladda-bootstrap-master/dist/dist/spin.min.js"> src = "~/content/ladda-bootstrap-master/ladda-bootstrap-master/dist/ladda.min.js"> </script>
구성 요소 초기화 : 4 개의 버튼을 초기화합니다
<버튼 데이터 스타일 = "확장-왼쪽"> <span> 확장-왼쪽 </span> </button> <버튼 데이터 스타일 = "확장-라이트"> <span> expand-right </span> </button> <버튼 데이터 스타일 = "Zoom-in"> <span> Zoom-in </span> </button> <button> <Zoomout> </button> </$ (function>). {$ ( 'button'). click (function (e) {e.preventDefault (); var l = ladda.create (this); l.start (); l.setprogress (0-1); $. post ( "/home2/typeaheaddata", {}, {{data, statu) {console.log (statu); json (json) " l.stop (); return false;});코드 의심 : 이해하기 어렵지 않아야합니다. 구성 요소 var l = ladda.create (this)를 초기화하는 데 관련된 코드; l.start (); 여기에서는 현재 클릭 한 버튼의 객체를 나타냅니다 (이것은 jQuery 객체 대신 DOM 객체임을 참고 한 다음 l.stop ()을 호출합니다. 요청이 완료되면 부하를 닫으십시오.
(1) 모든 데이터 스타일 옵션은 다음과 같습니다. 관심이 있으시면 시도해보고 그 효과가 무엇인지 볼 수 있습니다.
데이터 스타일 = "leffand-left"
데이터 스타일 = "확장 오른쪽"
데이터 스타일 = "확장"
데이터 스타일 = "확장"
데이터 스타일 = "Zoom-In"
데이터 스타일 = "Zoom-Out"
데이터 스타일 = "슬라이드 왼쪽"
데이터 스타일 = "슬라이드-오른쪽"
데이터 스타일 = "슬라이드 업"
데이터 스타일 = "슬라이드 다운"
데이터 스타일 = "계약"
(2) 버튼의 크기를 조정 해야하는 경우 구성 요소에 데이터 크기 속성이 내장되어 있습니다. 모든 데이터 크기 옵션은 다음과 같습니다.
data-size = "xs"
data-size = "s"
data-size = "l"
(3) 버튼의 색상을 설정 해야하는 경우 Data-Spinner-Color를 사용하십시오.
Data-Spinner-Color = "#FF0000"
(4) 버튼의 진행률 표시 줄 설정
ladda.bind ( 'button', {callback : function (instance) {var progress = 0; var interval = setInterval (function () {progress = math.min (progress + math.random () * 0.1, 1); instance.setProgress (progress); if (progration == 1) {indest.stop ();});});});});현재 실행 진행 상황은 주로 문장 인스턴스를 통해 설정되어 있으며, setProgress (progress);, 진행 값은 0과 1 사이입니다. 물론 위는 진행 효과를 테스트하는 코드 일뿐입니다. 공식 프로젝트에서는 현재 요청 실행 상황을 계산하여 진행 상황을 동적으로 반환해야합니다.
11. 구성 요소 부트 스트랩 스위치 스위치
Bootstrap Chinese 웹 사이트의 홈페이지에서 그러한 구성 요소를 찾을 수 있습니다.
1. 효과 디스플레이
초기 효과
다양한 속성 및 이벤트
2. 소스 코드 설명
부트 스트랩-스위치 소스 코드 주소 : https://github.com/nostalgiaz/bootstrap-switch
부트 스트랩-스위치 문서 및 데모 : http://www.bootstrap-switch.org/examples.html
3. 코드 예제
참조 해야하는 파일
<link href = "~/content/bootstrap/css/bootstrap.css"rel = "스타일 시트"/> <link href = "~/content/bootstrap-switch-master/bootstrap-switch-master/dist/css/bootstrap3/bootstrap-switch.css"rel = "/> script src = "~/content/jquery-1.9.1.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/bootstrap-switch-master/bootstrap-switch-master/dist/js/bootstrap-switch.js>
구성 요소는 jQuery 및 부트 스트랩에 따라 다릅니다
그런 다음 HTML 및 JS의 초기화가 있습니다
<input type = "checkbox"checked /> $ (function () {$ ( 'input [type = checkbox]'). bootstrapswitch ({size : "large"});})크기 속성이 필요하지 않습니다. 기본 스타일을 사용하면 매개 변수를 전달할 수 없습니다.
일반적으로 사용되는 특성
• 크기 : 스위치 크기. 선택적 값은 '미니', '작은', '정상', '큰'입니다.
• Oncolor : 스위치에서 켜기 버튼의 색상. 선택적 값에는 '기본', '정보', '성공', '경고', '위험', '기본값'이 포함됩니다.
• OffColor : 끄기 버튼의 색상의 스위치 색상. 선택적 값 '기본', '정보', '성공', '경고', '위험', '기본값'
• OnText : 스위치의 켜기 버튼 텍스트, 기본값은 "on"입니다.
• 오프 텍스트 : 스위치의 텍스트는 기본적으로 "OFF"입니다.
• Oninit : 구성 요소를 초기화하는 이벤트.
• OnSwitchChange : 스위치가 변경 될 때 이벤트.
일반적인 이벤트 및 방법을 사용하여 문서를 직접 볼 수 있으며 공무원은 매우 자세한 설명을 제공합니다.
12. 구성 요소 부트 스트랩 스타 등급
모든 사람은 10 번째와 10th Taobao의 등급에 대한 등급을 알아야합니다. 실수로 부트 스트랩 스타일 등급 구성 요소를 찾았습니다. 나는 그것이 흥미 롭다는 것을 알았다. 앞으로 전자 상거래, 커뮤니티 및 포럼 시스템에 유용 할 수 있으므로 공유하겠습니다.
1. 효과 디스플레이
2. 소스 코드 설명
소스 코드 다운로드
3. 코드 예제
이 구성 요소는 jQuery 및 부트 스트랩 스타일에 대한 지원이 필요합니다
<link href = "~/content/bootstrap/css/bootstrap.css"rel = "스타일 시트"/> <link href = "~/content/bootstrap-star-rating-master/bootstrap-star-rating-master/css/starting.css"rel = "stylesheet"/> <script src = "~/content/jquery-1.9.1.js"> </script> <script src = "~/content/bootstrap-star-star-rating-master/bootstrap-star-rating-master/js/star-rating.js"> </script> <script src = "~/content/bootstrap-star-rating-master/bootstrap-star-rating-master/js/locales/zh.js"> </script>
HTML 초기 구성 요소를 통해 직접
<입력 id = "input-2b"type = "number"min = "0"max = "5"step = "0.5"data-size = "xl"data-symbol = "us"data-default-caption = "{등급} Hearts"data-star-captions = "{}"> <input id = "input-21a"0 "0"0 "0" data-size = "xl"> <input id = "input-21b"value = "4"type = "number"min = 0 max = 0 max = 5 step = 0.2 data-size = "lg"> <input-21c "value ="0 "type ="min = 0 max = 8 step = 0.5 data-size = "xl" "8"> input id "input-21d"2. type = "number"min = 0 max = 5 step = 5 step = 0.5 data-size = "sm"> <input id = "input-21e"value = "0"type = "numb"min = 0 max = 5 step = 0.5 data-size = "xs"> <입력 ID = "input-21f"value = "0"type = "numb"0 min = 5 Step = 0.5 data-size = "input id = input id =" type = "number"min = "0"max = "5"step = "0.5"data-stars = 5data-symbol = "신"data-default-caption = "{rate} heart"data-star-caption = "{}"> <input id = "input-22"value = "0"type = "min = 0 max = 5 step = 0 rattl = 1 data-class- 데이터-글리 피콘 = 0>구성 요소는 클래스 = "등급"을 통해 초기화됩니다. 이해하기 쉬운 몇 가지 매개 변수는 다음과 같습니다.
• 값 : 구성 요소 초기화시 기본 점수를 나타냅니다
• 최소 : 최소 점수
• 최대 : 최대 점수
• 단계 : 매번 추가 된 최소 스케일
• 데이터 크기 : 별의 크기
• 데이터 스타 : 별의 수
$ ( "#input-21a"). val ()을 사용하여 현재 점수를 얻을 수 있습니다.
위는 편집기가 귀하에게 소개 한 부트 스트랩 구성 요소 시리즈의 유용한 구성 요소입니다 (추천 2). 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!