/*! * Html 助手 * version: 1.0.0-2018.07.25 * Requires ES6 * Copyright (c) 2018 Tiac * http://www.cnblogs.com/tujia/p/9369027.html */ class Html { static merge(){ let obj = {}; for(let i in arguments){ let options = arguments[i]; for(let key in options){ if(options[key]) obj[key] = options[key]; } } return obj; } static tag(type, value = '', options={}){ type = type.toLowerCase(); let ele = document.createElement(type); for(var key in options){ ele.setAttribute(key, options[key]); } if(value!='') ele.value = value; return ele; } static a(text, url = '', options = {}) { if (url != '') { options['href'] = url; } let ele = this.tag('a', '', options); ele.innerHTML = text; return ele; } static img(src, options = {}) { options = this.merge({'src':src}, options); if (options['srcset']!=undefined && typeof(options['srcset'])=='object') { let srcset = []; for(let key in options['srcset']){ srcset.push(options['srcset'][key]+' '+key); } options['srcset'] = srcset.join(','); } if (options['alt']==undefined) { options['alt'] = ''; } return this.tag('img', '', options); } static label(content, _for = '', options = {}) { options = this.merge({'for':_for}, options); let ele = this.tag('label', '', options); ele.innerHTML = content; return ele; } static button(content = 'Button', options = {}) { options = this.merge({'type':'button'}, options); let ele = this.tag('button', '', options); ele.innerHTML = content; return ele; } static submitButton(content = 'Submit', options = {}) { options = this.merge({'type':'submit'}, options); let ele = this.tag('button', '', options); ele.innerHTML = content; return ele; } static resetButton(content = 'Reset', options = {}) { options = this.merge({'type':'reset'}, options); let ele = this.tag('button', '', options); ele.innerHTML = content; return ele; } static input(type, name = '', value = '', options = {}) { options = this.merge({ 'type': type, 'name': name }, options); return this.tag('input', value, options); } static buttonInput(label = 'Button', options = {}) { options = this.merge({'type':'button'}, options); return this.tag('input', label, options); } static submitInput(label = 'Submit', options = {}) { options = this.merge({'type':'submit'}, options); return this.tag('input', label, options); } static resetInput(label = 'Reset', options = {}) { options = this.merge({'type':'reset'}, options); return this.tag('input', label, options); } static textInput(name = '', value = '', options = {}) { return this.input('text', name, value, options); } static hiddenInput(name, value = '', options = {}) { return this.input('hidden', name, value, options); } static passwordInput(name, value = '', options = {}) { return this.input('password', name, value, options); } static fileInput(name, value = '', options = {}) { return this.input('file', name, value, options); } static textarea(name, value = '', options = {}) { options = this.merge({'name':name}, options); return this.tag('textarea', value, options); } static radio(name, checked = false, options = {}) { return this.booleanInput('radio', name, checked, options); } static checkbox(name, checked = false, options = {}) { return this.booleanInput('checkbox', name, checked, options); } static booleanInput(type, name, checked = false, options = {}) { let label = ''; let lableOptions = {}; if(options.label!=undefined){ label = options.label; delete(options.label); } if(options.lableOptions!=undefined){ lableOptions = options.lableOptions; delete(options.lableOptions); } let pluginOptions = {}; if(options.pluginOptions!=undefined){ pluginOptions = options.pluginOptions; delete(options.pluginOptions); } let ele = this.input(type, name, '', options); ele.checked = checked; if(typeof($)=='function'){ window.setTimeout(()=>{ if(typeof($(ele).iCheck)=='function'){ pluginOptions = this.merge({ checkboxClass: 'icheckbox_square-blue', radioClass: 'iradio_square-blue', increaseArea: '20%' // optional }, pluginOptions); $(ele).iCheck(pluginOptions); } }, 500); } if(label!=''){ let oLabel = this.label(label, '', lableOptions); oLabel.prepend(ele); return oLabel; }else{ return ele; } } static dropDownList(name, selection = '', items = {}, options = {}) { let pluginOptions = {}; if(options.pluginOptions!=undefined){ pluginOptions = options.pluginOptions; delete(options.pluginOptions); } let ele = this.tag('select', '', options); let opts = ''; for(let key in items){ opts += `<option value="${key}">${items[key]}</option>`; } ele.innerHTML = opts; if(options.multiple!=undefined) { if(typeof(selection)=='object') selection = JSON.stringify(selection); selection = selection.replace(/[(.+)]/, '$1') + ','; ele.querySelectorAll('option').forEach((item, i)=>{ if(selection.indexOf(item.getAttribute('value')+',')>-1){ item.selected = true; } }); } else { ele.value = selection; } if(typeof($)=='function'){ window.setTimeout(()=>{ if(typeof($(ele).select2)=='function'){ $(ele).select2(pluginOptions); } }, 500); } return ele; } } export default Html;