JavaScript Tutorial/jQuery/UI Selectable

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

30. jQuery UI Selectable - Default functionality

   <source lang="javascript">

<!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>


30. jQuery UI Selectable - Display as grid

   <source lang="javascript">

<!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>


30. jQuery UI Selectable - Serialize

   <source lang="javascript">

<!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>


30. Selectable events: selected, unselected, start and stop

   <source lang="javascript">

<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>


30. Selectable selecting and unselecting

   <source lang="javascript">

<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>


30. Set containment to the container and distance to 30

   <source lang="javascript">

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

 <title>jQuery UI Sortable - 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.sortable.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <style type="text/css">
 #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
 #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
 #sortable li span { position: absolute; margin-left: -1.3em; }
 </style>
 <script type="text/javascript">
 $(function() {
       var sortOpts = {
         axis: "y",
         containment: "#container",
         cursor: "move",
         distance: 30
       };
     
       //make specified element sortable
       $("#sortable").sortable(sortOpts);
 });
 </script>

</head> <body>

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

Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share draggable properties.

</body> </html></source>