javascript - Configurable JS component for a HTML Control -


i new oo javascript. want make dropdown button component can use anywhere in html. have created code creating dom. want know how make properties configurable in js.

for example:

$('<div/>', {     id:'btndropdown',     'class': 'btn-group pull-right',     'role':'group', }).appendto('#settingpanel');             $('<button/>', {     id:'btn-default',     'type': 'button',     'class':'btn btn-default dropdown-toggle',                       'data-toggle': 'dropdown',     'aria-expanded':'false' }).html('<span class="glyphicon glyphicon-cog"></span>').appendto('#btndropdown');  $('<ul/>', {     'class': 'dropdown-menu',     'role':'menu', }).appendto('#listcont'); 

now want user able configure id wants attach component using desired id on html. icon location.

here working code javascript component:

(function() {      var defaults = { class: 'btn-group', role: 'group' };      this.dropdown = function (el, config, dropdownelement, content) {         this.el = el instanceof $ ? el : $(el);         this.dropdownelt = dropdownelement || '<div>';         this.content = content || '';         this.config = $.extend({}, defaults, config);         this.createdropdown();     };      dropdown.prototype.createdropdown = function () {         var dropdownelement = $(this.dropdownelt, this.config).html(this.content);         this.el.append(dropdownelement);     }; }());  var config = {  id:'btndropdown',                 'class': 'btn-group pull-right',                 'role':'group',              }; var dropdown = new dropdown ('#settingpanel', config);   var newconfig = {     id:'btn-default',     'type': 'button',     'class':'btn btn-default dropdown-toggle',                       'data-toggle': 'dropdown',     'aria-expanded':'false' }; var content = '<span class="glyphicon glyphicon-cog"></span>'; var btndropdown = new dropdown ('#btndropdown', config, '<button>', content);  

here jsfiddle, if want see work: https://jsfiddle.net/024vwbo3/3/

to configure id simple have obtain html required , pass configuration when creating dropdown.


Comments