Drop Down Menu with Images Plugin - ddSlick

ddSlick is a light-weight jQuery Plugin that allows you to create a customizable drop down menu with images.

Supports dynamic (JSON) and static (select) data rendering.

Licensed under the MPL-2.0.

How to use it:

1. Load the minified version of the ddSlick plugin after loading jQuery library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="./dist/jquery.ddslick.min.js"></script>

2. Create a baisc dropdown menu from JSON data.

<div id="example">
</div>

// JSON data
var ddData = [
    {
        text: "Facebook",
        value: 1,
        selected: false,
        description: "Description with Facebook",
        imageSrc: "http://i.imgur.com/XkuTj3B.png"
    },
    {
        text: "Twitter",
        value: 2,
        selected: false,
        description: "Description with Twitter",
        imageSrc: "http://i.imgur.com/8ScLNnk.png"
    }
];

$("#example").ddslick({
  data: ddData
});

3. Create a dropdown menu from a regular select element.

<select id="example">
  <option value="0" data-imagesrc="http://i.imgur.com/XkuTj3B.png" data-description="Description with Facebook">Facebook</option>
  <option value="1" data-imagesrc="http://i.imgur.com/8ScLNnk.png" data-description="Description with Twitter">Twitter</option>
</select>

$("#example").ddslick();

4. Plugin's default options to customize the dropdown menu.

$("#example").ddslick({
  data: [],
  keepJSONItemsOnTop: false,
  animationTime: 50,
  width: "20em",
  height: null,
  background: "#eee",
  selectText: "",
  defaultSelectedIndex: null,
  truncateDescription: true,
  imagePosition: "left", // or 'right'
  showSelectedHTML: true,
  clickOffToClose: true,
  embedCSS: true,
  onSelected: function() { }
});

5. API methods.

// select a specific item
$('#example').ddslick('select', {index: i });

// opens the dropdown menu
$('#example').ddslick('open');

// closes the dropdown menu
$('#example').ddslick('close');

// destroy the dropdown menu
$('#example').ddslick('destroy');

Changelog:

2019-01-24

• jQuery dependency updated, <3.0 has XSS vulnerabilities
• Demo file included for integration testing
• Accessibility improvements
• Use instead of to ensure focus from keyboard navigation.
• Improve z-index to ensure focus ring is not hidden behind other elements.
• Maintain focus after selecting an item from dropdown.
• Use aria-haspopup='listbox' for dropdown and remove conflicting tags from options.
• Use aria-hidden and aria-expanded to notify browser of widget state.
• Handle keyboard navigation between options when listbox is expanded.

2016-06-29

• AMD and Node/CommonJS module support.

---

This awesome jQuery plugin is developed by jsmodules. For more Advanced Usages, please check the demo page or visit the official website.