caphDropdownList

caph-dropdown-list provides users with toggleable list that allows the user to choose one from a predefined list.

Options

This plugin's init function need option object to define behavior. It's properties can be defined like below.

items

Dropdown list needs a specific format to work with JSON. It is array type of the object and each item has two required fields: id & content. Each item of the list is represented by an object. So all objects should be arranged by you want to show.

• id (required) : identifier of each item. It is used as parameter of 'on-select-item' callback function.
• content (required) : string or tags, it is served as the item content.

• disabled : If the item should be not selectable, this should be set to true.

  [
    {id: 'copy', content: 'Copy'},
    {id: 'cut', content: 'Cut'},
    {id: 'paste', content: 'Paste', disabled: true},
    {id: 'forward', content: 'Forward'}
  ]

  visibleItemCount

  Used to limit item count to view. If this value is set and item count is bigger than it, arrow buttons will be show on list.

  focusOption

  Values to be set on this dropdown list. If you need to know more information, refer to focus directive document.

  onSelectItem

  the callback function of the select event on each item. This function can have parameters as '$itemId' and '$event'. '$itemId' is the item's id user select. '$event' is event object of jQuery.

Templates

Dropdown list provides 4 templates for customizing. Your code in the templates will be place in predefined 'div' tags.

item template

User can decorate each item of list using 'caph-dropdown-list-item-template' class. In this tag, you can use properties of each item.

 [item]
 {id: 'korea', content: 'Korea, KR', textColor: 'blue'}

 [template]
 <div id="dropdownList0">
     <div class="caph-dropdown-list-item-template">
         <span style="color:{{textColor}}">{{content}}</span> ({{id}})
     </div>
 </div>

When you use this template, you can see dom structure like below

 <div id="dropdownList0" class="caph-dropdown-list">
     <div class="textbox">
         <div class="label">
             <span style="color:blue;">Korea, KR</span> (korea)
         </div>
     </div>
 </div>

placeholder template

User also can decorate placeholder using 'caph-dropdown-list-placeholder-template' class.

 <div id="dropdownList0">
     <div class="caph-dropdown-list-placeholder-template">
         <div class="textbox"><div class="label">Action</div></div>
         <div class="button"><div class="label">▽</div></div>
     </div>
 </div>

After that, you can see 'action' and '▽' in placeholder area.

 <div id="dropdownList0" class="caph-dropdown-list">
     <div class="placeholder">
         <div class="textbox">
             <div class="label">
                 <div class="textbox"><div class="label">Action</div></div>
                 <div class="button"><div class="label">▽</div></div>
             </div>
         </div>
     </div>
 </div>

'textbox' and 'button' classes are pre-defined for the most popular dropdown list. 'textbox' class has properties 'width 95%, vertical align middle'. 'button' class has properties 'float right, width 40px'. If you don't want to see this style, you can change this tags and classes.

arrow-up / arrow-down button templates

If the dropdown list need to be scrolled, user can define arrow buttons using 'caph-dropdown-list-arrow-up-template' and 'caph-dropdown-list-arrow-down-template' If it is not defined, dropdown list will not show you arrow buttons.

 <div class="caph-dropdown-list-arrow-up-template">▲</div>
 <div class="caph-dropdown-list-arrow-down-template">▼</div>

Example

js

 var dropdown0 = $('#dropdownList0').caphDropdownList({
     items: [
         {id: 'copy', content: 'Copy'},
         {id: 'cut', content: 'Cut'},
         {id: 'paste', content: 'Paste', disabled: true},
         {id: 'forward', content: 'Forward'}
     ],
     focusOption: {
         depth: 0
     },
     onSelectItem: function($itemId, $event){
         $('#selectedItemName').html($itemId);
     }
 });

html

 <div id="dropdownList0">
     <div class="caph-dropdown-list-placeholder-template">
         <div class="textbox"><div class="label">Action</div></div>
         <div class="button"><div class="label">▽</div></div>
     </div>
     <div class="caph-dropdown-list-item-template">${content}</div>
 </div>