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

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.