ui-choose| list Choose jquery Beautify plugin

Ui-choose is a jquery-based list of options for beautifying plugins. Ui-choose can be used to improve the user experience by using a Select, Radio, CheckBox, and so on with less options.

How to use

Using the Ui-choose list to beautify the plugin requires the introduction of jquery, Ui-choose.js, and ui-choose.css files.

<link href= "Src/ui-choose.css" rel= "stylesheet"/> <script
src= "Js/jquery.min.js" ></script>
<script src= "Src/ui-choose.js" ></script>  

HTML Structure

Ui-choose can be used for the beautification of unordered or drop-down lists. The HTML structure of the unordered list and drop-down list is as follows:

<ul class= "Ui-choose" multiple= "multiple" id= "uc_03" >
    <li>html</li>
    <li>css</ li>
    <li>javascript</li>
    <li>php</li>
    <li>nodejs</li>
</ul>
<select class= "ui-choose" multiple= "multiple" id= "uc_04" >
    <option value= "a" >html </option>
    <option value= "B" >php</option>
    <option value= "C" >css</option>
    <option value= "D" >javascript</option>
    <option value= "E" >nodejs</option>
</select>

Initializing plug-ins

After the page DOM element has been loaded, the Ui-choose plugin can be initialized in the following way.

Instantiate all. Ui-choose

Instantiate all. Ui-choose

Unordered List Radio:

Unordered list Radio
var uc_01 = $ (' #uc_01 '). Data (' ui-choose ');//Retrieve instantiated object
Uc_01.click = function (index, item) {
    Console.log (' Click ', Index, Item.text ())
}
uc_01.change = function (index, item) {
    console.log (' Change '), Index, Item.text ())
}

Drop-down list radio:

Drop-down list Radio
var uc_02 = $ (' #uc_02 '). Data (' Ui-choose ');
Uc_02.click = function (value, item) {
    console.log (' click ', value);
};
Uc_02.change = function (value, item) {
    console.log (' Change ', value);

Unordered list Multiple selection:

Unordered list Multi-select
var uc_03 = $ (' #uc_03 '). Data (' Ui-choose ');
Uc_03.click = function (index, item) {
    console.log (' click ', index);
};
Uc_03.change = function (index, item) {
    console.log (' Change ', index);
};

Drop-down list multi-select:

Drop-down list multi-select
var uc_04 = $ (' #uc_04 '). Ui_choose ();
Uc_04.click = function (value, item) {
    console.log (' click ', value);
};
Uc_04.change = function (value, item) {
    console.log (' Change ', value);
};     

Ui-choose List Beautification Plugin's github address is: https://github.com/wangxing218/ui-choose