JavaScript DHTML/jQuery/UI Selectable

Материал из Web эксперт
Перейти к: навигация, поиск

jQuery UI Selectable - Default functionality

   <source lang="html4strict">
 


<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Selectable - Default functionality</title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.selectable.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 
 <style type="text/css">
 #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; width: 60%; }
 #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
 </style>
 <script type="text/javascript">
 $(function() {
   $("#selectable").selectable();
 });
 </script>

</head> <body>

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5
  6. Item 6
  7. Item 7

Enable a DOM element (or group of elements) to be selectable. Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections.

</body> </html>


 </source>
   
  


jQuery UI Selectable - Display as grid

   <source lang="html4strict">
 

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Selectable - Display as grid</title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.selectable.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 
 <style type="text/css">
 #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: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }
 </style>
 <script type="text/javascript">
 $(function() {
   $("#selectable").selectable();
 });
 </script>

</head> <body>

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12

To arrange selectable items as a grid, give them identical dimensions and float them using CSS.

</body> </html>


 </source>
   
  


jQuery UI Selectable - Serialize

   <source lang="html4strict">
 

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Selectable - Serialize</title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.selectable.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 
 <style type="text/css">
 #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; width: 60%; }
 #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
 </style>
 <script type="text/javascript">
 $(function() {
   $("#selectable").selectable({
     stop: function(){
       var result = $("#select-result").empty();
       $(".ui-selected", this).each(function(){
         var index = $("#selectable li").index(this);
         result.append(" #" + (index + 1));
       });
     }
   });
 });
 </script>

</head> <body>

You"ve selected: none.

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5
  6. Item 6

Write a function that fires on the stop event to collect the index values of selected items. Present values as feedback, or pass as a data string.

</body> </html>


 </source>
   
  


Selectable events: selected, unselected, start and stop

   <source lang="html4strict">

<html lang="en"> <head>

 <title></title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.selectable.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 
 <style type="text/css">
 #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; width: 60%; }
 #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
 </style>
 <script type="text/javascript">
 $(function() {
       var selectableObj = {
         selected: function(e, ui) {
           $("#" + ui.selected.id).text("I have been selected!");
         },
         unselected: function(e, ui) {
           $("#" + ui.unselected.id).text("This div can be selected");
         },
         start: function(e) {
           alert("click to select");
         },
         stop: function() {
           $("#tip").fadeOut();  
         }
       }
     
       $("#selectables").selectable(selectableObj);
 });
 </script>

</head> <body>

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5
  6. Item 6
  7. Item 7

</body> </html>

 </source>
   
  


Selectable selecting and unselecting

   <source lang="html4strict">

<html>

 <head>
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.selectable.js"></script>  
   <script type="text/javascript">

$(document).ready(

 function() {
   $("ul").selectable({
     selecting: function(e, ui) {
       $(ui.selecting).addClass("tmpSelected");  
     },
     unselecting: function(e, ui) {
       $(ui.unselecting).removeClass("tmpSelected");   
     }
   });
 }

);

   </script>
   <style type="text/css">

ul {

   list-style: none;

} li {

   background: gold;

} li.tmpSelected {

   background: yellow;

}

   </style>
 </head>
 <body>
  • A
  • B
  • C
  • D
 </body>

</html>

 </source>