In the previous article, I introduced several useful components in the Bootstrap component series (recommended). Next, this article introduces several useful components in the Bootstrap component series (recommended 2). Interested friends will learn together!
7. Multi-value input component manifest
Regarding the multi-value input of text boxes, it has always been a common requirement. Today, the blogger recommends a useful multi-value input component for everyone. Don’t thank me, please call me "Red Scarf"!
1. Effect display
Local multi-value input box
Remote multi-value input box
2. Source code description
Thanks to the open source community and those cute people who like to share. Open source address.
3. Code examples
(1) Local multi-value input
First, you need to reference the following files
<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>
The Js and css files of bootstrap are not necessary. This article is for the sake of good style, so it is referenced. The manifest component does not rely on bootstrap, but depends on jQuery. In addition, it also needs to refer to three files: jquery.manifest.css, jquery.ui.widget.js, and jquery.marcopolo.js.
Then there is the initialization of html and js
<input type='text' autocomplete="off" id="txt_man" /> <script type="text/javascript">$(function () {$('#txt_man').manifest();});</script>Through simple steps as above, the above effect can be produced. Isn’t it very simple? Let's take a look at some of its usages
//Common properties: Get the collection of all items in the text box var values = $('#txt_man').manifest('values');//Common method 1: Remove the last item $('#txt_man').manifest('remove', ':last');//Common method 2: Add a new item in the item text box. The format of the second parameter is determined by the format of JSON data $('#txt_man').manifest('add', {id: "1",name:"ABC"});//Common method 3: Get the list of remotely searched data $('#txt_man').manifest('list');//Common event 1: New item event $('#txt_man').on('manifestadd', function (event, data, $item, initial) {//alert("The newly added item is: "+data);});//Common event 2: Remove item event $('#txt_man').on('manifestremove', function (event, data, $item) {});//Common event 3: Event $('#txt_man').on('manifestselect', function (event, data, $item) {});(2) Remote multi-value input
The way to remote search input requires us to provide a url address, obtain the data, and then return to the browser. For simplicity, this article directly uses the URL on the source code website to display the effect.
First, you need to reference the js file
<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>
Compared with the above, there is an additional reference to the file jquery.marcopolo.js.
Then there is the initialization of html and 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>As for the significance of each parameter, it should be easy to understand if you need it. The blogger briefly monitored the return value of this remote search method
If a park friend intends to use this remote method by himself, you can refer to this data format to implement it.
8. Text box search component bootstrap-typeahead
In fact, many components have this function regarding the function of text box search. For example, there is an autocomplete component in the jQuery UI that the blogger used to use to achieve automatic completion. The automatic search components of bootstrap text boxes are emerging online. The reason I chose this component today is because I think it is similar to bootstrap's style, and the components are smaller, simple and practical.
1. Effect display
Local static search (data source is local)
Remote search (data source is retrieved remotely through ajax request)
2. Source code description
Source code description
3. Code examples
The first file that needs to be referenced: mainly contains a css and a js file. Need support from jQuery and 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>
Then the component initialization
<input type='text' id="txt_man" />
Data source locally
<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>Data source is obtained through ajax request
<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>Test method corresponding to the background
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) ;}Common properties:
•display: The field name displayed
•val: The actual value
•items: The number of search results displayed by default. The default value is 8
•source: Local data source, formatted as an array.
•ajax: The object requested by ajax can be directly a string url or an object object. If it is an object object, I won't talk about url. The triggerLength property indicates that the input of several characters triggers the search.
Commonly used events:
•itemSelected: Triggered when the search value is selected.
<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>The parameter item represents the selected object, the parameter val represents the actual value of the selected item, and the text represents the displayed value of the selected item.
9. Bootstrap step component
Regarding the bootstrap step component, the previous article introduced a ystep widget. It can play a certain role in viewing the progress of the task, but for some complex businesses, it is a bit powerless to deal with the corresponding business in accordance with the current steps. Today, the blogger will introduce a step component that has a very good effect. With this component, programmers no longer have to worry about complex step design.
1. Effect display
Have a glimpse of the style
Follow the steps to "Previous Step" and "Next Step"
More steps
2. Source code description
This component was found by the blogger online. I saw that many styles and usages are from bootstrap. The only thing I need to refer to is a js and a css file. The source code source has not been found yet. If anyone knows the source code source, you can tell the blogger. In addition, in order to respect the author's labor results, the blogger must respect the originality!
3. Code examples
Files that need to be referenced
<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 and brush.js need to be referenced, and the components need the support of jQuery and bootstrap.
Then there is the initialization of the component.
(1) Arrow
<ul><li><a>step1</a></li><li><a>step2</a></li><li><a>step3</a></li></ul>
If it is a static step, you only need the above html code to see the effect of the arrow step in the above picture. The active style here represents the style that the step has passed.
(2) Square
<ul><li><a>step1</a></li><li><a>step2</a></li><li><a>step3</a></li></ul>
(3) Circular shape
<ul><li><a>step1</a></li><li><a>step2</a></li><li><a>step3</a></li></ul>
(4) Progress bar
<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></ul>
(5) Previous step, next step
The "Previous Step" and "Next Step" in the picture above are defined by yourself in the bootstrap modal component, or are the code posted for your reference.
<div id="myModalNext"><div><div><div><button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4>Option configuration</h4><ul><li><a>Step 1<span></span></a></li><li><a>Step 2<span></span></a></li><li><a>Step 3<span></span></a></li><li><a>Step 4<span></span></a></li></li></li></li></div><div><div data-ride="carousel" data-interval="false" data-wrap="false"><div role="listbox"><div><p>Step 1</p><div>Configure the role</div><div><input type="text" /></div><div><button type="button">Save</button></div><div><p>Step 2</p><div>Configure the user</div><div><input type="text" /></div><div><button type="button">Save</button></div><div><p>Step 3</p></div><div><p>Step 4</p></div><div><p>Step 5</p></div><div><p>Step 6</p></div></div></div><div><button type="button">Previous</button><button type="button">Next</button></div></div></div>
Of course, you also need to register a click event for two buttons
$("#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")}}})})The logic may be incomplete and tests are required if used formally.
10. Button load component ladda-bootstrap
Regarding button loading, the blogger has long wanted to find a suitable component to optimize. If it is not processed, there is definitely a possibility of repeated operations. Let’s take a look at such a small thing today.
1. Effect display
First meet
Custom color, size, progress bar
2. Source code description
Source code address
3. Code examples
Files that need to be referenced
<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>
Component initialization: Initialize 4 buttons
<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;});});Code doubt: It should not be difficult to understand. The code involved in initializing the component var l = Ladda.create(this); l.start(); here this represents the object of the button currently clicked (note that this is a dom object instead of a jQuery object), and then call l.stop(); after the request is completed, close the load.
(1) All the data-style options are as follows. If you are interested, you can try it and see what the effects are:
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) If you need to adjust the size of the button, the component has a built-in data-size property. All data-size options are as follows:
data-size="xs"
data-size="s"
data-size="l"
(3) If you need to set the color of the button, use data-spinner-color
data-spinner-color="#FF0000"
(4) Settings of the progress bar of the button
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);}});});The current execution progress is mainly set through the sentence instance.setProgress(progress);, and the progress value is between 0 and 1. Of course, the above is just code to test the progress effect. In the official project, we need to calculate the current request execution situation to dynamically return the progress.
11. Switch component bootstrap-switch
On the homepage of bootstrap Chinese website, you can find such a component
1. Effect display
Initial effect
Various attributes and events
2. Source code description
Bootstrap-Switch source code address: https://github.com/nostalgiaz/bootstrap-switch
Bootstrap-Switch documentation and Demo: http://www.bootstrap-switch.org/examples.html
3. Code examples
Files that need to be referenced
<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>
Components depend on JQuery and bootstrap
Then there is the initialization of html and js
<input type="checkbox" checked /> $(function () {$('input[type=checkbox]').bootstrapSwitch({ size: "large" });})The size attribute is not necessary. If you use the default style, the parameters can be not passed.
Commonly used properties
•size: Switch size. Optional values are 'mini', 'small', 'normal', 'large'
•onColor: The color of the on button in the switch. Optional values include 'primary', 'info', 'success', 'warning', 'danger', 'default'
•offColor: The color of the switch in the color of the OFF button. Optional values 'primary', 'info', 'success', 'warning', 'danger', 'default'
•onText: The text of the on button in the switch, the default is "ON".
•offText: The text of the switch is "OFF" by default.
•onInit: Events that initialize the component.
•onSwitchChange: Events when the switch changes.
Common events and methods can be used to view the documents directly, and the official provides a very detailed description.
12. Scoring component bootstrap-star-rating
Everyone should know the ratings on the ratings on the 10th and 10th Taobao. I accidentally found a bootstrap-style rating component. I found it interesting. It may be useful for e-commerce, community, and forum systems in the future, so I will share it.
1. Effect display
2. Source code description
Source code download
3. Code examples
This component requires support for jQuery and bootstrap styles
<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-rating-master/js/locales/zh.js"></script>
Directly through the html initial component
<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"><input id="input-21c" value="0" type="number" min=0 max=8 step=0.5 data-size="xl" data-stars="8"><input id="input-21d" value="2" type="number" min=0 max=5 step=0.5 data-size="sm"><input id="input-21e" value="0" type="number" min=0 max=5 step=0.5 data-size="xs"><input id="input-21f" value="0" type="number" min=0 max=5 step=0.5 data-size="md"><input id="input-2ba" type="number" min="0" max="5" step="0.5" data-stars=5data-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>The component is initialized through class="rating". Here are some parameters that should be easy to understand:
•value: represents the default score when component initialization
•min: minimum score
•max: Maximum score
•step: The minimum scale added each time
•data-size: the size of the stars
•data-stars: the number of stars
You can get the current score by using $("#input-21a").val().
The above are some useful components of the Bootstrap component series that the editor introduced to you (Recommendation 2). I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!