Guide to FancySelect, jQuery flat style drop-down box beautification plug-in

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