TagEdit – kelimeyi etikete dönüştürme

0
199
Okunma

TagEdit1 TagEdit   kelimeyi etikete dönüştürme

Facebook üzerinden bir yazı yada  resim paylaşımı yaparken arkadaşlarınızı da  bu gönderilere etiketleyebildiğinizi biliyorsunuz zaten. Oliver Albrecht ‘ın geliştiridiği TagEdit uygulaması da  aynı Facebook benzeri kişi etiketlemenizi sağlayan bir çalışma. Siz Input alanında  yazmaya başlar başlamaz yazdıklarınızla alakalı olajn en yakın veriler listeleniyor ve seçmiş olduğunuz veri inputa etiketli bir şekilde yerleşiyor.  Bir kelimeyi etiket yapabilmeniz için illaki karşınıza bir sonuç çıkması gerekmiyor. Virgül ile ayırmış olduğunuz  kelimeler  otomatik etikete dönüşüyor. Buna benzer bir çalışmayı Youtube sitesinde de video yüklerken görebilirsiniz. Ayrıca WordPress yazı yazma paneli de bu şekilde çalışıyor.

Kullanım

  • Head etiketleri  arasına eklenmesi  gereken bölümler.

 Js ve  Css  doya url  adresleri :

<link rel="StyleSheet" href="css/ui-lightness/jquery-ui-1.8.6.custom.css" type="text/css" media="all"/>
<link rel="StyleSheet" href="css/jquery.tagedit.css" type="text/css" media="all"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.autoGrowInput.js"></script>
<script type="text/javascript" src="js/jquery.tagedit.js"></script>

Javascript :

<script type="text/javascript">
	$(function() {
		// Fullexample
		$( "#tagform-full" ).find('input.tag').tagedit({
			autocompleteURL: 'server/autocomplete.php'
		});
		// Edit only
		$( "#tagform-editonly" ).find('input.tag').tagedit({
			autocompleteURL: 'server/autocomplete.php',
			allowEdit: false,
			allowAdd: false
		});
	});
	</script>
  • Body  etiketleri arasına eklemeniz gereken bölüm :

Html :

    <form action="server/formtarget.php" method="post" id="tagform-full">
		<p>
			<input type="text" name="tag[19-a]" value="Merlin" class="tag"/>
			<input type="text" name="tag[15-d]" value="Little Owl" class="tag"/>
		<input type="submit" name="save" value="Save"/>
		</p>
    </form>

Autocomplete.php dosyasına düzenlemeniz gereken kısım :

$autocompletiondata = array(
    3 => 'Hazel Grouse',
    4 => 'Common Quail',
    5 => 'Common Pheasant',
    6 => 'Northern Shoveler',
    7 => 'Greylag Goose',
    8 => 'Barnacle Goose',
    9 => 'Lesser Spotted Woodpecker',
    10 => 'Eurasian Pygmy-Owl',
    11 => 'Dunlin',
    13 => 'Black Scoter',
    14 => 'Eurasian Wryneck',
    15 => 'Little Owl',
    16 => 'Eurasian Curlew',
    17 => 'Ruff',
    18 => 'Little Tern',
    19 => 'Merlin',
    20 => 'Bluethroat',
    21 => 'Redwing',
    22 => 'Wood Nuthatch',
    23 => 'Firecrest',
    24 => 'Goldcrest',
    25 => 'Bearded Parrotbill',
    26 => 'Chaffinch',
    27 => 'Brambling',
    28 => 'Hawfinch',
    29 => 'Goldcrest',
);

CEVAP VER

Lütfen yorumunuzu girin!
Please enter your name here