JQuery flattened style drop-down box beautification plug-in FancySelect User Guide _ jquery

This article mainly introduces the FancySelect use guide for jQuery's flat style drop-down box beautification plug-in. For more information, see FancySelect, 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 someDrop-down box components, 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 passThe data-class attribute of the 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 something... Lorem Ipsum Dolor Sit Amet

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:

First Option Second Option
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:

Incandescent CFL Halogen
$ ('. Bulbs'). fancySelect ({
OptionTemplate: function (optionEl ){
Return optionEl. text () +'
';}})

You canListen to the change. fs event when the drop-down box option is changed: The Code is as follows:
First Option
Second Option

Var mySelect = $ ('. my-select ');
MySelect. fancySelect (). on ('change. fs', function (){
$ (This). trigger ('change. $ ');
}); // Trigger the DOM's change event when changing FancySelect