JQuery UI Selectable

From the last three articles, we have been looking at some of the most useful features of JQuery UI. We studied, Draggable, Droppable and Resizeble funtions in the last articles. This article explains JQuery UI selectable function. This function allows one or more elements be select-able with the mouse click. You can select one element with a single click as well as multiple elements by pressing control key and clicking different elements. Simply call selectable() function with or without optional parameter on any element which you want to make selectable. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery UI Selectable</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
     <script>
         $(function() {
            $( "#list" ).selectable();
         });
      </script>
    <style>
         #list .ui-selecting { background: #707070 ; }
         #list .ui-selected
        { background-color: darkgray; 
             color: #000000; }
         #list { 
             list-style-type: none;
             margin: 5px; 
            padding: 2px; 
             width: 10%;
        }
         #list li
        {
            margin: 5px; 
            padding: 0.5em; 
            font-size: 18px;
            height: 18px; 
        }
         .button {
            background-color: cornflowerblue;
            border: 1px solid #DDDDDD;
            color: #fff;
         }
      </style>
     
   </head>
   <body>
       <h1>Select Fruits to Buy</h1>
      <ol id="list">
         <li class="button">Apple</li>
         <li class="button">Mango</li>
         <li class="button">Banana</li>
         <li class="button">Orange</li>
         <li class="button">Guava</li>
      
      </ol> 
   </body>
</html>

Download Code Run Code

The above contains a list of 5 fruits which you can select by simply clicking on it. You can also select multiple fruits by pressing control and clicking on multiple list items. If you look at the script you will see that the selectable() function is called on the element with id ‘#list’. The “ol” list has this id. This means that all the elements inside this list will become select-able as well.

Selectable with Optional Parameters

You can also pass optional parameters to the selectable() function to change the behavior of the selection of the elements. The parameters are passed inside the curly brackets with each parameter separated by a comma. In the following example an optional parameter of distance with value 30 is passed to the selectable() function. To select the element user will have to click the element and drag the mouse 30 pixel in any direction.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery UI Selectable with Parameters</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
     <script>
         $(function() {
            $( "#list" ).selectable({
               distance : 30
            });
         });
      </script>
    <style>
         #list .ui-selecting { background: #707070 ; }
         #list .ui-selected
        { background-color: darkgray; 
             color: #000000; }
         #list { 
             list-style-type: none;
             margin: 5px; 
            padding: 2px; 
             width: 10%;
        }
         #list li
        {
            margin: 5px; 
            padding: 0.5em; 
            font-size: 18px;
            height: 18px; 
        }
         .button {
            background-color: cornflowerblue;
            border: 1px solid #DDDDDD;
            color: #fff;
         }
      </style>
     
   </head>
   <body>
       <h1>Select Fruits to Buy</h1>
      <ol id="list">
         <li class="button">Apple</li>
         <li class="button">Mango</li>
         <li class="button">Banana</li>
         <li class="button">Orange</li>
         <li class="button">Guava</li>
      </ol> 
   </body>
</html>

Download Code Run Code

<<< JQuery UI ResizeableJQuery UI Sortable >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .