คำนำ: ฉันได้แชร์ส่วนประกอบทั่วไปของ bootstrap มาก่อนรวมถึงแบบฟอร์มการตรวจสอบแบบฟอร์มการอัปโหลดไฟล์ตรวจสอบกล่องดรอปดาวน์กล่องป๊อปอัพ ฯลฯ ในช่วงเวลานี้บล็อกเกอร์ได้รวบรวมส่วนประกอบที่มีประโยชน์ (บางส่วนถูกใช้ในโครงการ) หลังจากสองวันเขาได้แยกแยะบางอย่าง ตามหลักการของ "สิ่งที่ดีจะต้องแบ่งปันกับผู้อื่น" วันนี้เราจะให้ประโยชน์บางอย่างเพื่อแบ่งปันสิ่งที่รวบรวมโดยบล็อกเกอร์เพื่ออ้างอิงโดยชาวสวนที่ต้องการ ส่วนประกอบส่วนใหญ่เป็นส่วนประกอบโอเพ่นซอร์สและบางส่วนก็เป็นเอฟเฟกต์ที่พบและเขียนใหม่โดยบล็อกเกอร์บนอินเทอร์เน็ต พวกเขาอาจไม่น่าพอใจ หากคุณสนใจโปรดดู
1. องค์ประกอบเวลา
มีส่วนประกอบหลายครั้งในสไตล์ bootstrap คุณสามารถค้นหาคำหลัก "DatePicker" บน GitHub และคุณสามารถค้นหาส่วนประกอบต่างๆได้มากมาย บล็อกเกอร์เคยใช้สองคนมาก่อนและพบว่าจะมีปัญหาบางอย่างขนาดใหญ่หรือขนาดเล็ก หลังจากการคัดกรองเราพบองค์ประกอบเวลาที่มีผลลัพธ์ที่ดีและสามารถใช้สำหรับสถานการณ์ต่าง ๆ มาดูสไตล์ด้านล่าง
1. ผลการแสดงผล
ผลเบื้องต้น
การปรับแต่งวัฒนธรรมและรูปแบบวันที่ในส่วนประกอบ: วันที่จะแสดงเฉพาะ
แสดงวันที่และเวลา (ประสบการณ์ของโทรศัพท์มือถือและอุปกรณ์แท็บเล็ตอาจดีกว่า)
2. คำอธิบายรหัสที่มา
ชูชูดูที่เอฟเฟกต์ส่วนประกอบและให้ที่อยู่ซอร์สโค้ด
3. ตัวอย่างรหัส
ก่อนอื่นอ้างอิงไฟล์ที่ต้องการ
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/bootstrap-datetimepicker-master/build/css/bootstrap-datetimepicker.css 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 src = "~/content/bootstrap-datetimepicker-master/build/js/bootstrap-datetimepicker.min.js"> </script>
จำเป็นต้องใช้ jQuery และ bootstrap นอกจากนี้คุณต้องอ้างถึงไฟล์ moment-with-locales.js แน่นอนคุณสามารถดาวน์โหลดไฟล์ JS นี้ไปยังพื้นที่ท้องถิ่นของคุณโดยไม่ต้องใช้วิธี CDN นี้ คุณสามารถดาวน์โหลดไฟล์ JS นี้ไปยังพื้นที่ท้องถิ่นของคุณได้อย่างสมบูรณ์แล้วเพิ่มการอ้างอิงในเครื่อง
(1) เอฟเฟกต์เริ่มต้น
<label> วันที่: </label> <div class = 'อินพุต-กลุ่มวันที่' id = 'dateTimePicker1'> <อินพุต type = 'text'/> <span> <span> </span> </span> </div> <script type = "text/javascript"> $ (ฟังก์ชัน () </script>
สิ่งนี้จะให้เอฟเฟกต์ดังที่แสดงในภาพด้านบน
(2) วัฒนธรรมจีนและการจัดรูปแบบวันที่
ส่วน HTML ยังคงไม่เปลี่ยนแปลง เพียงเพิ่มพารามิเตอร์เมื่อเริ่มต้น JS
<script type = "text/javascript"> $ (function () {$ ('#datetimepicker1'). datetimepicker ({รูปแบบ: 'yyyy-mm-dd', // การจัดรูปแบบวันที่, เฉพาะตำแหน่งวันที่: </script>(3) เวลาแสดง
<label> เวลา: </label> <div class = 'วันที่อินพุต-กลุ่ม' id = 'dateTimePicker2'> <อินพุต type = 'text'/> <span> <span> </span> </span> </div> <script type = "text/javascript"> $ (function () {$ ('#datetimepicker2' HH: MM: SS ', Locale:' ZH-CN '}); </script>(4) วันที่สูงสุดและวันที่ต่ำสุด
$ ('#dateTimePicker1'). DateTimePicker ({รูปแบบ: 'yyyy-mm-dd', // การจัดรูปแบบวันที่, แสดงวันที่แสดงเฉพาะวันที่: 'zh-cn', // วัฒนธรรมจีน maxdate: '2017-01-01', // วันที่สูงสุด: '2010-01-01-01' //(5) เปิดใช้งานปุ่มลบ
Showclear: จริง
(6) แอตทริบิวต์โหมดดู ตั้งค่าเบราว์เซอร์เพื่อเลือกโหมดเพื่อคัดลอกรหัสดังต่อไปนี้: ViewMode: 'Years'
(7) คนอื่น ๆ
สำหรับฟังก์ชั่นที่มีประสิทธิภาพมากขึ้นโปรดดู API ดังนั้นฉันจะไม่แสดงรายการทั้งหมดที่นี่ มีคุณลักษณะจำนวนมากกิจกรรมและวิธีการต่างๆเพื่อตอบสนองความต้องการพิเศษที่หลากหลายของคุณ
2. ส่วนประกอบอุปกรณ์ที่เพิ่มขึ้นด้วยตนเอง
เกี่ยวกับ bootstrap autoincrementer อาจไม่จำเป็นในทุกโครงการ มีสถานการณ์พิเศษบางอย่างเช่น: กล่องข้อความบางอย่างต้องการหมายเลขข้อมูลและขนาดของอาร์เรย์จะต้องปรับแต่ง หลังจากพูดคุยกันเป็นเวลานานชาวสวนบางคนอาจไม่รู้ว่ามันเป็นอย่างไรดังนั้นโปรดคลิกที่ภาพ
1. ผลการแสดงผล
ในความเป็นจริงเอฟเฟกต์นั้นง่ายมาก แต่สามารถกำหนดค่าสูงสุดค่าต่ำสุดและค่าเพิ่มด้วยตนเองโดยอัตโนมัติและสามารถทำการตรวจสอบดิจิตอลโดยอัตโนมัติ สิ่งที่สะดวกที่สุดคือต้องเริ่มต้นโดยใช้ JavaScript และจำเป็นต้องเริ่มต้นใน HTML เท่านั้น
2. คำอธิบายรหัสที่มา
ซอร์สโค้ดและที่อยู่เอกสาร
3. ตัวอย่างรหัส
ไฟล์แรกที่อ้างอิงมีดังนี้:
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com href = "~/content/jQuery.spinner-master/dist/css/bootstrap-spinner.css" rel = "stylesheet"/> <script src = "~/content/jQuery-1.9.1.js"> </script> <script src = "~/content/bootstrap/js/js/js 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 ('เปลี่ยน', ฟังก์ชั่น (e, newVal, oldVal) {}); $ ('[data-trigger = "spinner"]'). Spinner ('เปลี่ยน', ฟังก์ชั่น (e, newval, oldval) {});3. เอฟเฟกต์การโหลด
ไม่กี่วันที่ผ่านมาสมาชิกกลุ่มถามว่าส่วนประกอบใดที่จะใช้สำหรับเอฟเฟกต์การโหลดของ Bootstrap ในความเป็นจริงการค้นหา Baidu ยังสามารถค้นหาผลลัพธ์ได้มากมาย ที่นี่บล็อกเกอร์จะแบ่งปันวิดเจ็ตโหลดสองสามอย่างตามประสบการณ์การใช้งานของเขาหรือเธอโดยหวังว่าทุกคนสามารถใช้พวกเขาได้ ส่วนใหญ่แบ่งออกเป็นจริงและเย็น แบบจำลองการปฏิบัติมีเอฟเฟกต์เฉลี่ย แต่สามารถใช้สำหรับเบราว์เซอร์ต่างๆ โมเดลเย็นเขียนโดยใช้ CSS3 และ HTML5 ล่าสุดและเอฟเฟกต์นั้นเจ๋งมาก แต่โดยทั่วไปแล้ว IE (ต่ำกว่า 10) รุ่นล่างนั้นเข้ากันได้
1. ใช้งานได้จริง
1. ส่วนประกอบที่สมบูรณ์แบบ
ส่วนประกอบนี้เป็น JS ที่พบโดยบล็อกเกอร์บนอินเทอร์เน็ต แต่หลังจากดาวน์โหลดแล้วฉันพบปัญหาใหญ่และเล็ก ดังนั้นบล็อกเกอร์เขียนใหม่และตั้งชื่อมันเป็นส่วนประกอบ bootstrap-loading หลักการของมันคือการปรากฏขึ้นเลเยอร์ฝาครอบเมื่อเริ่มต้นและจากนั้นเมื่อส่วนประกอบถูกปิดชั้นซ้อนทับ DOM จะถูกลบออกและเอฟเฟกต์การโหลดจะใช้อิมเมจ GIF
เนื้อหาไฟล์ perfectload.js:
/*********************************************ปลั๊กอิน: เอฟเฟกต์การโหลดหน้าเว็บที่เป็นมิตร*ผู้แต่ง: sqinyang ([email protected])*เวลา: 2015/04/20*คำอธิบาย: ด้วยความนิยมของ HTML5 ความเร็วอินเทอร์เน็ตนั้นรุนแรงมากโดยเฉพาะอย่างยิ่งสำหรับเว็บไซต์ที่แขวนอยู่บนเซิร์ฟเวอร์ต่างประเทศ เมื่อคุณเปิดวัสดุจำนวนมากคุณสามารถโหลดตำแหน่งอย่างช้าๆและสถานที่ที่ไม่สอดคล้องกัน ดังนั้นวิธีนี้จึงถูกเขียนขึ้นเพื่ออำนวยความสะดวกให้ทุกคนใช้ ****************************************************************************************************************************************************************************************** Border Color Borderwidth: 1, // พรอมต์ความกว้างของเส้นขอบพรมแดน: "solid", // prompt border style loadingtips: "การโหลดโปรดรอ ... ", // ข้อความแจ้ง Tipscolor: "#666", // การหน่วงเวลาสี: 1,000, // หลังจากการโหลดหน้าโหลดเสร็จสมบูรณ์ มันเท่ากับ 0 ไม่จำเป็นต้องระงับตัวเลือก var = $. extend (ค่าเริ่มต้นตัวเลือก); // รับความกว้างของหน้าและความสูง var _pageheight = document.documentelement.clientheight, _pagewidth = document.documentelement.clientWidth; // loadinghtml เนื้อหาที่กำหนดเองที่แสดงก่อนหน้าหน้าไม่โหลด var _loadinghtml = '<div id = "loadingpage" style = "ตำแหน่ง: คงที่; ซ้าย: 0; top: 0; _position: Absolute; Width: 100%; ความสูง:' + _pageight + 'PX; '; ตัวกรอง: อัลฟ่า (opacity =' + ตัวเลือกความเป็นไปได้ * 100 + '); z-index:' + opotions.zindex + '; "> <div id =" loadingtips "style =" ตำแหน่ง: Absolute; ตัวเลือก BorderWidth + 'PX; '; FONT-SIZE: 20PX; ">' + OPTIONS.LOADINGTIPS + '</div> </div>'; // แสดงเอฟเฟกต์การโหลด $ ("body"). ผนวก (_loadinghtml); // รับความกว้างและความสูงของกล่องพรอมต์การโหลด var _loadingTipsh = document.getElementById ("loadingTips"). clientHeight, _loadingTipsw = document.getElementById ("loadingTips") ไคลเอ็นต์ // คำนวณระยะทางและเก็บกล่องพรอมต์การโหลดขึ้นลงซ้ายและขวา, var _loadingtop = _pageheight> _loadingTipsh กึ่งกลาง? (_pageheight - _loadingTipsh) / 2: 0, _loadingleft = _pagewidth> _loadingTipsw? (_pagewidth - _loadingTipsw) / 2: 0; $ ("#loadingtips"). css ({"ซ้าย": _loadingleft + "px", "top": _loadingtop + "px"}); // ฟังเอกสารสถานะการโหลดหน้าเว็บ onreadyStateChange = pageLoaded; // เรียกใช้ฟังก์ชัน pageLoaded () {if (document.readyState == "เสร็จสมบูรณ์") {var loadingMask = $ ('#loadingPage'); settimeout (function () {loadingmask.animate ({"opacity": 0}, opotions.delaytime, function () {$ (this) .hide ();});}, ตัวเลือก, sleep); }}}, สิ้นสุด: function () {$ ("#loadingPage"). ลบ (); -
JS นี้ออนไลน์โดยทั่วไป แต่บนพื้นฐานนี้บล็อกเกอร์ได้เพิ่มวิธีการสิ้นสุด
มาดูกันว่าส่วนประกอบมีการใช้งานอย่างไร นี่คือรหัสทดสอบ:
<html> <head> <meta name = "viewport" content = "width = อุปกรณ์-ความกว้าง"/> <title> โหลด </title> <link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <script SRC = " src = "~/content/bootstrap/js/bootstrap.js"> </script> <สคริปต์ src = "~/content/bootstrap-loading/perfectload.js"> </script> <script type = "text/javascript" $. bootstraploading.start ({loadingtips: "ข้อมูลกำลังถูกประมวลผลโปรดรอ ... "}); - </script> </head> <body> <div style = "padding: 0px"> <div style = "ความสูง: 450px;"> <div> เงื่อนไขการสืบค้น </div> <div> <form id = "FormSearch"> <div> <div> <button = "button" id = "btn_submit" </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>คำแนะนำสำหรับการใช้งาน: ส่วนประกอบไม่จำเป็นต้องใช้รหัส HTML ใด ๆ แต่ต้องเรียกใช้วิธีการเริ่มต้นของส่วนประกอบเมื่อดำเนินการโหลด วิธีการเริ่มต้น () เริ่มต้นเลเยอร์ป๊อปอัพและสามารถตั้งค่าพารามิเตอร์ทั้งหมดในตัวแปรค่าเริ่มต้น เมื่อการโหลดเสร็จสิ้นวิธีการสิ้นสุดของส่วนประกอบจะถูกเรียกและเลเยอร์ป๊อปอัพจะถูกลบออกโดยอัตโนมัติ มาดูเอฟเฟกต์:
หากคุณไม่พอใจกับเอฟเฟกต์คุณสามารถตั้งค่าพารามิเตอร์ในค่าเริ่มต้นด้วยตัวคุณเอง คำอธิบายประกอบถูกเขียนอย่างละเอียดดังนั้นฉันจะไม่แสดงรายการทีละรายการ
2. ส่วนประกอบการโหลดของเบญจมาศหมุน js
การใช้รูปภาพเพื่อแสดงเอฟเฟกต์การโหลดมีข้อเสียโดยธรรมชาติตอนนี้ส่วนประกอบการโหลดจำนวนมากใช้ CSS+JS เพื่อให้ได้เอฟเฟกต์ภาพเคลื่อนไหว Spin.js เป็นหนึ่งในตัวอย่างเหล่านี้ Spin.js เป็นส่วนประกอบโอเพ่นซอร์สที่มีที่อยู่โอเพนซอร์ส
หลังจากดาวน์โหลดซอร์สโค้ดการเริ่มต้นพบว่าส่วนประกอบไม่มีหน้ากากดังนั้นจึงเป็นเช่นนี้ได้เท่านั้น:
หลังจากค้นหาพารามิเตอร์เป็นเวลานานฉันไม่พบพวกเขาหรือฉันไม่พบพวกเขาที่มี "องค์กร" ไม่มีทางบล็อกเกอร์สามารถเพิ่มเอฟเฟกต์ของหน้ากากด้วยตัวเองเท่านั้น ดังนั้นไฟล์สไตล์ CSS ใหม่จึงถูกสร้างขึ้นและตั้งชื่อว่า Spin.css ชั่วคราวโดยมีสไตล์เดียวเท่านั้น:
.Fade {ตำแหน่ง: แก้ไข; ด้านบน: 0; ขวา: 0; ด้านล่าง: 0; ซ้าย: 0; z-index: 9999; ความทึบ: 1; พื้นหลังสี: สีเทา;}จากนั้น spin.js ถูกเขียนใหม่ในสองสถานที่และเนื้อหาการเขียนใหม่มีดังนี้:
/** * ลิขสิทธิ์ (C) 2011-2014 FELIX GNASS * ได้รับอนุญาตภายใต้ใบอนุญาต MIT * http://spin.js.org/ * * ตัวอย่าง: var opts = {lines: 12, // จำนวนเส้นที่จะวาดความยาว: 7, // ความยาวของแต่ละบรรทัด มุมสปินเนอร์: 1, // roundness (0..1) สี: ' #000', // #rgb หรือ #rrggbb ความทึบ: 1/4, // ความทึบของเส้นหมุน: 0, // การหมุนทิศทาง: 1, // 1: ตามเข็มนาฬิกา, -1: ความเร็วทวนเข็มนาฬิกา settimeout () zindex: 2e9, // ใช้ z-index สูงตามคลาสเริ่มต้นชื่อ: 'spinner', // css คลาสเพื่อกำหนดให้กับองค์ประกอบด้านบน: '50%', // กลางซ้ายในแนวตั้ง: '50%', // center shadow - var target = document.getElementById ('foo'); var spinner = new Spinner (opts) .spin (เป้าหมาย); */; (ฟังก์ชั่น (รูท, โรงงาน) {ถ้า (typeof module == 'object' && module.exports) โมดูล exports = factory (); // Commonjs else ถ้า (typeof define == 'function' && define.amd) define คำนำหน้า = ['webkit', 'moz', 'ms', 'o']; * DIV ถูกสร้างขึ้น อาร์กิวเมนต์. length; ~~ (Alpha * 100), I, Lines] .oin ('-'); && '-' + คำนำหน้า + '-' || '' 'ถ้า (! แอนิเมชั่น [ชื่อ]) {sheet.insertrule ('@' + pre +' keyframes ' + ชื่อ +' {' +' 0%{opacity: ' + z +'} ' 100 + '%{opacity:' + alpha + '}' + '100%{opacity:' + z + '}' + '}', sheet.cssrules.length); pp; ครั้งหนึ่ง (obj [n] === undefined) obj [n] = def [n]; 7, // ความยาวของความกว้างแต่ละบรรทัด: 5, // รัศมีความหนาของเส้น: 10, // รัศมีของระดับวงกลมด้านใน: 1.0, // ปรับขนาดโดยรวมของมุมสปินเนอร์: 1, // roundness (0..1) สี: ' #000' ตามเข็มนาฬิกา, -1: ความเร็วทวนเข็มนาฬิกา: 1, // รอบต่อวินาที: 100, // afterglow เปอร์เซ็นต์ FPS: 20, // เฟรมต่อวินาทีเมื่อใช้ settimeout () zindex: 2e9, // ใช้ z -index สูงโดย classname: 'spinner', // css // ว่าจะทำให้เกิดเงา hwaccel: false, // ว่าจะใช้ตำแหน่งการเร่งความเร็วของฮาร์ดแวร์: 'Absolute' // การวางตำแหน่งองค์ประกอบ}; Merge (spinner.prototype, { / ** * เพิ่มสปินเนอร์ให้กับองค์ประกอบเป้าหมายที่กำหนดหากอินสแตนซ์นี้มีอยู่แล้วการหมุนแล้วมันจะถูกลบออกโดยอัตโนมัติจากเป้าหมายก่อนหน้า b การเรียก * หยุด () ภายใน * / สปิน: ฟังก์ชัน (เป้าหมาย) {this.stop (); var self = this; var o = self.opts; CSS (EL, {ตำแหน่ง: O.Position, Width: 0, Zindex: O.Zindex, ซ้าย: O.Left, Top: O.Top}); self.opts); = f / o.lines; ~~ (1,000/fps)); El.ParentNode.ClassName = El.ParentNode.ClassName.replace (reg, ''); (O.Lines - 1) * (1 - O.Direction) / 2; แปลง: 'หมุน (' + ~~ (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? ' + 1 / O.Speed +' s Linear Infinite '}); ถ้า (O.Shadow) Ins (Seg, CSS (เติม (' #000 ',' 0 0 4px #000 '), {top:' 2px '}); RGBA (0,0,0, .1) ')); initvml () { / * ฟังก์ชั่นยูทิลิตี้เพื่อสร้างแท็ก VML * / ฟังก์ชั่น vml (แท็ก, attr) {return createel ('<' + tag + 'xmlns = "urn: schemas-microsoft.com: vml">', attr); sheet.addrule ('. spin-vml', 'พฤติกรรม: url (#default#vml)'); S, พิกัด: -r + '' + -r}), {width: s, ความสูง: s}); ins (css (grp (), {การหมุน: 360 / o.lines * i + 'deg', ซ้าย: ~~ dx}), ins (css (vml ('roundrect', {arcsize: o.corners}), {width: r, ความสูง: o.scale o.width >> 1, ตัวกรอง: ตัวกรอง}), vml ('เติม', {color: getColor (o.color, i), opacity: o.opacity}), vml ('stroke', {Opacity: 0}) I ++) {Seg (I, -2, ' O) {var c = el.firstchild; 'undefined') {sheet = (function () {var el = createel ('style', {type: 'text/css'}); ins (document.getElementByTagname ('head') [0], el); return el.sheet || el.stylesheet;} (); 'url (#default#vml)'});Spin.js
การเปลี่ยนแปลงสองครั้ง:
(1) เมื่อเริ่มต้นหากแสดงให้เพิ่มสไตล์จางลงในแท็กที่สอดคล้องกัน
(2) ลบสไตล์ซีดจางทุกครั้ง
หลังจากทำการดัดแปลงแล้วอินเทอร์เฟซทดสอบจะพร้อมใช้งานแล้ว
<html> <head> <meta name = "viewport" content = "width = อุปกรณ์-ความกว้าง"/> <title> loading2 </title> <link href = "~/content/bootstrap/css/bootstrap.css" rel = stylesheet "/> <link href =" <script src = "~/content/jQuery-1.9.1.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/spin.js-master/js/js/spin.js" $ ("#btn_submit"). on ("คลิก", ฟังก์ชั่น () {// var opts = {// lines: 9, // จำนวนกลีบ // ความยาว: 1, // ความยาวของกลีบดอก // ความกว้าง: 10, // petal width // radius: 15, // petal Radius จากศูนย์กลาง // มุม // ทิศทาง: 1, // ทิศทางการหมุนของกลีบดอก 1: ตามเข็มนาฬิกา, -1: ทวนเข็มนาฬิกา // สี: '#000', // สีกลีบ // ความเร็ว: 1, // ความเร็วในการหมุนกลีบ/// 60, // Shadow เมื่อกลีบหมุน (เปอร์เซ็นต์) // เงา: เท็จ classname: 'spinner', // spinner css style name // zindex: 2e9, // z-axis ของสปินเนอร์ (ค่าเริ่มต้นคือ 2000000000) // top: 'auto', // spinner ตำแหน่งด้านบน px ที่เกี่ยวข้องกับคอนเทนเนอร์พาเรนเนอร์ // ใหม่สปินเนอร์ ({}) สปิน (เป้าหมาย); var spinner = undefined; จาก Shadow Center: TRUE, Opacity: 1/8}; </script> </head> <body> <div style = "padding: 0px"> <div style = "ความสูง: 450px;"> <div> เงื่อนไขการสืบค้น </div> <div> <form id = "FormSearch"> <div> <div> <button = "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"/> src = "~/content/bootstrap/js/bootstrap.js"> </script>
ส่วนประกอบนี้ต้องการการสนับสนุนจากสององค์ประกอบ: jQuery และ bootstrap
จากนั้นกำหนด div ที่ว่างเปล่า
<div id = "div_ystep1"> </div>
ในที่สุดเริ่มต้นส่วนประกอบเมื่อคลิกปุ่ม
<script type = "text/javascript"> $ (function () {$ ("#btn_submit") คลิก (ฟังก์ชั่น () {$ ("#div_ystep1"). loadstep ({// ystep size size // ค่าสีน้ำเงิน [{// ชื่อชื่อเรื่อง: "Start", // เนื้อหาขั้นตอน (เมื่อเมาส์ย้ายไปที่โหนดของขั้นตอนนี้มันจะได้รับแจ้ง) เนื้อหา: "กระบวนการเริ่มต้น"}, {ชื่อเรื่อง: "การอนุมัติ", เนื้อหา: "ทุกบทบาทเริ่มการอนุมัติ"}, {ชื่อเรื่อง: "การใช้งาน" $ ("#div_ystep1"). setstep (3); </script>หากเป็นขั้นตอนแบบไดนามิกอาจจำเป็นต้องสร้างแอตทริบิวต์ขั้นตอนแบบไดนามิก จากนั้นใช้ setStep () เพื่อตั้งค่าขั้นตอนที่คุณไปถึง
วิธีการทั่วไป:
// ข้ามไปยังขั้นตอนต่อไป $ (". ystep1"). nextstep (); // ข้ามไปยังขั้นตอนก่อนหน้า $ (". ystep1"). prevstep (); // ข้ามไปยังขั้นตอนที่ระบุ $ (". ystep1"). setstep (2); // รับขั้นตอนปัจจุบัน $ ("ystep1")5. ปุ่มพร้อมท์ส่วนประกอบ bootstrap- ยืนยันการยืนยัน
ส่วนประกอบพรอมต์ของปุ่มนั้นคล้ายกับฟังก์ชั่นยืนยันใน JS แต่การยืนยันนี้เป็นเอฟเฟกต์คำแนะนำเกี่ยวกับเครื่องมือทำให้ผู้ใช้ตัดสินใจและยกเลิกการตัดสินและอินเทอร์เฟซเป็นมิตรมากขึ้น ก่อนที่จะแนะนำองค์ประกอบนี้คุณสามารถดูเอฟเฟกต์ของกล่องพรอมต์ใน bootstrap ก่อน:
ส่วนประกอบ Bootstrap-Confirmation ถูกนำมาใช้ตามผลกระทบของกล่องพรอมต์นี้ มีส่วนประกอบการยืนยัน bootstrap จำนวนมากบน GitHub แต่โดยทั่วไปแล้วจะเหมือนกัน -
1. ผลการแสดงผล
เอฟเฟกต์ดั้งเดิมที่สุด
ชื่อเรื่องที่กำหนดเองข้อความปุ่ม
2. คำอธิบายรหัสที่มา
ที่อยู่โอเพ่นซอร์ส
3. ตัวอย่างรหัส
(1) อ้างไฟล์:
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <script src = "~/content/jQuery-1.9.1.js"> </script>
สไตล์ต้องการการสนับสนุนของ bootstrap.css JavaScript ต้องการการสนับสนุน jQuery และ bootstrap.js
(2) แท็กคลิกที่สอดคล้องกัน (สามารถเป็นแท็กใดก็ได้)
<button type = "button" id = "btn_submit1"> <span aria-hidden = "true"> </span> ลบ </button>
(3) การเริ่มต้น JS
<script type = "text/javascript"> $ (function () {$ ('#btn_submit1'). การยืนยัน ({ภาพเคลื่อนไหว: จริง, ตำแหน่ง: "ด้านล่าง", ชื่อ: "คุณต้องการลบ?", btnoklabel: 'ok', btncancellabel: ' OnCancel: function () {// Alert ("คลิกยกเลิก");}})}); </script>(4) คุณลักษณะเพิ่มเติมเหตุการณ์วิธีการ
นอกเหนือจากคุณสมบัติเริ่มต้นที่กล่าวถึงข้างต้นแล้วยังมีคุณสมบัติที่ใช้กันทั่วไป ตัวอย่างเช่น:
btnokclass: กำหนดรูปแบบของปุ่ม; btncancelclass: ยกเลิกรูปแบบของปุ่ม; Singleton: อนุญาตให้มีการกำหนดเพียงกล่องเดียวเท่านั้นหรือไม่ 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>muxitup七、总结
以上是博主最近收藏的一些前端组件，在此分享给大家，有实用型，也有炫酷型，不管如何，希望能帮助需要的园友节省寻找组件的时间。还有一些组件没有整理出来，待整理好后放到后面分享。如果你觉得本文对你有帮助，不妨推荐下。再次感谢园友们的支持，不管是物资奖励还是精神支持，都是对博主分享精神的肯定，博主一定继续努力。
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. Thank you very much for your support to Wulin.com website!