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 | }; |