JavaScript image dropdown

JavaScript image dropdown

Eski moda dropdownlardan sıkıldıysanız bu yeni image combo box eklentisini deneyin. Her seçeneğe bir icon ekleyebilirsiniz. Eklediğiniz select elemanı ile uyumlu çalışacaktır yada JSON object yaratabilirsiniz. Bu size kalmış. Başlayalım :

Görünüm : 

image_drop_down

Gereksinim : 

Jquery 1.2.6 veya üst versiyon

Bu jquery eklentisi her hangi bir oynama yapmadan mükemmel bir şekilde çalışıyor. Adımları takip edin :

1. HTML yapısı :

 <select name="webmenu" id="webmenu"  onchange="showValue(this.value)">
    <option value="calendar">Calendar</option>
    <option value="shopping_cart">Shopping Cart</option>
    <option value="cd">CD</option>
    <option value="email"  selected="selected">Email</option>
    <option value="faq">FAQ</option>
    <option value="games">Games</option>
  </select>

Evet. Bu bir normal dropdown fakat “data-image” özelliğini image yolu olarak gösterdim. Aşağıdaki kodlara bakalım : 

<select name="webmenu" id="webmenu">
    <option value="calendar" data-image="icons/icon_calendar.gif">Calendar</option>
    <option value="shopping_cart" data-image="icons/icon_cart.gif">Shopping Cart</option>
    <option value="cd" data-image="icons/icon_cd.gif">CD</option>
    <option value="email"  selected="selected" title="icons/icon_email.gif">Email</option>
    <option value="faq" data-image="icons/icon_faq.gif">FAQ</option>
    <option value="games" data-image="icons/icon_games.gif">Games</option>
  </select>


2.Script yapısı : 

2.1 Aşağıdaki satıları “header” tagları arasına ekleyiniz : 

<script src="js/msdropdown/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/msdropdown/jquery.dd.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/msdropdown/dd.css" />

2.2 Son bir işlem kaldı ve bitiriyoruz. Aşağıdaki kodu body tagı içerisinde herhangi bir yere ekleyebilirsiniz :

<script language="javascript">
$(document).ready(function(e) {
try {
$("body select").msDropDown();
} catch(e) {
alert(e.message);
}
});
</script>

//

Bu kadar.

Demo

 

Kaynak : http://www.marghoobsuleman.com/jquery-image-dropdown

Download etmek istiyorsanız.

Download  GitHub.com

https://github.com/marghoobsuleman/ms-Dropdown

Kolay gelsin.

Muavenet

Web teknolojilerine merak salmış bir bilgisayar mühendisinin yazıları

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir