SHOW:
|
|
- or go back to the newest paste.
| 1 | - | function DropDown(el) {
|
| 1 | + | $.fn.odropdown = function(options) {
|
| 2 | - | this.dd = el; |
| 2 | + | |
| 3 | - | this.placeholder = this.dd.children('span');
|
| 3 | + | var default_settings = {
|
| 4 | - | this.opts = this.dd.find('ul.dropdown > li');
|
| 4 | + | placeholder : 'span', |
| 5 | - | this.val = ''; |
| 5 | + | placeholder_text : '', |
| 6 | - | this.index = -1; |
| 6 | + | selected_index : 0 |
| 7 | - | this.initEvents(); |
| 7 | + | }; |
| 8 | ||
| 9 | - | // Prepare Form / input selection |
| 9 | + | var settings = $.extend( {}, default_settings, options );
|
| 10 | - | var $input = $('input[name="' + this.dd.children('ul').attr('data-target') + '"]');
|
| 10 | + | |
| 11 | - | var $form = this.dd.parents('form');
|
| 11 | + | return this.each(function() {
|
| 12 | var $this = $(this); | |
| 13 | - | // Check if the form exist |
| 13 | + | var $list = $this.find('ul');
|
| 14 | - | if ($form.length) {
|
| 14 | + | var selected_index = settings.selected_index; |
| 15 | - | if (!$input.length) {
|
| 15 | + | var $placeholder = $this.find(settings.placeholder); |
| 16 | - | $input = $('<input type="hidden" name="' + this.dd.children('ul').attr('data-target') + '" value="" />');
|
| 16 | + | |
| 17 | - | $input.appendTo($form); |
| 17 | + | if (settings.placeholder_text.length) {
|
| 18 | $placeholder.text(settings.placeholder_text); | |
| 19 | - | } |
| 19 | + | |
| 20 | ||
| 21 | - | this.input = $input; |
| 21 | + | // Prepare Form / input selection |
| 22 | - | } |
| 22 | + | var $input = $('input[name="' + $list.attr('data-target') + '"]');
|
| 23 | var $form = $this.parents('form');
| |
| 24 | - | DropDown.prototype = {
|
| 24 | + | |
| 25 | - | initEvents : function() {
|
| 25 | + | // Check if the form exist |
| 26 | - | var obj = this; |
| 26 | + | if ($form.length) {
|
| 27 | if (!$input.length) {
| |
| 28 | - | obj.dd.on('click', function(event){
|
| 28 | + | $input = $('<input type="hidden" name="' + $list.attr('data-target') + '" value="" />');
|
| 29 | $input.appendTo($form); | |
| 30 | } | |
| 31 | } | |
| 32 | ||
| 33 | - | obj.opts.on('click',function(e){
|
| 33 | + | $this.on('click', function(event){
|
| 34 | - | var opt = $(this); |
| 34 | + | |
| 35 | - | obj.val = opt.text(); |
| 35 | + | |
| 36 | - | obj.index = opt.index(); |
| 36 | + | |
| 37 | - | obj.placeholder.text(obj.val); |
| 37 | + | |
| 38 | $list.find('li').on('click',function(e){
| |
| 39 | var $li = $(this); | |
| 40 | - | if (obj.input) {
|
| 40 | + | selected_index = $li.index(); |
| 41 | - | obj.input.attr('value', $(this).attr('data-id'));
|
| 41 | + | $placeholder.text($li.text()); |
| 42 | ||
| 43 | ||
| 44 | - | }, |
| 44 | + | if ($input) {
|
| 45 | - | getValue : function() {
|
| 45 | + | $input.attr('value', $li.attr('data-id'));
|
| 46 | - | return this.val; |
| 46 | + | |
| 47 | - | }, |
| 47 | + | // Trigger some events |
| 48 | - | getIndex : function() {
|
| 48 | + | $input.trigger('change');
|
| 49 | - | return this.index; |
| 49 | + | $input.trigger('click');
|
| 50 | - | } |
| 50 | + | |
| 51 | // Turn back off list | |
| 52 | $this.toggleClass('active');
| |
| 53 | } | |
| 54 | }); | |
| 55 | }); | |
| 56 | }; |
