Skip to content

Latest commit

 

History

History
281 lines (234 loc) · 7.56 KB

README.md

File metadata and controls

281 lines (234 loc) · 7.56 KB

picture

DroopeJS Build Status

One of our favorite dropdown plugin using jQuery and named it "droope" which is a Swedish name of "drop". It is unique dropdown plugin and provides endless features like searching, tagging, single-select, multi-select and can also define dependencies

Demo

Try me out:

Browser Support

  • Internet Explorer 8+
  • Chrome 10+
  • Firefox 3.5+
  • Safari 4+
  • Opera 11+

Size

  • Minified: 24.16 KB
  • Gzip: 7.71 KB

Features

  • Single Select
  • Multiple Select
  • Searchable data with on/off feature.
  • Prefill/Preselected data for single and multiple select cases
  • Tags formation
  • Tags can be created inside or outside (separate/different) of Droope
  • Can also be used to represent data in list form.
  • Dependent feature for "single/multiple select" (e.g. Droope A depends to Droope B and Droope B depends to Droope C up to 'N' level.)

Usage

HTML

<div id="single" class="ddwn sng">
    <div class="DDwrap">
        <div class="DDsearch">
            <span class="arw"></span>
            <div class="DDinputWrap">
                <input type="text" class="srchTxt" placeholder="Type here" />
            </div>
        </div>
    </div>
</div>

JSON Data format

For Single/MultiSelect:
var JSONdata = { "1a":"India", "2a":"Australia", "3a":"United State", "4a":"Zymbombay", "5a":"Saudi Arabia" };


For OptGroup/Category/Parent-Child Case:
var JSONdata = {
    "Country": {
        "1": "India",
        "2": "Albania",
        "3": "Algeria",
        "4": "America"
    },
    "State": {
        "5a": "Delhi",
        "6a": "Uttar Pradesh",
        "7a": "GOA",
        "8a": "United Kingdom"
    },
    "District": {
        "13": "Kanpur",
        "14": "Lucknow",
        "15": "Bareiily",
        "16": "Moradabad"
    },
    "City": {
        "17a": "Shahjahanpur",
        "18a": "Bareilly",
        "19a": "Lucknow"
    }
}

Call

var params = {
    id: "single",  // should be id of Droope main container
    data: JSONdata 
};
var instance = new DD(params);

Parameters (Options)

Name Type Default Value Description
appendTags Boolean false By default tags inserted in prepend manner, to reverse it set true.
id String none Droope main container Id.
clearAllInside Boolean false {'Text':'ClearAll'}
clearTagId String none Node Id, to clear the Droope selected values
isSearch Boolean true to enable/disable search
maxTagsCount Integer 999 to limit the number of tags creation.
maxHeight Integer 300 To set Droope max height
noDataTxt String "No data found in search" Text which is shown when no data will be found in search
checkBox Boolean false to switch in singleSelect/multiSelect mode.
preText String "You have selected" to show pretext when selection made from Droope in "tagInSeparate" container case
postText String "item(s)" to show post text when selection made from Droope in "tagInSeparate" container case
parentChkBox Boolean false After enable this option parent/optgroup tuple becomes selectable and if a user selects any optgroup then all its children automatically selected.
postPlaceholder String none In multi-select Droope to replace default placeholder with postPlaceholder when input box become squeeze.
prefillData Array/String/integer none to pre-selected data in Droope passed key(s) in Array/String/integer form.
searchBox Boolean true to enable or disable search box
sortPrefix String none if JSON data having numeric keys and to prevent JSON data sorting, add any string against each key in JSON data and specify the same prefix string in this parameter reference
tagwithOptGroup Boolean false to create tags with optgroup/parent text
tagInSepContainer String none Container id in which you want to show dropdown tags (note- Valid only for multiple select)
tagTitle Boolean false To enable title text on tags
tags Boolean true To enable/disable tags
tagsSorting Boolean true In multiple select Droope (especially in prefill case) to prevent automatic tags sorting
inputValReset Boolean true to prevent clear text string from input box on blur event

Methods

addData() : To add new data in existing Droope

   instance.addData({
    'data': {
        "saeed": "saeedkhan"
    },
    'status': "Checked",
    prefillData: [2.2, 4.1]
});

replaceData() : To replace existing data with new data.

   instance.replaceData({
    'data': {
        "#1": "Agra",
        "#2": "Delhi",
        "#3": "Lucknow"
    },
    'status': "Checked",
    prefillData: 2
});

destroy() : To destroy Droope

   instance.destroy();

select() : to progmatically selection.

For Single Selection
instance.select({
    'key': '2'
});

For multiple Selection
instance.select({
    'key': [2, 4]
});

deselect() : to progmatically de-selection.

    For Single Selection
    instance.deselect({
        'key': '2.2'
    });
    
    For multiple Selection
    instance.deselect({
        'key': [2.2, 4.1]
    });

selectedValues() : to get selected item(s) object.

    For Single Selection
    instance.selectedValues();
    //output:   [3]
    
    For multiple Selection
    instance.selectedValues();
    //output:   [3,4,6]

Callback methods

onChange()

 Fire only when a value change in Droope

    new DD({
        id: "mis",
        data: indDD,
        onChange: function() {
            alert('On Change callback function Fired');
        }
    });

onDeselect()

 Fire only when a value has been deselected

    new DD({
        id: "mis",
        data: indDD,
        onDeselect: function() {
            alert('On Deselect callback function Fired');
        }
    });

onTagCreate()

 Fire only when tag is created

    new DD({
        id: "mis",
        data: indDD,
        onTagCreate: function() {
            alert('On onTagCreate callback function Fired');
        }
    });

onTagClick()

 Fire only when user clicks on tag

    new DD({
        id: "mis",
        data: indDD,
        onTagClick: function() {
            alert('On onTagClick callback function Fired');
        }
    });

onClickReq()

 Fire only when user selects any value either by mouse/touch

    new DD({
        id: "mis",
        data: indDD,
        onClickReq: function() {
            alert('On onClickReq callback function Fired');
        }
    });

onClearTag()

 Fire only when deselection done by node which passed in option -> "clearAllTag"

    new DD({
        id: "mis",
        data: indDD,
        onClearTag: function() {
            alert('On onClearTag callback function Fired');
        }
    });

Author

Mohd Saeed Khan

Version

v1.0.0