คำนำ: ฉันได้แชร์ส่วนประกอบทั่วไปของ 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 = อุปกรณ์-ความกว้าง"/> <title> mixitup </title> <link href = "~/content/image/css/normalize.css" rel = "stylesheet"/> <link href = " src = "~/content/jQuery-1.9.1.js"> </script> <script src = "~/content/mixitup-master/jQuery.easing.min.js"> </script> <script src = "~/mixitup-master/build/jQuery.mixitup.min.js 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 parallelax 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">All categories</span></li> <li><span data-filter="app">Mobile application</span></li> <li><span data-filter="card">Card</span></li> <li><span data-filter="card">Card</span></li> <li><span data-filter="icon">icon</span></li> <li><span data-filter="logo">Logo</span></li> <li><span data-filter="web">Web page</span></li> </ul> <div id="portfoliolilist"> <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> <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> <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> <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> <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> <a>Graph Plotting</a> <span>APP</span> </div> <div></div> </div> </div> </div> <div> <div> <img src="~/Content/image/card/2.jpg" /> <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> <a>Village Community Church</a> <span>Logo</span> </div> <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> <img src="~/Content/image/web/3.jpg" /> <div> <a>Backend Admin</a> <span>Web design</span> </div> <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> <img src="~/Content/image/web/2.jpg" /> <div> <a>Student Guide</a> <span>Web design</span> </div> <div></div> </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> <img src="~/Content/image/icon/5.jpg" /> <div> <a>3D Map</a> <span>Icon</span> </div> <div></div> </div> </div> <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> <a>Native Designers</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div> <div> <img src="~/Content/image/logo/4.jpg" /> <div> <a>Bookworm</a> <span>Logo</span> </div> <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> <div> <img src="~/Content/image/icon/3.jpg" /> <div> <a>Reality</a> <span>Business card</span> </div> <div></div> </div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/2.jpg" /> <div> <div> <a>Specialisterne</a> <span>Logo</span> </div> <div></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div><!-- container --></body></html>muxitup以上是博主最近收藏的一些前端组件，在此分享给大家，有实用型，也有炫酷型，不管如何，希望能帮助需要的朋友节省寻找组件的时间。
上面分享了几个项目中比较常用的组件，引起了许多朋友的关注。下面还是继续，因为觉得还有几个非常简单、实用的组件，实在不愿自己一人独享，没办法，谁让博主这么爱分享呢~~
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="~/Content/jquery-1.9.1.js"></script> <script 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/jquery.manifest.js"></script>
ไม่จำเป็นต้องใช้ไฟล์ js และ css ของ bootstrap บทความนี้มีสไตล์ที่ดีดังนั้นจึงมีการอ้างอิง ส่วนประกอบของรายการไม่ได้พึ่งพา bootstrap แต่ขึ้นอยู่กับ jQuery นอกจากนี้ยังต้องอ้างถึงสามไฟล์: jQuery.Manifest.css, jQuery.ui.widget.js และ jQuery.marcopolo.js
จากนั้นจะมีการเริ่มต้นของ HTML และ JS
<input type='text' autocomplete="off" id="txt_man" /> <script type="text/javascript"> $(function () { $('#txt_man').manifest(); });</script>ผ่านขั้นตอนง่าย ๆ ดังกล่าวข้างต้นเอฟเฟกต์ข้างต้นสามารถผลิตได้ มันไม่ง่ายมากเหรอ? มาดูประเพณีของมันกันเถอะ
//常用属性：得到文本框里面所有项的集合var values = $('#txt_man').manifest('values'); //常用方法1：移除最后一项$('#txt_man').manifest('remove', ':last'); //常用方法2：项文本框里面新增一项。第二个参数的格式由JSON数据的格式决定$('#txt_man').manifest('add', { id: "1", name:"ABC" }); //常用方法3：获取远程搜索到的数据的列表$('#txt_man').manifest('list'); //常用事件1：组件的新增项事件$('#txt_man').on('manifestadd', function (event, data, $item, initial) { //alert("新增的项为："+data); }); //常用事件2：组件的移除项事件$('#txt_man').on('manifestremove', function (event, data, $item) { }); //常用事件3：远程调用时通过键盘选择项变化的事件$('#txt_man').on('manifestselect', function (event, data, $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="~/Content/jquery-1.9.1.js"></script> <script 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> <script src = "~/content/jQuery-manifest-master/build/jQuery.Manifest.js"> </script>
เมื่อเปรียบเทียบกับข้างต้นมีการอ้างอิงเพิ่มเติมถึงไฟล์ jQuery.marcopolo.js
จากนั้นจะมีการเริ่มต้นของ HTML และ JS
<form action = "https://api.foursquare.com/v2/venues/search?callback=?" method="get"> <div><div> <input type='text' id="txt_man2" /> <img src="~/Content/jquery-manifest-master/busy.gif" /> </div> </div> </form>
<script type="text/javascript"> $(function () { $('#txt_man2').manifest({ formatDisplay: function (data, $item, $mpItem) { return data.name; }, formatValue: function (data, $value, $item, $mpItem) { return data.id; }, marcoPolo: { data: { client_id: 'NO2MTQVBQANW3Q3SG23OFVMEGYOWIZDT4E1QHRPZO0BFCN4X', client_secret: 'LG2WRKKS1SXZ2FMKDG01LDW1KDTEKKTULMXM0XEVWRN0LLHB', intent: 'global', limit: 5, v: '20150601' }, formatData: function (data) { return data.response.venues; }, formatItem: function (data, $item) { return data.name; }, minChars: 3, param: 'query' }, required: true }); }); </script>สำหรับความสำคัญของแต่ละพารามิเตอร์ควรเข้าใจได้ง่ายหากคุณต้องการ บล็อกเกอร์ตรวจสอบค่าส่งคืนของวิธีการค้นหาระยะไกลนี้สั้น ๆ
如果有打算自己用这个远程的方法，可以参考这个数据格式去实现。
8. ส่วนประกอบการค้นหากล่องข้อความ Bootstrap-typeahead
ในความเป็นจริงส่วนประกอบจำนวนมากมีฟังก์ชั่นนี้เกี่ยวกับฟังก์ชั่นของการค้นหากล่องข้อความ ตัวอย่างเช่นมีองค์ประกอบการเติมข้อความอัตโนมัติใน jQuery UI ที่บล็อกเกอร์ใช้เพื่อให้สำเร็จโดยอัตโนมัติ ส่วนประกอบการค้นหาอัตโนมัติของกล่องข้อความ bootstrap กำลังเกิดขึ้นออนไลน์ เหตุผลที่ฉันเลือกองค์ประกอบนี้ในวันนี้เป็นเพราะฉันคิดว่ามันคล้ายกับสไตล์ของ Bootstrap และส่วนประกอบนั้นเล็กกว่าง่ายและใช้งานได้จริง
1. ผลการแสดงผล
การค้นหาแบบคงที่ในท้องถิ่น (แหล่งข้อมูลคือท้องถิ่น)
การค้นหาระยะไกล (แหล่งข้อมูลถูกดึงไปจากระยะไกลผ่านคำขอ AJAX)
2. คำอธิบายรหัสที่มา
ที่อยู่ซอร์สโค้ด
3. ตัวอย่างรหัส
ไฟล์แรกที่ต้องอ้างอิง: ส่วนใหญ่มี CSS และไฟล์ JS ต้องการการสนับสนุนจาก jQuery และ bootstrap
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/twitter-bootstrap-typeahead-master/twitter-bootstrap-typeahead-master/demo/css/prettify.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap/js/bootstrap.js"></script> <script src="~/Content/twitter-bootstrap-typeahead-master/twitter-bootstrap-typeahead-master/js/bootstrap-typeahead.js"></script>
จากนั้นการเริ่มต้นส่วนประกอบ
<input type = 'text' id = "txt_man" />
แหล่งข้อมูลในพื้นที่
<script type="text/javascript"> $(function () { $("#txt_man").typeahead({ source: [ { key: 1, value: 'Toronto' }, { key: 2, value: 'Montreal' }, { key: 3, value: 'New York' }, { key: 4, value: 'Buffalo' }, { key: 5, value: 'Boston' }, { key: 6, value: 'Columbus' }, { key: 7, value: 'Dallas' }, { key: 8, value: 'Vancouver' }, { key: 9, value: 'Seattle' }, { key: 10, value: 'Los Angeles' } ], display: "value", val:"key" }); }); </script>แหล่งข้อมูลได้รับผ่านคำขอ AJAX
<script type="text/javascript"> $(function () { $("#txt_man").typeahead({ ajax: { url: '/Home2/TypeaheadData', timeout: 300, method: 'post', triggerLength: 1, loadingClass: null, displayField: null, preDispatch: null, preProcess: null }, display: "value", val:"key" }); }); </script>วิธีทดสอบที่สอดคล้องกับพื้นหลัง
public JsonResult TypeaheadData() { var lstRes = new List<object>(); for (var i = 0; i < 20; i++) lstRes.Add(new { key = i, value = Guid.NewGuid().ToString().Substring(0, 4) }); return Json(lstRes, JsonRequestBehavior.AllowGet) ; -คุณสมบัติทั่วไป:
•แสดง: ชื่อฟิลด์ที่แสดง
• VAL: มูลค่าจริง
•รายการ: จำนวนผลการค้นหาที่แสดงตามค่าเริ่มต้น ค่าเริ่มต้นคือ 8
•แหล่งที่มา: แหล่งข้อมูลท้องถิ่นจัดรูปแบบเป็นอาร์เรย์
• AJAX: วัตถุที่ร้องขอโดย AJAX สามารถเป็น URL สตริงโดยตรงหรือวัตถุวัตถุ หากเป็นวัตถุวัตถุฉันจะไม่พูดถึง URL คุณสมบัติ TriggerLength ระบุว่าอินพุตของอักขระหลายตัวกระตุ้นการค้นหา
เหตุการณ์ที่ใช้กันทั่วไป:
•รายการที่เลือก: ทริกเกอร์เมื่อเลือกค่าการค้นหา
<script type="text/javascript"> $(function () { $("#txt_man").typeahead({ ajax: { url: '/Home2/TypeaheadData', timeout: 300, method: 'post', triggerLength: 1, loadingClass: null, displayField: null, preDispatch: null, preProcess: null }, display: "value", val: "key", itemSelected: function (item, val, text) { } }); }); </script>รายการพารามิเตอร์แสดงถึงวัตถุที่เลือกพารามิเตอร์ Val แสดงถึงค่าที่แท้จริงของรายการที่เลือกและข้อความแสดงถึงค่าที่แสดงของรายการที่เลือก
9. องค์ประกอบขั้นตอน bootstrap
เกี่ยวกับองค์ประกอบขั้นตอน bootstrap บทความก่อนหน้านี้แนะนำวิดเจ็ต YSTEP มันสามารถมีบทบาทบางอย่างในการดูความคืบหน้าของงาน แต่สำหรับธุรกิจที่ซับซ้อนบางแห่งมันไม่มีอำนาจเล็กน้อยที่จะจัดการกับธุรกิจที่เกี่ยวข้องตามขั้นตอนปัจจุบัน วันนี้บล็อกเกอร์จะแนะนำองค์ประกอบขั้นตอนที่มีผลดีมาก ด้วยองค์ประกอบนี้โปรแกรมเมอร์ไม่ต้องกังวลเกี่ยวกับการออกแบบขั้นตอนที่ซับซ้อนอีกต่อไป
1. ผลการแสดงผล
มองเห็นสไตล์
ทำตามขั้นตอนถึง "ขั้นตอนก่อนหน้า" และ "ขั้นตอนต่อไป"
ขั้นตอนเพิ่มเติม
2. คำอธิบายรหัสที่มา
ส่วนประกอบนี้ถูกค้นพบโดยบล็อกเกอร์ออนไลน์ ฉันเห็นว่ารูปแบบและประเพณีมากมายมาจาก bootstrap สิ่งเดียวที่ฉันต้องอ้างถึงคือไฟล์ JS และ CSS ยังไม่พบแหล่งที่มาของซอร์สโค้ด หากใครรู้แหล่งที่มาของซอร์สโค้ดคุณสามารถบอกบล็อกเกอร์ นอกจากนี้เพื่อที่จะเคารพผลการทำงานของผู้เขียนบล็อกเกอร์จะต้องเคารพความคิดริเริ่ม!
3. ตัวอย่างรหัส
ไฟล์ที่ต้องอ้างอิง
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/bootstrap-step/css/bs-is-fun.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap/js/bootstrap.js"></script> <script src="~/Content/bootstrap-step/js/brush.js"></script>
ต้องมีการอ้างอิง bs-is-fun.css และ brush.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> </li> <li> <a>step5<span></span></a> </li> <li> <a>step6<span></span></a> </li></ul>
(5) ขั้นตอนก่อนหน้าขั้นตอนต่อไป
"ขั้นตอนก่อนหน้า" และ "ขั้นตอนต่อไป" ในภาพด้านบนถูกกำหนดโดยตัวคุณเองในส่วนประกอบ bootstrap modal หรือเป็นรหัสที่โพสต์สำหรับการอ้างอิงของคุณ
<div id="myModalNext"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4>选项配置</h4><ul> <li> <a>步骤一<span></span></a> </li> <li> <a>步骤二<span></span></a> </li> <li> <a>步骤三<span></span></a> </li> <li> <a>步骤四<span></span></a> </li> <li> <a>步骤五<span></span></a> </li> <li> <a>步骤六<span></span></a> </li> </ul> </div> <div> <div> <div data-ride="carousel" data-interval="false" data-wrap="false"> <div role="listbox"> <div> <p>步骤一</p> <div> 配置角色</div> <div> <input type="text" /> </div> <div> <button type="button">保存</button> </div> </div> <div> <p>步骤二</p> <div> 配置用户</div> <div> <input type="text" /> </div> <div> <button type="button">保存</button> </div> </div> <div> <p>步骤三</p> </div> <div> <p>步骤四</p> </div> <div> <p>步骤五</p> </div> <div> <p>步骤六</p> </div> </div> </div> </div> </div> <div> <button type="button">上一步</button> <button type="button">下一步</button> </div> </div> </div> </div>
แน่นอนคุณต้องลงทะเบียนกิจกรรมคลิกสองปุ่ม
$("#myModalNext .modal-footer button").each(function () { $(this).click(function () { if ($(this).hasClass("MN-next")) { $("#myModalNext .carousel").carousel('next'); $("#myModalNext .step li.active").next().addClass("active"); } else { $("#myModalNext .carousel").carousel('prev'); if ($("#myModalNext .step li").length > 1) { $($($("#myModalNext .step li.active"))[$("#myModalNext .step li.active").length - 1]).removeClass("active") } } }) })ตรรกะอาจไม่สมบูรณ์และจำเป็นต้องมีการทดสอบหากใช้อย่างเป็นทางการ
10. ปุ่มโหลดส่วนประกอบ ladda-bootstrap
เกี่ยวกับการโหลดปุ่มบล็อกเกอร์ต้องการหาส่วนประกอบที่เหมาะสมในการปรับให้เหมาะสม หากไม่ได้ดำเนินการจะมีความเป็นไปได้ที่จะดำเนินการซ้ำ ๆ มาดูเรื่องเล็ก ๆ น้อย ๆ ในวันนี้
1. ผลการแสดงผล
พบกันครั้งแรก
สีที่กำหนดเองขนาดบาร์ความคืบหน้า
2. คำอธิบายรหัสที่มา
ที่อยู่ซอร์สโค้ด
3. ตัวอย่างรหัส
ไฟล์ที่ต้องอ้างอิง
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/ladda-bootstrap-master/ladda-bootstrap-master/dist/ladda-themeless.min.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap/js/bootstrap.js"></script> <script src="~/Content/ladda-bootstrap-master/ladda-bootstrap-master/dist/spin.min.js"></script> <script src = "~/content/ladda-bootstrap-master/ladda-bootstrap-master/dist/ladda.min.js"> </script>
การเริ่มต้นส่วนประกอบ: เริ่มต้นปุ่ม 4 ปุ่ม
<button data-style="expand-left"><span>expand-left</span></button><button data-style="expand-right"><span>expand-right</span></button><button data-style="zoom-in"><span>zoom-in</span></button><button data-style="zoom-out"><span>zoom-out</span></button> $(function () { $('button').click(function (e) { e.preventDefault(); var l = Ladda.create(this); l.start(); l.setProgress(0 - 1); $.post("/Home2/TypeaheadData",{ }, function (data,statu) { console.log(statu); }, "json"); .always(function () { l.stop(); }); return false; }); });รหัสสงสัย: ไม่ควรเข้าใจยาก รหัสที่เกี่ยวข้องในการเริ่มต้นส่วนประกอบ var l = ladda.create (นี่); L.Start (); นี่แสดงถึงวัตถุของปุ่มที่คลิกในปัจจุบัน (โปรดทราบว่านี่เป็นวัตถุ DOM แทนวัตถุ jQuery) จากนั้นเรียก l.stop (); หลังจากคำขอเสร็จสมบูรณ์ให้ปิดการโหลด
(1) ตัวเลือกรูปแบบข้อมูลทั้งหมดมีดังนี้ หากคุณสนใจคุณสามารถลองและดูว่าเอฟเฟกต์คืออะไร:
data-style="expand-left"data-style="expand-right"data-style="expand-up"data-style="expand-down"data-style="zoom-in"data-style="zoom-out"data-style="slide-left"data-style="slide-right"data-style="slide-up"data-style="slide-down"data-style="contract"
(2) หากคุณต้องการปรับขนาดของปุ่มส่วนประกอบจะมีคุณสมบัติขนาดข้อมูลในตัว ตัวเลือกขนาดข้อมูลทั้งหมดมีดังนี้:
data-size = "xs"
data-size = "s"
data-size = "L"
(3) หากคุณต้องการตั้งค่าสีของปุ่มให้ใช้สีสปินเนอร์ข้อมูล
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 (progress === 1) { instance.stop(); clearInterval(interval); } }, 200); } }); -ความคืบหน้าการดำเนินการในปัจจุบันส่วนใหญ่จะถูกกำหนดผ่านอินสแตนซ์ประโยค SetProgress (ความคืบหน้า);, และค่าความคืบหน้าอยู่ระหว่าง 0 ถึง 1 แน่นอนว่าข้างต้นเป็นเพียงรหัสเพื่อทดสอบผลกระทบความคืบหน้า ในโครงการอย่างเป็นทางการเราจำเป็นต้องคำนวณสถานการณ์การดำเนินการตามคำขอปัจจุบันเพื่อส่งคืนความคืบหน้าแบบไดนามิก
11. สลับส่วนประกอบ bootstrap-switch
ในโฮมเพจของเว็บไซต์ Bootstrap Chinese คุณสามารถค้นหาองค์ประกอบดังกล่าวได้
1. ผลการแสดงผล
ผลเบื้องต้น
คุณลักษณะและเหตุการณ์ต่างๆ
2. คำอธิบายรหัสที่มา
Bootstrap-switch ที่อยู่ซอร์สโค้ด: https://github.com/nostalgiaz/bootstrap-switch
เอกสารและการสาธิต bootstrap-switch: http://www.bootstrap-switch.org/examples.html
3. ตัวอย่างรหัส
ไฟล์ที่ต้องอ้างอิง
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/bootstrap-switch-master/bootstrap-switch-master/dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap/js/bootstrap.js"></script> <script src="~/Content/bootstrap-switch-master/bootstrap-switch-master/dist/js/bootstrap-switch.js"></script>
ส่วนประกอบขึ้นอยู่กับ jQuery และ bootstrap
จากนั้นจะมีการเริ่มต้นของ HTML และ JS
<input type="checkbox" checked /> $(function () { $('input[type=checkbox]').bootstrapSwitch({ size: "large" });})ไม่จำเป็นต้องใช้แอตทริบิวต์ขนาด หากคุณใช้สไตล์เริ่มต้นพารามิเตอร์ไม่สามารถผ่านได้
คุณสมบัติที่ใช้กันทั่วไป
•ขนาด: ขนาดสวิตช์ ค่าเสริมคือ 'mini', 'เล็ก', 'ปกติ', 'ใหญ่'
• Oncolor: สีของปุ่ม ON ในสวิตช์ ค่าเสริมรวมถึง 'หลัก', 'ข้อมูล', 'ความสำเร็จ', 'คำเตือน', 'อันตราย', 'เริ่มต้น'
• Offcolor: สีของสวิตช์ในสีของปุ่มปิด ค่าเสริม 'หลัก', 'ข้อมูล', 'ความสำเร็จ', 'คำเตือน', 'อันตราย', 'เริ่มต้น'
• ontext: ข้อความของปุ่ม ON ในสวิตช์ค่าเริ่มต้นคือ "เปิด"
• Offtext: ข้อความของสวิตช์คือ "ปิด" โดยค่าเริ่มต้น
• ONINIT: เหตุการณ์ที่เริ่มต้นองค์ประกอบ
• OnswitchChange: เหตุการณ์เมื่อสวิตช์เปลี่ยนแปลง
เหตุการณ์และวิธีการทั่วไปสามารถใช้ในการดูเอกสารโดยตรงและอย่างเป็นทางการให้คำอธิบายโดยละเอียดมาก
12. การให้คะแนนการให้คะแนน Bootstrap-star
ทุกคนควรรู้การให้คะแนนในการจัดอันดับในวันที่ 10 และ 10 Taobao ฉันบังเอิญพบองค์ประกอบการให้คะแนนแบบ bootstrap ฉันพบว่ามันน่าสนใจ มันอาจจะเป็นประโยชน์สำหรับระบบอีคอมเมิร์ซชุมชนและฟอรัมในอนาคตดังนั้นฉันจะแบ่งปัน
1. ผลการแสดงผล
2. คำอธิบายรหัสที่มา
ดาวน์โหลดซอร์สโค้ด
3. ตัวอย่างรหัส
ส่วนประกอบนี้ต้องการการสนับสนุนสไตล์ jQuery และ bootstrap
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/bootstrap-star-rating-master/bootstrap-star-rating-master/css/star-rating.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap-star-rating-master/bootstrap-star-rating-master/js/star-rating.js"></script> <script src = "~/content/bootstrap-star-rating-master/bootstrap-star-star-rating-master/js/loclees/zh.js"> </script>
โดยตรงผ่านส่วนประกอบเริ่มต้น HTML
<input id="input-2b" type="number" min="0" max="5" step="0.5" data-size="xl" data-symbol="" data-default-caption="{rating} hearts" data-star-captions="{}"><input id="input-21a" value="0" type="number" min=0 max=5 step=0.5 data-size = "xl"> <input id = "input-21b" value = "4" type = "number" min = 0 max = 5 step = 0.2 data-size = "lg"> <อินพุต id = "อินพุต -21c" value = "0" type = "number" min = 0 max = 8 step = 0.5 data-size = min = 0 max = 5 step = 0.5 data-size = "sm"> <อินพุต id = "อินพุต -21e" value = "0" type = "number" min = 0 max = 5 step = 0.5 data-size = "xs"> <อินพุต id = "อินพุต -21f" min="0" max="5" step="0.5" data-stars=5 data-symbol="" data-default-caption="{rating} hearts" data-star-captions="{}"><input id="input-22" value="0" type="number" min=0 max=5 step=0.5 data-rtl=1 data-container-class='text-right' data-glyphicon = 0>ส่วนประกอบจะเริ่มต้นผ่าน class = "การให้คะแนน" นี่คือพารามิเตอร์บางอย่างที่ควรเข้าใจง่าย:
•ค่า: แสดงคะแนนเริ่มต้นเมื่อเริ่มต้นการเริ่มต้น
•ขั้นต่ำ: คะแนนขั้นต่ำ
•สูงสุด: คะแนนสูงสุด
•ขั้นตอน: สเกลขั้นต่ำที่เพิ่มเข้ามาในแต่ละครั้ง
•ขนาดข้อมูล: ขนาดของดวงดาว
•ดาว Data: จำนวนดาว
คุณสามารถรับคะแนนปัจจุบันได้โดยใช้ $ ("#input-21a"). val ()
十三、总结
通过这篇文章给大家分享了下bootstrap的十二款组件，博主相信这些里面肯定有些你能够用上，可能有些并不常用，但留着以后或许能用上呢！至此，bootstrap组件的总结暂时告一段落，后面将会分享下ko的一些封装。如果你觉得本文能够帮到你，可以推荐下，博主一定继续努力！