Home > Developer > JavaScript
1: The Selectable Component enables some elements on the user page to be Selectable.You can select the elements by clicking or dragging them.
Press Ctrl to select discontinuous elements.
$ ('. Selector'). selectable (options );
However, the themes package in the jQuery UI library does not provide the ui-selecting and ui-selected styles. Therefore, you need to create these styles by yourself when using the selection component.
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> selectable component </title>
<Script language = "javascript" src = "js/jquery-1.4.2.min.js"> </script>
<Script type = "text/javascript" src = "js/jquery. ui. core. js"> </script>
<Script type = "text/javascript" src = "js/jquery. ui. widget. js"> </script>
<Script type = "text/javascript" src = "js/jquery. ui. mouse. js"> </script>
<Script type = "text/javascript" src = "js/jquery. ui. selectable. js"> </script>
<Style type = "text/css">
H1 {
Color: #006;
Font-size: 24px;
Font-weight: bold;
Margin-bottom: 0px;
}
# Feedback {
Font-size: 1.4em;
}
# Selectable. ui-selecting {
Background: # FECA40;
}
# Selectable. ui-selected {
Background: #00BF00;
Color: white;
}
# Selectable {
List-style-type: none;
Margin: 0;
Padding: 0;
Width: 85%;
}
# Selectable li {
Margin: 3px;
Padding: 0.4em;
Font-size: 16px;
Height: 18px;
}
</Style>
<Link href = "CSS/base/jquery.ui.all.css" rel = "stylesheet" type = "text/css"/>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Selectable"). selectable ();
});
</Script>
</Head>
<Body>
<Div class = "demo">
<H1> newbie <Ol id = "selectable">
<Li class = "ui-widget-content"> activate online banking and Baobao will escort you all the way </li>
<Li class = "ui-widget-content"> identify the identifier and select the seller with the selected Strength </li>
<Li class = "ui-widget-content"> favorites + shopping cart, making it easier to shop and search </li>
<Li class = "ui-widget-content"> goods are inspected before payment, making transactions safer </li>
<Li class = "ui-widget-content"> credit is honest and reliable, and the quality is guaranteed </li>
<Li class = "ui-widget-content"> featured honest merchants, trusted by sellers </li>
<Li class = "ui-widget-content"> strong customer service support, more reliable shopping </li>
</Ol>
</Div>
<! -- End demo -->
</Body>
</Html>
2: Filter selected items
You can filter child elements. You can specify which child elements are optional. Therefore, you can set the filter attribute to a jQuery selector when calling the selectable () method, at this time, only
Element can be selected
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> selectable component </title>
<Script language = "javascript" src = "js/jquery-1.4.2.min.js"> </script>
<Script type = "text/javascript" src = "js/jquery. ui. core. js"> </script>
<Script type = "text/javascript" src = "js/jquery. ui. widget. js"> </script>
<Script type = "text/javascript" src = "js/jquery. ui. mouse. js"> </script>
<Script type = "text/javascript" src = "js/jquery. ui. selectable. js"> </script>
<Style type = "text/css">
*{
}
Body {
Text-align: center;
Margin: 0 auto;
Padding: 0;
}
# Wrap {
Margin: 10px auto 10px auto;
Padding: 5px;
Width: 520px;
Height: 220px;
Background: # fff;
Border: 5px solid #000;
}
H1 {
Color: #006;
Font-size: 24px;
Font-weight: bold;
Margin-bottom: 0px;
Text-align: center;
}
# Feedback {
Font-size: 1.4em;
}
# Selectable. ui-selecting {
Background: # FECA40;
}
# Selectable. ui-selected {
Background: # F39814;
Color: white;
}
# Selectable {
List-style-type: none;
Margin: 0;
Padding: 0;
}
# Selectable li {
Margin: 5px;
Padding: 2px;
Font-size: 16px;
Height: 20px;
Cursor: pointer;
Border: 1px solid # aaaaaa;
Background: # ffffff;
Color: #222222;
Width: 114px;
Float: left;
}
# Result {
Clear: both;
}
</Style>
<Link href = "CSS/base/jquery.ui.all.css" rel = "stylesheet" type = "text/css"/>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Wrap"). selectable ({
Filter: "li", // defines the li element as optional
Stop: function (e, ui) {// process selected events
Var selection = [];
$ ("Li. ui-selected", this). each (function (){
Selection. push ($ (this). text ());
});
// Display the result
$ ("# Result"). text ("You selected" + selection. length + "item:" + selection. join (","));
}
});
});
</Script>
</Head>
<Body>
<Div id = "wrap">
<H1> city list <Ul id = "selectable">
<Li> Chongqing </li>
<Li> Beijing </li>
<Li> Shanghai </li>
<Li> Guangzhou </li>
<Li> Shenzhen </li>
<Li> Chengdu </li>
<Li> Tianjin </li>
<Li> Nanjing </li>
<Li> Hangzhou </li>
<Li> Wuhan </li>
<Li> Xi'an </li>
<Li> Changsha </li>
<Li> Xiamen </li>
<Li> Zhengzhou </li>
<Li> Taiyuan </li>
<Li> Qingdao </li>
</Ul>
<Div id = "result"> </div>
</Div>
</Body>
</Html>
:
3: select the Event Callback Function
Six events are selected.
Selected. The event type is selectableseleted. It is triggered when an element is added to the option and the selection operation ends.
Selecting: The event type is selectableselecting. It is triggered when an element is selected during the selection process.
Start: The event type is selectablestart. It is triggered when the Select Operation starts.
Stop: The event type is selectablestop. It is triggered when the select operation is completed.
Unselected: The event type is selectableunselected. It is triggered when each element is removed from the selected item and the selection operation ends.
Unselecting: The event type is selectableunselecting. It is triggered when each element is removed from the selected item during the selection process.
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> selectable component </title>
<Script language = "javascript" src = "js/jquery-1.4.2.min.js"> </script>
<Script type = "text/javascript" src = "js/jquery. ui. core. js"> </script>
<Script type = "text/javascript" src = "js/jquery. ui. widget. js"> </script>
<Script type = "text/javascript" src = "js/jquery. ui. mouse. js"> </script>
<Script type = "text/javascript" src = "js/jquery. ui. selectable. js"> </script>
<Style type = "text/css">
*{
}
Body {
Text-align: center;
Margin: 0 auto;
Padding: 0;
}
# Wrap {
Margin: 10px auto 10px auto;
Padding: 5px;
Width: 520px;
Height: 220px;
Background: # fff;
Border: 5px solid #000;
}
H1 {
Color: #006;
Font-size: 24px;
Font-weight: bold;
Margin-bottom: 0px;
Text-align: center;
}
# Feedback {
Font-size: 1.4em;
}
# Selectable. ui-selecting {
Background: # FECA40;
}
# Selectable. ui-selected {
Background: # F39814;
Color: white;
}
# Selectable {
List-style-type: none;
Margin: 0;
Padding: 0;
}
# Selectable li {
Margin: 5px;
Padding: 2px;
Font-size: 16px;
Height: 20px;
Cursor: pointer;
Border: 1px solid # aaaaaa;
Background: # ffffff;
Color: #222222;
Width: 114px;
Float: left;
}
# Result {
Clear: both;
}
</Style>
<Link href = "CSS/base/jquery.ui.all.css" rel = "stylesheet" type = "text/css"/>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Wrap"). selectable ({
Filter: "li ",
Selected: eventCallback,
Stop: eventCallback,
Start: eventCallback,
Selecting: eventCallback,
Unselecting: eventCallback
});
Var selection;
Function eventCallback (e, ui ){
If (e. type = "selectableselected "){
Selection = [];
$ (". Ui-selected", this). each (function (){
Selection. push ($ (this). text ());
});
} Else if (e. type = "selectablestop "){
$ ("# Result"). text ("You selected" + selection. length + "item:" + selection. join (","));
}
}
});
</Script>
</Head>
<Body>
<Div id = "wrap">
<H1> city list <Ul id = "selectable">
<Li> Chongqing </li>
<Li> Beijing </li>
<Li> Shanghai </li>
<Li> Guangzhou </li>
<Li> Shenzhen </li>
<Li> Chengdu </li>
<Li> Tianjin </li>
<Li> Nanjing </li>
<Li> Hangzhou </li>
<Li> Wuhan </li>
<Li> Xi'an </li>
<Li> Changsha </li>
<Li> Xiamen </li>
<Li> Zhengzhou </li>
<Li> Taiyuan </li>
<Li> Qingdao </li>
</Ul>
<Div id = "result"> </div>
</Div>
</Body>
</Html>
The effect is the same as that in the previous example.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
