Bu dersimiz de jquery
tag editor pluginini anlatacağım.Bu plugin seçtiğimiz alanı
youtube tarzı bir tag ekleme alanına çeviriyor.Son zamanlar da popüler olan bir tasarım bu.Kullanımına geçelim hemen.
İncele : http://ustaderslik.com/ornek/jQuery-tagEditor/
İndir : http://ustaderslik.com/dosya/jQuery-tagEditor.zip
Sayfamıza plugin dosyalarını dahil ediyoruz.Yukarıdan indirebilirsiniz.
$("seçici").tagEditor();
bu şekilde de alana pluginimizi uyguluyoruz.Bir kaç parametremiz var,şimdi bunları inceleyelim.
initialTags : İçin de standart olarak yazılacak tag eklemek için.
delimiter : Tag ayıracını belirliyoruz.
placeholder : Hiç tag yokken yazacak yazı.
maxLength : Maxsimum tag uzunluğu.
Eklenen tüm tagları almak istersek
$("seçici").tagEditor('getTags')[0].tags;
bu şekilde tag alanına eklenen tüm taglara erişebiliriz.
jquery.tag-editor.css den tasarımda değiştirmeler yapabilirsiniz.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<link rel="stylesheet" href="jquery.tag-editor.css" />
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.tag-editor.min.js"></script>
<script type="text/javascript">
$(function(){
$(".alan").tagEditor({
initialTags: ['UstaDerslik','cArleone'],
delimiter: ', ',
placeholder: 'Tag gir...',
clickDelete:false
});
$("button").click(function(){
var tag=$(".alan").tagEditor('getTags')[0].tags;
alert(tag)
})
})
</script>
</head>
<body>
<div class="alan"></div>
<br /><br />
<button>Hangi Taglar Mevcut</button>
</body>
</html>
Görüntüsü :
UstaDerslik
