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
Post a Comment