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 : 



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ı :

1.1 Orjinal drop down'a bakalım :

 <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.