서문 : 양식, 양식 검증, 파일 업로드, 드롭 다운 상자, 팝업 박스 등을 포함하여 Bootstrap의 많은 일반적인 구성 요소를 공유했습니다.이 기간 동안 블로거는 몇 가지 유용한 구성 요소 (일부 프로젝트에 사용되었습니다)를 수집했습니다. 이틀 후, 그는 그들 중 일부를 정리했습니다. "좋은 것들이 다른 사람들과 공유해야한다"라는 원칙에 따라 오늘날 우리는 정원사가 참조하기 위해 블로거가 수집 한 것들을 공유 할 수있는 혜택을 줄 것입니다. 대부분의 구성 요소는 오픈 소스 구성 요소이며 일부 구성 요소는 인터넷에서 블로거가 발견하고 다시 작성한 효과입니다. 그들은 만족스럽지 않을 수 있습니다. 관심이 있으시면 살펴보십시오.
1. 시간 구성 요소
부트 스트랩 스타일에는 많은 시간 구성 요소가 있습니다. GitHub에서 키워드 "DatePicker"를 검색 할 수 있으며 많은 시간 구성 요소를 찾을 수 있습니다. 블로거는 이전에 두 가지를 사용했으며 크기가 크거나 작은 문제가 있음을 발견했습니다. 심사 후, 우리는 좋은 결과를 가지고 있으며 다양한 시나리오에 사용할 수있는 시간 구성 요소를 발견했습니다. 아래의 스타일을 살펴 보겠습니다.
1. 효과 디스플레이
초기 효과
구성 요소의 문화 및 날짜 형식 사용자 정의 : 날짜 만 표시됩니다.
날짜와 시간 표시 (휴대폰 및 태블릿 장치의 경험이 더 좋을 수 있음)
2. 소스 코드 설명
Chuchu는 구성 요소 효과를보고 소스 코드 주소를 제공했습니다.
3. 코드 예제
먼저 필요한 파일을 참조하십시오
<link href = "~/content/bootstrap/css/bootstrap.css"rel = "스타일 시트"/> <link href = "~/content/bootstrap-dateTimepicker-master/build/css/bootstrap-dateTimepicker.css"rel = "stylesheet"/> <script src = "~/content/jquery-1.9.1.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "// cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/ment-locales <스크립트 src = "~/content/bootstrap-datetimepicker-master/build/js/bootstrap-datetimepicker.min.js"> </script>
jQuery와 부트 스트랩이 필요합니다. 또한 Moment-With-Locales.js 파일을 참조해야합니다. 물론이 CDN 메소드를 사용하지 않고이 JS 파일을 해당 지역으로 다운로드 할 수도 있습니다. 이 JS 파일을 해당 지역으로 완전히 다운로드 한 다음 로컬 참조를 추가 할 수 있습니다.
(1) 초기 효과
</label> 날짜 : </label> <div class = '입력 그룹 날짜'id = 'datetimepicker1'> <입력 유형 = 'text'/> <span> <span> </span> </div> <script type = "text/javaScript"> $ (function () {$ ( '#datetimepicker1' ');}; </스크립트>이것은 위의 그림과 같이 효과를 제공합니다.
(2) 중국 문화 및 날짜 형식
HTML 부분은 변경되지 않았습니다. JS를 초기화 할 때 매개 변수를 추가하십시오.
<script type = "text/javaScript"> $ (function () {$ ( '#dateTimePicker1'). DateTimePicker ({format : 'yyyy-mm-dd', // 날짜 형식, 날짜 로케일 만 : 'zh-cn'/Chinest Culture}); </스크립트>(3) 표시 시간
</label> <div class = '입력 그룹 날짜'id = 'datetimepicker2'> <입력 유형 = 'text'/> <span> <span> </span> </div> <script type = "text/javaScript"> $ (function () {$ ( '#datetimepicker2'). HH : MM : SS ', LOCALE :'ZH-CN '}); </스크립트>(4) 최대 날짜 및 최소 날짜
$ ( '#dateTimepicker1'). DateTimePicker ({형식 : 'yyyy-mm-dd', // 날짜 형식, 만 표시 날짜 로케일 : 'zh-cn', // 중국 문화 maxdate : '2017-01-01', // 최대 날짜 마인드 : '2010-01-01'// minimumd});(5) 삭제 버튼을 활성화합니다
Showclear : True
(6)보기 모드 속성. 다음과 같이 코드를 복사하려면 브라우저를 선택 모드로 설정하십시오. ViewMode : 'Years'
(7) 기타
보다 강력한 기능은 API를 참조하십시오. 여기에 모두 나열하지 않을 것입니다. 다양한 특별한 요구를 충족시키기위한 많은 속성, 이벤트 및 방법이 있습니다.
2. 자체 증가 장치 구성 요소
Bootstrap AutoinCrementer와 관련하여 모든 프로젝트에서 필요하지 않을 수 있습니다. 특정 텍스트 상자에는 데이터 번호가 필요하며 배열의 크기를 미세 조정해야합니다. 오랫동안 대화를 나눈 후 일부 정원사는 어떻게 생겼는지 모를 수도 있으므로 사진을 클릭하십시오.
1. 효과 디스플레이
실제로 효과는 매우 간단하지만 최대 값, 최소 값 및 자체 부여 값을 자동으로 설정하고 디지털 검증을 자동으로 수행 할 수 있습니다. 가장 편리한 것은 JavaScript를 사용하여 초기화해야하며 HTML에서만 초기화되면됩니다.
2. 소스 코드 설명
소스 코드 및 문서 주소
3. 코드 예제
참조 할 첫 번째 파일은 다음과 같습니다.
<link href = "~/content/bootstrap/css/bootstrap.css"rel = "스타일 시트"/> <link rel = "Stylesheet"href = "https://maxcdn.bootstrapcdn.com/font-awomese/4.6.3/csss/font-awesome.min.css href = "~/content/jquery.spinner-master/dist/css/bootstrap spinner.css"rel = "스타일 시트"/> <script src = "~/content/jquery-1.9.1.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.js"> </script> src = "~/content/jquery.spinner-master/dist/js/jquery.spinner.js"> </script>
font-aweaome.min.css 파일도 CDN 참조 파일이며 로컬에도 참조 할 수도 있습니다.
(1) 초기화
<div data-trigger = "spinner"> <input type = "text"value = "1"data-rule = "수량"> <span> <a href = "javaScript :;" data-spin = "up"> <i> </i> </a> <a href = "javaScript :;" data-spin = "down"> <i> </i> </a> </span> </div>
간단한 HTML 섹션 만 있으면 위의 그림과 같이 효과를 볼 수 있습니다. 쉬운가요?
(2) 자체 증가 유형
구성 요소의 소스 코드를 볼 때는 여러 자체 증가 유형이 정의되어 있음을 알 수 있습니다.
다음과 같은 이러한 유형에 대한 데이터 규칙 속성을 정의 할 수 있습니다.
자체 증가 구성 요소를 제어 할 수있는 규칙은 월별 규칙에 따라 수행됩니다.
(3) 최대 값, 최소 값, 자체 부여 값을 설정하십시오
위의 특정 유형 외에도 구성 요소는 사용자 정의 최대 값, 최소 및 자체 지원 값도 지원합니다.
<div data-trigger = "spinner"> <input type = "text"value = "1"data-min = "-10"data-max = "10"data-step = "2"data-rule = "수량"> <span> <a href = "javaScript :;" data-spin = "up"> <i> </i> </a> <a href = "javaScript :;" data-spin = "down"> <i> </i> </a> </span> </div>
data-min = "-10": 최소 값 data-max = "10": 최대 값 data-step = "2": 자체 증가 값
이것은 이해하기 쉽고 너무 많이 설명하지 않을 것입니다. 효과:
(4) 이벤트 캡처
구성 요소는 두 가지 이벤트 변경 및 변경 사항을 제공하며, 이는 변경 후 수치 변경 및 이벤트 콜백에 해당합니다.
$ ( '#id'). Spinner ( 'Change', function (e, newval, OldVal) {}); $ ( '[[data-trigger = "spinner"]'). Spinner ( 'Change', function (e, newval, OldVal) {});3. 로딩 효과
며칠 전, 그룹 구성원이 부트 스트랩의 로딩 효과에 어떤 구성 요소를 사용할 것인지 물었습니다. 실제로 바이두에서 검색하면 많은 결과가 찾을 수 있습니다. 여기서 블로거는 자신의 사용 경험에 따라 모든로드 된 위젯을 공유하여 모든 사람이 사용할 수 있기를 바랍니다. 주로 실용적이고 시원하게 나뉩니다. 실제 모델은 평균 효과가 있지만 다양한 브라우저에 사용할 수 있습니다. Cool 모델은 최신 CSS3 및 HTML5를 사용하여 작성되었으며 효과는 매우 시원하지만 기본적으로 IE (10 미만)의 하위 버전은 호환되지 않습니다.
1. 실용적
1. 완벽한로드 구성 요소
이 구성 요소는 인터넷에서 블로거가 발견 한 JS이지만 다운로드 한 후 크고 작은 문제를 발견했습니다. 그래서 블로거는 그것을 다시 작성하여 부트 스트랩로드 구성 요소라고 명명했습니다. 구성 요소가 시작될 때 커버 레이어를 팝업 한 다음 구성 요소가 닫히면 오버레이 레이어 DOM이 제거되고 로딩 효과가 GIF 이미지를 사용하는 것입니다.
PerfectLoad.js 파일 컨텐츠 :
/********************************************* * * Plug-in: Friendly page loading effect* Author:sqinyang ([email protected]) * Time:2015/04/20 * Explanation: With the popularity of HTML5, the page effect is getting more and more dazzling, and at the same time, it also requires loading a large number of plug-ins and materials. 인터넷 속도는 특히 외국 서버에 매달려있는 웹 사이트의 경우 매우 치열합니다. 많은 재료를 열면 위치를 천천히로드 할 수 있으며 위치가 일치하지 않습니다. 따라서이 방법은 모든 사람이 ******************************/jQuery.bootStrapLoading = {start : function (옵션) {varicacity : 1, //로드 Page Prostparency BackgroundColor : "#ffff" 국경 색상 국경 위도 : // 프롬프트 테두리 너비 보르 더스티일 : // // 프롬프트 테두리 스타일로드 팁 : "로드, 제발 대기 ...", // // 프롬프트 텍스트 팁 스콜러 : "#666", // 프롬프트 색상 지연 시간 : 1000, // 페이지가 완료된 후, 로딩 페이지가 점차적으로 빠져 나옵니다. 그것은 0과 같으며,} var 옵션 = $ .extend (기본값, 옵션)를 일시 할 필요가 없습니다. // 페이지 너비와 높이 var var _pageHeight = documentElement.ClientHeight, _pageWidth = document.DocumentElement.ClientWidth; // 페이지가로드되지 않음에 표시되는 사용자 정의 콘텐츠 var _loadinghtml = '<div id = "rodingpage"style = "위치 : 고정; 왼쪽 : 0; 상단 : 0; _position : width : 100%; 높이 :' + _pageheight + 'px; 배경 :' + 옵션. '; 필터 : Alpha (불투명도 =' + 옵션 * 100 + '); z-index :' + 옵션. zindex + '; "> <div id ="style = "위치 : 대기; + 'px; '; font-size : 20px; ">' + Options.LoadingTips + '</div> </div>'; // 로딩 효과를 나타냅니다 $ ( "body"). Append (_loadinghtml); //로드 프롬프트의 너비와 높이를 가져옵니다. var _loadingTipsh = docum // 거리를 계산하고로드 프롬프트 상자를 위, 아래, 왼쪽 및 오른쪽으로 유지합니다. (_pageHeight- _loadingTipsh) / 2 : 0, _loadingleft = _pagewidth> _loadingtipsw? (_pagewidth -_loadingTipsw) / 2 : 0; $ ( "#loadingTips"). css ({ "왼쪽": _loadingleft + "px", "top": _loadingTop + "px"}); // 페이지로드 상태 문서를 듣습니다. // 함수 실행 pageloaded () {if (document.readystate == "complete") {var loadingMask = $ ( '#loadingPage'); settimeout (function () {loadingMask.animate ({ "불투명": 0}, 옵션 .delaytime, function () {$ (this) .hide ();});}, 옵션.sleep); }}}, end : function () {$ ( "#loadingPage"). 제거 (); }}
이 JS는 기본적으로 온라인으로 다운되었지만이를 바탕으로 블로거는 최종 방법을 추가했습니다.
구성 요소가 어떻게 사용되는지 살펴 보겠습니다. 테스트 코드는 다음과 같습니다.
<html> <head> <meta name = "viewport"content = "width = device-width"/> <title>로드 </title> <link href = "~/content/bootstrap/css/bootstrap.css"rel = "stylesheet"/> <script src = "~/content/jquery-1.9.1.js"> src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/bootstrap-loading/perfectload.js"> </script> <script type = "text/javaScript"> $ (function () {$ ( "#btn_submit"). $ .BOTSTRAPLOAD.START (rodingTips : "데이터가 처리되고 있습니다 ..."}; </script> </head> <body> <div style = "padding : 0px"> <div style = "height : 450px;"> <div> 쿼리 조건 </div> <div> <formsearch "> <div> <div> <버튼 유형 ="button "id ="btn_submit "> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>사용 지침 : 구성 요소에는 HTML 코드가 필요하지 않으므로로드를 실행할 때만 구성 요소의 시작 방법 만 호출하면됩니다. start () 메소드는 팝업 레이어를 시작하고 기본값 변수에서 모든 매개 변수를 설정할 수 있습니다. 로드가 완료되면 구성 요소의 최종 방법이 호출되고 팝업 레이어가 자동으로 제거됩니다. 효과를 보자 :
효과에 만족하지 않으면 기본값에서 매개 변수를 직접 설정할 수 있습니다. 주석은 자세히 작성되므로 여기에 하나씩 나열하지 않습니다.
2. 국화 로딩 구성 요소 Spin.js
이미지를 사용하여 로딩 효과를 표시하면 고유 한 단점이 있으므로 많은 로딩 구성 요소가 CSS+JS를 사용하여 애니메이션 효과를 달성합니다. Spin.js는 이러한 예 중 하나입니다. Spin.js는 오픈 소스 주소가있는 오픈 소스 구성 요소입니다.
소스 코드를 다운로드 한 후 초기화는 구성 요소에 마스크가 없음을 발견하므로 다음과 같이 가능합니다.
매개 변수를 오랫동안 검색 한 후에는 찾을 수 없었거나 "조직"이있는 곳을 찾지 못했습니다. 방법은 없습니다. 블로거는 마스크 자체의 효과 만 추가 할 수 있습니다. 따라서 새로운 CSS 스타일 파일이 생성되어 일시적으로 Spin.css라는 스타일만으로도 일시적으로 명명되었습니다.
.fade {위치 : 고정; 상단 : 0; 오른쪽 : 0; 하단 : 0; 왼쪽 : 0; Z- 인덱스 : 9999; 불투명도 : 1; 배경색 : 회색;}그런 다음 Spin.js를 두 곳에서 다시 작성했으며 다시 쓰기 컨텐츠는 다음과 같습니다.
/** * Copyright (C) 2011-2014 Felix Gnass * MIT 라이센스에 따라 라이센스가 부여 * http://spin.js.org/ * * 예 : var opts = {lines : 12, // 길이를 그리는 줄의 수 : 7, // 각 선 두께 : // 전체 규모의 스케일의 길이 : // 1.0, the inner radius of the inner scale. 스피너 코너 : 1, // roundness (0..1) 색상 : ' #000', // #rgb 또는 #rrggbb 불투명도 : 1/4, // 선 회전 : 0, 회전 오프셋 방향 : 1, // 1 : 시계 방향 속도 : 1, // 초당 트레일 : // fpps : // fpps : // fps settimeout () zindex : 2e9, // 기본적으로 높은 z-index를 기본적으로 classname : // css 클래스를 요소 상단에 할당하기 위해 // css 클래스를 사용하여 '50%', // center left : // center shadow : // 그림자, // 하드웨어를 사용하는지 여부'// '위치가 될지도 }; var target = document.getElementById ( 'foo'); var 스피너 = 새로운 스피너 (opts) .spin (대상); */; (function (root, factory) {if (typeof module == 'Object'&& module.exports) module.exports = factory (); // commonjs else if (typeof define == 'function'&& define.amd) define (factory); // amd else.spinner = factory (); 접두사 = 'webkit', 'ms', 'o']; * DIV는 선택적으로 Createel을 통과 할 수 있습니다. i <n; i holly. ~~ (Alpha * 100) && '-' + prefix + '-'|| '; 100 + ' + alpha +'} ' +'100%{ ' + z +'} ', cssrules. var i; CSS (el. n] || == 정의된다. obj [n]} return obj; 각 선 너비의 길이 : 5, // 선 두께 반경 : 10, // 내부 원 스케일의 반경 : 1.0, // 스피너 코너의 전체 크기 : 1, // roundness (0..1) 색상 : ' #000', ' #000', ' #000', ' #000', // #rrggbb 불충분 : 1/4, // 라인 회전 : 0, // rotation 오프 오프, // 회전. -1 : 반 시계 반대 방향 : 1, // 초당 라운드 : // 10, // 후주 백분율 FPS : 20, 초당 프레임 SETTIMEOUT () ZINDEX : 2E9, // 기본값에 의해 높은 z -index를 사용합니다. // 섀도우 hwaccel을 렌더링 할 것인지 : // 하드웨어 가속 위치를 사용할지 여부 : // 요소 위치}; merge (spinner.prototype, { / ** * 주어진 대상 요소에 스피너를 추가합니다.이 인스턴스가 이미 * 스피닝 인 경우 이전 대상에서 자동으로 제거됩니다. * spop () 내부. * / spin : function (target) {this.stop (); var self = this; var o = self.opts; var el = createel (null, null, r Classname, r Classname : o.classname : o.classname); CSS (위치, 폭 : 0, Zindex : O.Left, Top : O.Top}; self astep = f / o.lines; (함수 anim () {i ++; for (var j = 0; settimeout (~~) (1000/fps); el.classname = el.parentnode.removechild (el); (O. -lines -1) * (1- O. 방향) / 2; COLOR, SHAMING (return CSS), {Position : 'O.Length * (O.Length + O.Width) +'PX ', O.Width +'PX ', COLOR, : BOXHODOW : BOOX, : ' + ~~ (360/o.lines * i + o.rotate) +'deg) 번역 ( ' + o.scale * o.radius +'px ' +', 0) ', borderradius : (o.corners * o.scale * o.width >> 1) +'px '); css (createel (), {위치 : '절대', 상단 : 1 + ~ (O.Scale * O.Width / 2) + 'PX', Transform : O.Hwaccel? 'Translate3d (0,0,0)': '', 불투명도 : O.Opacity, 애니메이션 : usecssanimation (o.opacity, O.Tail, O.Tail, O.TiRail, O.Tail, O.TiRection). o.lines) + '' + 1 / o.speed +의 선형 무한대}); rgba (0,0,0, .1))}} * 단일 라인의 불투명도를 조정합니다 initvml () { / * 유틸리티 함수 VML 태그 * / function vml (tag, att '행동 :#기본#vml); 폭 :} var margin = -(o.width + o.length) * var g = css (position : worth : margin, 왼쪽); O.Lines * i + 'deg', 왼쪽 : ~~ dx}), ins (css (vml ( 'roundRect', {arcsize : a.corners}), {width : r, r, r, height : o.scale * o.width, 왼쪽 : o.scale * o.radius, top : -o.scale * o.width >> filter : filter : filter : left : left : left : o.scale * o.radius, top : -o.scale * o.width. VML ( 'fill', {color : getColor (O.Color, I), 불투명도 : O.Opacity}), vml ( 'stroke', {불투명도 : 0}) // 컬러 블리드를 수정하기위한 투명한 스트로크 (obleacty change). progid : dximagetransform.microsoft.blur (pixelradius = 2, shadowopacity = .3); O.Shadow && o. -lines. el = 'type :'text/css '); '변형'&& probe.adj) initvml ();spin.js
두 가지 변경 사항 :
(1) 초기화 할 때 표시되면 표시되면 해당 태그에 페이드 스타일을 추가하십시오.
(2) 매번 페이드 스타일을 삭제하십시오.
수정이 완료되면 이제 테스트 인터페이스를 사용할 수 있습니다.
<html> <head> <meta name = "viewport"content = "width = device-width"/> <title>로드> <link href = "~/content/bootstrap/css/bootstrap.css"rel = "Stylesheet"/> <link href = "~/content/content/spin.jshsps/css/css" ". <script src = "~/content/jquery-1.9.1.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/spin.js-master/js/spin.js"> <script type = (텍스트/javascrip) "< $ ( "#btn_submit"). on ( "click", function () {// var opts = {// lines : 9, // 꽃잎 수 : 1, // 꽃잎 길이 // 폭 각도 // 방향 : 1, // 꽃잎 회전 방향 1 : 시계 방향, -1 : 카운터 클록 시일 반대 방향 : '#000', // 꽃잎 색상 // 속도 : 1, // 꽃잎 회전 속도 // 트레일 : 60, // 그림자 회전 할 때 (백분율) // false, // highwaccel : false, // hardweate, // speenner 여부에 관계없이 // ClassName : // Spinner CSS 스타일 이름 // Zindex : // Spinner 's Z-Axis (기본값은 200000000),'Auto ', // Spinner Top Positioning Unit Px // 왼쪽 :'Auto '// var var}; Spinner = New Spinner ({}). Spin (target); var spinner = ajax ({type : 'get', url : '/home/testloading', beforesend : {var 옵션 = {lines : 9, // petals width : // petal width : // petal width : // petal widt. 중앙 그림자 : 진실한 불투명도 : var target = getElementByid ( 'foo'); spin (target); </script> </head> <body> <div style = "padding : 0px"> <div style = "height : 450px;"> <div> 쿼리 조건 </div> <div> <formsearch "> <div> <div> <버튼 유형 ="button "id ="btn_submit "> </div> </div> </div> </div> </div> </div> <div id = "foo"> </div> </body> </html> test_spin.cshtml사용 지침 : 페이지가 jQuery를 사용하지 않는 경우 Spin.js 파일을 참조하십시오.이 파일에는 jQuery 지원이 필요하지 않습니다. jQuery를 사용하려면 jQuery.spin.js 파일을 참조하십시오. 위의 코드는 jQuery를 사용하지 않습니다. 구성 요소는 빈 DIV를 정의한 다음이 div에서 초기화해야합니다. 얻은 결과는 다음과 같습니다.
물론,이 효과에 만족하지 않으면 마스크 레이어의 투명성과 전체 마스크 스타일을 설정할 수도 있습니다. 초기화 중에 사용자 정의 할 수있는 다양한 회전 매개 변수가 있으며 위 코드에는 자세한 주석이 있습니다.
2. 멋진 스타일
1. jQuery.shcircleloader.js 구성 요소
말할 필요도없이,이 구성 요소는 사용하기가 간단하지만 IE10 아래 버전에 대해서는 지원되지 않습니다. 효과를 먼저 보자 :
특정 코드 사용법에 관해서는 블로거가 깊이 들어 가지 않으므로 Baidu 또는 Github에서 검색 할 수 있습니다.
2. fakeloader.js 구성 요소
더 많은 옵션, 더 나은 평평한 효과, 휴대폰 및 태블릿 장치에 대한 더 나은 경험. 사진을 보면 알게 될 것입니다. 오픈 소스 주소.
4. 플로우 차트 플러그인
나는 얼마 전에 워크 플로를해야했고 현재 프로세스가 어디로 가고 있는지 보여 주어야했습니다. 프로세스 플러그인 ystep을 찾았습니다. 이 구성 요소의 장점은 사용하기가 간단하고 가볍다는 것입니다.
1. 효과 디스플레이
효과를 먼저 보자
파란색 축소 버전
2. 소스 코드 설명
오픈 소스 주소.
3. 코드 예제
먼저 필요한 파일을 참조하십시오
<link href = "~/content/bootstrap/css/bootstrap.css"rel = "stylesheet"/<link href = "~/content/ystep-master/css/ystep.css"rel = "stylesheet"/> <script src = "~/content/jquery-1.9.1.js"> src = "~/content/bootstrap/js/bootstrap.js"> </script>
이 구성 요소는 jQuery와 Bootstrap의 두 구성 요소의 지원이 필요합니다.
그런 다음 빈 Div를 정의하십시오
<div id = "div_ystep1"> </div>
마지막으로 버튼을 클릭하면 구성 요소를 초기화하십시오
<script type = "text/javaScript"> $ (function () {$ ( "#btn_submit"). click (function () {$ ( "#div_ystep1"). loadstep ({// ystep 모양 크기 // 선택적 값 : 작은 크기 : // ystep color scheme // 옵션 값 : // 푸른 색, " [// step name title : "start", // step 컨텐츠 (마우스 가이 단계의 노드로 이동하면이 단계의 노드로 이동할 때) 컨텐츠 : "프로세스 시작"}, {제목 : "승인", 내용 : "모든 역할 시작 승인"}, {제목 : "구현", "요구 사항"}, {title : "})); $ ( "#div_ystep1"). </스크립트>동적 단계 인 경우 단계 속성을 동적으로 구성해야 할 수도 있습니다. 그런 다음 setstep ()을 사용하여 도달 한 단계를 설정하십시오.
일반적인 방법 :
// 다음 단계 $ ( ".
5. 버튼 프롬프트 구성 요소 부트 스트랩-확인
버튼 프롬프트 구성 요소는 JS의 확인 기능과 약간 유사하지만이 확인은 툴팁 팝업 효과이며 사용자에게 결정 및 취소 판단을 제공하며 인터페이스가 더 친숙합니다. 이 구성 요소를 소개하기 전에 먼저 부트 스트랩에서 프롬프트 상자의 효과를 살펴볼 수 있습니다.
부트 스트랩-확인 구성 요소는이 프롬프트 박스의 효과에 따라 구현됩니다. GitHub에는 많은 부트 스트랩-확인 구성 요소가 있지만 기본적으로 동일합니다. .
1. 효과 디스플레이
가장 독창적 인 효과
사용자 정의 제목, 버튼 텍스트
2. 소스 코드 설명
오픈 소스 주소
3. 코드 예제
(1) 파일 견적 :
<link href = "~/content/bootstrap/css/bootstrap.css"rel = "스타일 시트"/> <스크립트 src = "~/content/jquery-1.9.1.js"> </script> <scrc = "~/content/bootstrap/js/bootstrap.js"> </script>
스타일은 bootstrap.css를 지원해야합니다. JavaScript에는 jQuery 및 bootstrap.js의 지원이 필요합니다.
(2) 해당 클릭 태그 (모든 태그가 될 수 있음)
<버튼 유형 = "button"id = "btn_submit1"> <span aria-hidden = "true"> </span> delete </button>
(3) JS 초기화
<script type = "text/javaScript"> $ (function () {$ ( '##btn_submit1'). 확인 ({animation : true, 배치 : "하단", 제목 : "삭제하고 싶습니까?", btnoklabel : 'ok', btncancellabel : 'click', inconcirm : in click "); Oncancel : function () {// alert ( "클릭 취소"); </스크립트>(4) 더 많은 속성, 이벤트, 방법
위에서 언급 한 초기화 된 특성 외에도 일반적으로 사용되는 특성이 있습니다. 예를 들어:
btnokclass : 버튼의 스타일을 결정하십시오. btncancelclass : 버튼의 스타일을 취소합니다. 싱글 톤 : 하나의 결정 상자 만 허용되는지; POPOUT : 사용자가 다른 장소를 클릭 할 때 결정 상자를 숨길 것인지;
예를 들어 Btnokclass를 Btnokclass로 설정할 수 있습니다 : 'BTN BTN-SM BTN-PRIMARY',
6. 이미지 분류 및 필터링 구성 요소 Muxitup
이것은 매우 멋진 효과와 오픈 소스 주소를 가진 그룹화 및 필터링 구성 요소입니다. 블로거는 인터넷에서 데모를 보았고 그것이 실제로 효과적이라고 생각했습니다. 더 이상 고민하지 않고 위의 그림.
어때요, 효과는 괜찮습니다. 이 구성 요소는 프로젝트에서 당분간 사용되지 않지만 앞으로 필요로 할 가능성이 있다고 생각하므로 수집했습니다. 구현 코드는 온라인으로 복사됩니다. 나는 그것을 깊이 연구하지 않았다. 관심이 있으시면 살펴볼 수 있습니다. HTML+JS 코드는 다음과 같이 구현됩니다.
<html><head> <meta name="viewport" content="width=device-width" /> <title>mixitup</title> <link href="~/Content/image/css/normalize.css" rel="stylesheet" /> <link href="~/Content/image/css/layout.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/mixitup-master/jquery.easing.min.js"></script> <script src="~/Content/mixitup-master/build/jquery.mixitup.min.js"></script> <script type="text/javascript"> $(function () { var filterList = { init: function () { debugger; // MixItUp plugin $('#portfoliolist').mixitup({ targetSelector: '.portfolio', filterSelector: '.filter', effects: ['fade'], easing: 'snap', // call the hover effect onMixEnd: filterList.hoverEffect() }); }, hoverEffect: function () { // Simple parallax effect $('#portfoliolist .portfolio').hover( function () { $(this).find('.label').stop().animate({ bottom: 0 }, 200, 'easeOutQuad'); $(this).find('img').stop().animate({ top: -30 }, 500, 'easeOutQuad'); }, function () { $(this).find('.label').stop().animate({ bottom: -40 }, 200, 'easeInQuad'); $(this).find('img').stop().animate({ top: 0 }, 300, 'easeOutQuad'); } ); } }; // Run the show! filterList.init(); }); </script></head><body> <div> <ul id="filters"> <li><span data-filter="app card icon logo web">所有分类</span></li> <li><span data-filter="app">手机应用</span></li> <li><span data-filter="card">卡片</span></li> <li><span data-filter="icon">图标</span></li> <li><span data-filter="logo">Logo</span></li> <li><span data-filter="web">网页</span></li> </ul> <div id="portfoliolist"> <div data-cat="logo"> <div> <img src="~/Content/image/Logo/5.jpg" /> <div> <div> <a>Bird Document</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div data-cat="app"> <div> <img src="~/Content/image/app/1.jpg" /> <div> <div> <a>Visual Infography</a> <span>APP</span> </div> <div></div> </div> </div> </div> <div data-cat="web"> <div> <img src="~/Content/image/web/4.jpg" /> <div> <div> <a>Sonor's Design</a> <span>Web design</span> </div> <div></div> </div> </div> </div> <div data-cat="card"> <div> <img src="~/Content/image/card/1.jpg" /> <div> <div> <a>Typography Company</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="app"> <div> <img src="~/Content/image/app/3.jpg" /> <div> <div> <a>Weatherette</a> <span>APP</span> </div> <div></div> </div> </div> </div> <div data-cat="card"> <div> <img src="~/Content/image/card/4.jpg" /> <div> <div> <a>BMF</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="card"> <div> <img src="~/Content/image/card/5.jpg" /> <div> <div> <a>Techlion</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/1.jpg" /> <div> <div> <a>KittyPic</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div data-cat="app"> <div> <img src="~/Content/image/app/2.jpg" /> <div> <div> <a>Graph Plotting</a> <span>APP</span> </div> <div></div> </div> </div> </div> <div data-cat="card"> <div> <img src="~/Content/image/card/2.jpg" /> <div> <div> <a>QR Quick Response</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/6.jpg" /> <div> <div> <a>Mobi Sock</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/7.jpg" /> <div> <div> <a>Village Community Church</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/4.jpg" /> <div> <div> <a>Domino's Pizza</a> <span>Icon</span> </div> <div></div> </div> </div> </div> <div data-cat="web"> <div> <img src="~/Content/image/web/3.jpg" /> <div> <div> <a>Backend Admin</a> <span>Web design</span> </div> <div></div> </div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/1.jpg" /> <div> <div> <a>Instagram</a> <span>Icon</span> </div> <div></div> </div> </div> </div> <div data-cat="web"> <div> <img src="~/Content/image/web/2.jpg" /> <div> <div> <a>Student Guide</a> <span>Web design</span> </div> <div></div> </div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/2.jpg" /> <div> <div> <a>Scoccer</a> <span>Icon</span> </div> <div></div> </div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/5.jpg" /> <div> <div> <a>3D Map</a> <span>Icon</span> </div> <div></div> </div> </div> </div> <div data-cat="web"> <div> <img src="~/Content/image/web/1.jpg" /> <div> <div> <a>Note</a> <span>Web design</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/3.jpg" /> <div> <div> <a>Native Designers</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/4.jpg" /> <div> <div> <a>Bookworm</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/3.jpg" /> <div> <div> <a>Sandwich</a> <span>Icon</span> </div> <div></div> </div> </div> </div> <div data-cat="card"> <div> <img src="~/Content/image/card/3.jpg" /> <div> <div> <a>Reality</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/2.jpg" /> <div> <div> <a>Speciallisterne</a> <span>Logo</span> </div> <div></div> </div> </div> </div> </div> </div><!-- container --></body></html>muxitup7. 요약
以上是博主最近收藏的一些前端组件，在此分享给大家，有实用型，也有炫酷型，不管如何，希望能帮助需要的园友节省寻找组件的时间。还有一些组件没有整理出来，待整理好后放到后面分享。如果你觉得本文对你有帮助，不妨推荐下。再次感谢园友们的支持，不管是物资奖励还是精神支持，都是对博主分享精神的肯定，博主一定继续努力。
The above is the relevant knowledge of the Bootstrap component series welfare chapter (recommended) that the editor introduced to you. 나는 그것이 당신에게 도움이되기를 바랍니다. If you have any questions, please leave me a message and the editor will reply you in time. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!