http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_DHTML%2FjQuery%2FUI_Selectable
JavaScript DHTML/jQuery/UI Selectable - История изменений
2026-04-04T11:32:03Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_DHTML/jQuery/UI_Selectable&diff=2936&oldid=prev
в 10:02, 26 мая 2010
2010-05-26T10:02:45Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 10:02, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=JavaScript_DHTML/jQuery/UI_Selectable&diff=2937&oldid=prev
Admin: 1 версия
2010-05-26T07:24:01Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==jQuery UI Selectable - Default functionality==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Selectable - Default functionality</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.selectable.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<br />
<style type="text/css"><br />
#feedback { font-size: 1.4em; }<br />
#selectable .ui-selecting { background: #FECA40; }<br />
#selectable .ui-selected { background: #F39814; color: white; }<br />
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }<br />
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }<br />
</style><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#selectable").selectable();<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<ol id="selectable"><br />
<li class="ui-widget-content">Item 1</li><br />
<li class="ui-widget-content">Item 2</li><br />
<li class="ui-widget-content">Item 3</li><br />
<li class="ui-widget-content">Item 4</li><br />
<li class="ui-widget-content">Item 5</li><br />
<li class="ui-widget-content">Item 6</li><br />
<li class="ui-widget-content">Item 7</li><br />
</ol><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p>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. </p><br />
</div><!-- End demo-description --><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==jQuery UI Selectable - Display as grid==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Selectable - Display as grid</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.selectable.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<br />
<style type="text/css"><br />
#feedback { font-size: 1.4em; }<br />
#selectable .ui-selecting { background: #FECA40; }<br />
#selectable .ui-selected { background: #F39814; color: white; }<br />
#selectable { list-style-type: none; margin: 0; padding: 0; }<br />
#selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }<br />
</style><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#selectable").selectable();<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<ol id="selectable"><br />
<li class="ui-state-default">1</li><br />
<li class="ui-state-default">2</li><br />
<li class="ui-state-default">3</li><br />
<li class="ui-state-default">4</li><br />
<li class="ui-state-default">5</li><br />
<li class="ui-state-default">6</li><br />
<li class="ui-state-default">7</li><br />
<li class="ui-state-default">8</li><br />
<li class="ui-state-default">9</li><br />
<li class="ui-state-default">10</li><br />
<li class="ui-state-default">11</li><br />
<li class="ui-state-default">12</li><br />
</ol><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p>To arrange selectable items as a grid, give them identical dimensions and float them using CSS.</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==jQuery UI Selectable - Serialize==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Selectable - Serialize</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.selectable.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<br />
<style type="text/css"><br />
#feedback { font-size: 1.4em; }<br />
#selectable .ui-selecting { background: #FECA40; }<br />
#selectable .ui-selected { background: #F39814; color: white; }<br />
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }<br />
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }<br />
</style><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#selectable").selectable({<br />
stop: function(){<br />
var result = $("#select-result").empty();<br />
$(".ui-selected", this).each(function(){<br />
var index = $("#selectable li").index(this);<br />
result.append(" #" + (index + 1));<br />
});<br />
}<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<p id="feedback"><br />
You"ve selected: <span id="select-result">none</span>.<br />
</p><br />
<ol id="selectable"><br />
<li class="ui-widget-content">Item 1</li><br />
<li class="ui-widget-content">Item 2</li><br />
<li class="ui-widget-content">Item 3</li><br />
<li class="ui-widget-content">Item 4</li><br />
<li class="ui-widget-content">Item 5</li><br />
<li class="ui-widget-content">Item 6</li><br />
</ol><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p>Write a function that fires on the <code>stop</code> event to collect the index values of selected items. Present values as feedback, or pass as a data string.</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Selectable events: selected, unselected, start and stop==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html lang="en"><br />
<head><br />
<title></title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.selectable.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<br />
<style type="text/css"><br />
#feedback { font-size: 1.4em; }<br />
#selectable .ui-selecting { background: #FECA40; }<br />
#selectable .ui-selected { background: #F39814; color: white; }<br />
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }<br />
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }<br />
</style><br />
<script type="text/javascript"><br />
$(function() {<br />
var selectableObj = {<br />
selected: function(e, ui) {<br />
$("#" + ui.selected.id).text("I have been selected!");<br />
},<br />
unselected: function(e, ui) {<br />
$("#" + ui.unselected.id).text("This div can be selected");<br />
},<br />
start: function(e) {<br />
alert("click to select");<br />
},<br />
stop: function() {<br />
$("#tip").fadeOut(); <br />
}<br />
}<br />
<br />
$("#selectables").selectable(selectableObj);<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<ol id="selectables"><br />
<li class="ui-widget-content">Item 1</li><br />
<li class="ui-widget-content">Item 2</li><br />
<li class="ui-widget-content">Item 3</li><br />
<li class="ui-widget-content">Item 4</li><br />
<li class="ui-widget-content">Item 5</li><br />
<li class="ui-widget-content">Item 6</li><br />
<li class="ui-widget-content">Item 7</li><br />
</ol><br />
</div><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Selectable selecting and unselecting==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.selectable.js"></script> <br />
<script type="text/javascript"><br />
$(document).ready(<br />
function() {<br />
$("ul").selectable({<br />
selecting: function(e, ui) {<br />
$(ui.selecting).addClass("tmpSelected"); <br />
},<br />
unselecting: function(e, ui) {<br />
$(ui.unselecting).removeClass("tmpSelected"); <br />
}<br />
});<br />
}<br />
);<br />
</script><br />
<style type="text/css"><br />
ul {<br />
list-style: none;<br />
}<br />
li {<br />
background: gold;<br />
}<br />
li.tmpSelected {<br />
background: yellow;<br />
}<br />
</style><br />
</head><br />
<body><br />
<ul><br />
<li>A</li><br />
<li>B</li><br />
<li>C</li><br />
<li>D</li><br />
</ul><br />
</body><br />
</html><br />
<br />
</source></div>
Admin