/*!
* 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;

Html 助手的更多相关文章

  1. Markdown 图片助手-MarkdownPicPicker

    title: Markdown 图片助手 v0.1 toc: true comments: true date: 2016-06-04 16:40:06 tags: [Python, Markdown ...

  2. [C#] 简单的 Helper 封装 -- SecurityHelper 安全助手:封装加密算法(MD5、SHA、HMAC、DES、RSA)

    using System; using System.IO; using System.Security.Cryptography; using System.Text; namespace Wen. ...

  3. 工大助手(C#与python交互)

    工大助手(爬虫--C#与python交互) 基本内容 工大助手(桌面版) 实现登陆.查成绩.计算加权平均分等功能 团队人员 13070046 孙宇辰 13070003 张帆 13070004 崔巍 1 ...

  4. EnumHelper.cs枚举助手(枚举描述信息多语言支持)C#

    C#里面经常会用到枚举类型,枚举是值类型对象,如果你想用枚举类型的多属性特性,或者你想在MVC页面上通过简单的值类型转换,将某字段值所代表的含义转换为文字显示,这时候必须要将枚举扩展,是它支持文本描述 ...

  5. C#远程时间同步助手软件设计

    C#远程时间同步助手软件设计 本程序才C#语言开发,实现远程时间同步功能,可以将本地时间每隔一段时间与时间服务器时间进行同步!不足之处还望见谅! 软件开发环境:Visual Studio 2010 软 ...

  6. 活动助手Beta用户试用报告

    用户试用报告 1.面向参与者用户 1.1 日常参加各类学习(水综测)活动中,有没有遇到以下问题: (1) 信息来源混乱,不知道靠不靠谱 (2) 每次报名都要重新填写自己的学号手机号,有时候填错了就没综 ...

  7. ThinkPHP5 助手函数

    对于ThinkPHP5.0以前的版本,助手函数全部是单字母函数,但到ThinkPHP5之后,使用如下函数来代替单字母函数: 最常用: /** * 实例化Model * @param string $n ...

  8. 谢欣伦 - OpenDev原创例程 - 串口助手Comm Assist

    前一段时间,一位博友发邮件给我.他跟我讲说没太看懂<化繁为简系列原创教程 - 通信专题 - 串口类CxComm的使用>,请我做一个DEMO工程给他.我抽了一天时间编写并上传了一个DEMO工 ...

  9. 微信小程序之ES6与事项助手

    由于官方IDE更新到了0.11.112301版本,移除了对Promise的支持,造成事项助手不能正常运行,解决此问题,在项目中引入第三方兼容库Bluebird支持Promise,代码已经整合到项目代码 ...

  10. 12306订票助手.net版如何抢指定过路某一地点的火车票

    12306订票助手.net版如何抢指定路过某一地点的火车票? 直接举例: 广州到武汉,很多高铁,经过清远,衡阳,郴州,长沙等地.需要从清远上车.操作步骤如下: 1.先查询清远-武汉,打开右下角的自动预 ...

随机推荐

  1. B - 可能的路径(gcd变形)

    https://vjudge.net/contest/218366#problem/B 要不是在数学题专题里,我估计就盲目搜索了.10^18范围1s应该过不去. 再细看能感觉到是gcd的变形,但是具体 ...

  2. 各种组件的js 获取值 / js动态赋值

    jQuery获取Select选择的Text和Value:语法解释:1. $("#select_id").change(function(){//code...});   //为Se ...

  3. 面向对象数据库(Object Oriented Databases)

    前面说几句费话.如今正在从事面向对象数据库在国内的推广工作,假设有兴趣能够与我联系. 假设有不论什么问题能够私信我,也能够到我们站点上 面向对象数据库交流社区 来向我提问,我一定以最快的速度解答. 想 ...

  4. 微信小程序的同步操作

    小程序里,大多数操作都是异步操作,一些重要的操作,如从网上获取重要变量值,必须要保证有值,后续操作才有意义.但异步操作,又必须把处理放到回调中,代码可读性降低,而且和大多数正常逻辑相背. 折腾了两天, ...

  5. OAuth 2和JWT - 如何设计安全的API?

    OAuth 2和JWT - 如何设计安全的API? Moakap译,原文 OAuth 2 VS JSON Web Tokens: How to secure an API 本文会详细描述两种通用的保证 ...

  6. C#中使用log4net框架做日志输出

    一.用法 1.引入包:https://www.nuget.org/packages/log4net/ 2.Main函数 using System; using System.IO; using log ...

  7. MySql之触发器的使用

    一:触发器的使用场景 当数据库的记录发生变化时,自动触发某些操作. MySQL的触发器响应三种操作,六种场合: 三种操作:DELETE.INSERT.UPDATE. 六种场合:三种操作的BEFORE. ...

  8. [BetterExplained]为什么你应该(从现在开始就)写博客

    (一)为什么你应该(从现在开始就)写博客 用一句话来说就是,写一个博客有很多好处,却没有任何明显的坏处.(阿灵顿的情况属于例外,而非常态,就像不能拿抽烟活到一百岁的英国老太太的个例来反驳抽烟对健康的极 ...

  9. Easyui的DataGrid 清除所有勾选的行。

    $('#grid').datagrid('clearChecked')='none';//清除所有勾选的行.

  10. tensorflow 笔记7:tf.concat 和 ops中的array_ops.concat

    用于连接两个矩阵: mn = array_ops.concat([a, d], 1) #  按照第二维度相接,shape1 [m,a] shape2 [m,b] ,concat_done shape ...