/*!
* 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. Qt 4.8.2.+VS2008静态编译

    一.下载Qt 4.8.2-opensource. 二.解压到C:\Qt\4.8.2_static 修改C:\Qt\4.8.2_static\projects.pro文件,删除demos,doc,exa ...

  2. 【转载】jdk1.8 LongAdder源码学习

    本文转自https://blog.csdn.net/u011392897/article/details/60480108 LongAdder是jdk8新增的用于并发环境的计数器,目的是为了在高并发情 ...

  3. 数据结构C语言版--单链表的基本功能实现

    /* * 构造一个链式存储的线性表(当输入9999时,结束构造过程),然后输出该线性表 * 并统计该线性链表的长度 . *注:new和delete是C++的运算符 malloc和free是C++/C的 ...

  4. [原创]Network Emulator for Windows Toolkit使用介绍

    [原创]Network Emulator for Windows Toolkit使用介绍 1 Network Emulator for Windows Toolkit简介 微软在window系统下,可 ...

  5. C#轻量级日志监控器EasyLogMonitor

    一.课程介绍 本次分享课程属于<C#高级编程实战技能开发宝典课程系列>中的一部分,阿笨后续会计划将实际项目中的一些比较实用的关于C#高级编程的技巧分享出来给大家进行学习,不断的收集.整理和 ...

  6. ArcGIS10.6的新功能

    ArcMap 10.6 中引入了新的要素和功能,下面的章节将针对这些内容进行介绍. 要查看有关新特性的最新信息,请参阅 ArcMap web 帮助中的相关主题. 地理处理 3D Analyst 工具箱 ...

  7. 如何实现一个Java Class 解析器

    原文出处: tinylcy 最近在写一个私人项目,名字叫做ClassAnalyzer,ClassAnalyzer的目的是能让我们对Java Class文件的设计与结构能够有一个深入的理解.主体框架与基 ...

  8. log4Net 高性能写入和CSV格式

    最近在使用log4net,在使用之前我们必须知道文件流是如何操作的,否则就是盲人摸向...,在FileAppender.cs文件里面有LockingModelBase来控制流的锁,默认有3个子类 Ex ...

  9. TerminateProcess的使用问题

    最好时外部进程来结束目标进程,类似于任务管理器的结束目标进程方式.如果是自身进程想结束自身,可能不同版本的windows行为不一致,有一些能自身强制退出,有一些强制退出不了. 本来MSDN上就说了这个 ...

  10. Python多进程库multiprocessing中进程池Pool类的使用[转]

    from:http://blog.csdn.net/jinping_shi/article/details/52433867 Python多进程库multiprocessing中进程池Pool类的使用 ...