Bu dersimiz de jquery ui nin çoklu seçim özelliği olan selectableyi anlatacam.Bu ne derseniz belirli bir kutumuz var bunlardan bir kısmını seçtik seçili olanları hangisi olduğunu buluyoruz.Jquery ui ile bu baya basit.
Şimdi kodlara gelelim.
<html>
<head>
<title>cArleone</title>
<script type="text/javascript" src="jquery-1.9.0.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.0.custom.js"></script>
<link rel="stylesheet" href="demos.css" />
<link rel="stylesheet" href="jquery-ui-1.10.0.custom.min.css" />
<script type="text/javascript">
$(function() {
$(".sec").selectable();
$("button").click(function(){//butona tıklarsak
$(".ui-selected").each(function(){//ui-seleted i döngüye alarak 1 er 1er değerleri alıyorum
var deger=$(this).html();
alert(deger);//alert ile hangileri olduğunu gösteriyom
})
})
});
</script>
<style type="text/css">
body{font-size:15px;}
.sec li{list-style-type:none;margin:0px;border:1px solid #000;width:150px;height:150px;float:left;margin:25px;}
.sec .ui-selecting{background-color:red;}/*seçime tıklandığı anki tasarım*/
.sec .ui-selected{background-color:green}/*seçim olduğundaki tasarımları*/
</style>
</head>
<body>
<button>seçili olanlar söyle</button>
<ul class="sec">
<li>css</li>
<li>html</li>
<li>javascript</li>
<li>jquery</li>
<li>php</li>
</ul>
</body>
indir: http://ustaderslik.com/dosya/Jquery-Uİ%20(Selectable).rar
video:
UstaDerslik
