Guide to FancySelect, jQuery flat style drop-down box beautification plug-in
This article mainly introduces the FancySelect user guide for jQuery's flat style drop-down box beautification plug-in. For more information, see
FancySelect is a small and practical jQuery drop-down box beautification plug-in. The drop-down box beautification plug-in adopts a flat design style and is one of the preferred drop-down box beautification plug-ins for fashion developers.
Usage
HTML Structure
FancySelect is very simple to use. It can be used with jQuery or Zepto. Place some <select> drop-down box components on the page, and then you can use the. fancySelect () method to call the drop-down box plug-in. If there is no value for an option in the drop-down box, the plug-in will replace it with some placeholder text.
By default, FancySelect only uses native drop-down boxes and styles on iOS devices. If you want to overwrite it, set forceiOS to true during plug-in Initialization in the drop-down box.
FancySelect can also use the data-class attribute of the <select> element to specify the style. You can use this method to specify the select drop-down box for different styles.
The Code is as follows:
<Select class = "basic">
<Option value = ""> Select something... </Option>
<Option> Lorem </option>
<Option> Ipsum </option>
<Option> Dolor </option>
<Option> Sit </option>
<Option> Amet </option>
</Select>
JAVASCRIPT
The Code is as follows:
$ ('. Basic'). fancySelect ();
Update options
If the options in the drop-down box is modified after the plug-in is initialized, You can trigger the update. fs method in the drop-down box to notify the plug-in to update the options list.
The Code is as follows:
Var mySelect = $ ('. my-select ');
MySelect. fancySelect ();
MySelect. append ('');
MySelect. trigger ('Update. fs ');
Enable/disable drop-down box
The FancySelect drop-down box plug-in automatically sets the drop-down box to disabled after initialization. If you need to reset the status of the drop-down box, you can use the enable. fs or disable. fs method on the select element to modify them.
The Code is as follows:
<Select class = "my-select" disabled>
<Option> First Option </option>
<Option> Second Option </option>
</Select>
Var mySelect = $ ('. my-select ');
MySelect. fancySelect (); // currently disabled because of html property
// Later...
MySelect. trigger ('Enable. fs'); // now enabled
// Even later...
MySelect. trigger ('Disable. fs'); // now disabled again
If you need to make some personalized effects, you can use the triggerTemplate and triggerTemplate methods. They all return an HTML string through the option:
The Code is as follows:
<Select class = "bulbs">
<Option data-icon = "old"> Incandescent </option>
<Option data-icon = "curly"> CFL </option>
<Option data-icon = "work"> Halogen </option>
</Select>
$ ('. Bulbs'). fancySelect ({
OptionTemplate: function (optionEl ){
Return optionEl. text () +'
';}})
You can listen to the change. fs event when the <select> drop-down box option is changed:
The Code is as follows:
<Select class = "my-select" disabled>
<Option> First Option </option>
<Option> Second Option </option>
</Select>
Var mySelect = $ ('. my-select ');
MySelect. fancySelect (). on ('change. fs', function (){
$ (This). trigger ('change. $ ');
}); // Trigger the DOM's change event when changing FancySelect