HBUI框架更新
此篇文章用于记录一下。
hbui.js 核心js文件
(function(window,document) {
"use strict";
/*HBUI主体*/
function HBUI(){
if(typeof window.hbui === "undefined"){
var _HBUI = {
/*必要信息*/
opt:{
vertion : "V0.1",
component : ["button"],
reservedWord : {
componentName:["hbui","HBUI","hbuiButton","HBUIBUTTON"],
eventName:["onclick","onchange","onmouseover","onmouseout","onfocus","onblur","onmousemove","onmouseup","onmousedown","onload","onkeydown","click","change","load"],
},
path : "",
},
/*初始化*/
init:function(){
this.opt.path = this.getjspath("hbui.js");
/*加载hbui组件*/
for(var i = 0; i < this.opt.component.length; i++){
var _winname = "hbui"+ this.opt.component[i][0].toUpperCase() + this.opt.component[i].substr(1);
if(typeof window[_winname] !== "undefined")continue;
var _jsname = "parts/component/hb-" + this.opt.component[i] + ".js";
this.loadjs(_jsname);
}
/*加载css文件*/
this.loadcss("hbui.css");
return this;
},
/*获取js路径*/
getjspath:function(jsname){
var _js = document.scripts;
var _jsPath;
for(var i = _js.length; i > 0; i--){
if(_js[i-1].src.indexOf(jsname) > -1){
_jsPath = _js[i - 1].src.substring(0, _js[i - 1].src.lastIndexOf("/") + 1);
return _jsPath;
}
}
},
/*加载css*/
loadcss:function(url){
var jsPath = this.opt.path;
url = jsPath + "../css/" + url;
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = url;
head.appendChild(link);
},
/*加载js*/
loadjs:function(url, v = null){
if(url == "hbui.js")return;
if(v == null){
v = 0;
}
else if(v == -1){
v = Math.random();
}
var jsPath = this.opt.path;
document.write('<script src="' + jsPath + url + '?v=' + v + '" type="text/javascript"></script>');
},
//模板调用
module:function(type){
var _type = this.opt.component.indexOf(type);
if( _type != -1){
var _objname = window["hbui"+ this.opt.component[_type][0].toUpperCase() + this.opt.component[_type].substr(1)];
if(typeof _objname !== "undefined"){
return _objname;
}
}
else{
if(_type != -1)alert("no component");
if(typeof window["hbui"+ this.opt.component[_type][0].toUpperCase() + this.opt.component[_type].substr(1)] !== "undefined")alert("already have but not found");
return null;
}
},
issave:function(str){
if(this.opt.reservedWord.componentName.indexOf(str) == -1 && this.opt.reservedWord.eventName.indexOf(str) == -1){
return true;
}
return false;
},
addEvent:function(str){
if(this.issave(str)){
window[str] = new Event(str);
this.opt.reservedWord.eventName.push(str);
return true;
}
return false;
},
hasClass:function(target,cls){
cls = cls || '';
if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时，返回false
return new RegExp(' ' + cls + ' ').test(' ' + target.className + ' ');
},
addClass:function(target,cls){
if(!this.hasClass(target,cls)){
target.className += ' ' + cls;
}
return this;
},
removeClass:function(target,cls){
if(this.hasClass(target,cls)){
var newClass = ' ' + target.className.replace(/[\t\r\n]/g, '') + ' ';
while (newClass.indexOf(' ' + cls + ' ') >= 0) {
newClass = newClass.replace(' ' + cls + ' ', ' ');
}
target.className = newClass.replace(/^\s+|\s+$/g, '');
}
return this;
},
isDom:function(target){
return (typeof HTMLElement === 'function')
? (target instanceof HTMLElement)
: (target && (typeof target === 'object') && (target.nodeType === 1) && (typeof target.nodeName === 'string'));
},
getParentNode:function(target){
if(!this.isDom(target))return target;
return target.parentNode;
},
};
return _HBUI;
}
else{
return window.HBUI;
}
}
HBUI.prototype = {
}
//HBUI
if(typeof window.hbui === "undefined"){
window.hbui = window.HBUI = HBUI().init();
}
})(window,document,undefined);
hb-button.js hbui的button组件js
(function(window,document) {
"use strict";
/*HBUIBUTTON主体*/
function HBUIBUTTON(type = null){
if(typeof window.hbuiButton === "undefined"){
var _HBUIButton = {
/*必要信息*/
opt:{
vertion : "V0.1",
name:"button"
},
/*初始化*/
init:function(){
if(!this.isfeasible())return this;
var _bind_switch = function(){
var _hb_btn = document.getElementsByClassName('hb-btn');
for(var i = 0; i < _hb_btn.length; i++){
var hb_btn_switch = _hb_btn[i].getAttribute("hb-switch");
if(hb_btn_switch == "check" && !HBUI.hasClass(_hb_btn[i],"checked")){
HBUI.addClass(_hb_btn[i],"unchecked");
}
_hb_btn[i].onclick = function(){
var _hb_btn_switch = this.getAttribute("hb-switch");
switch(_hb_btn_switch){
case "button":
if(HBUI.hasClass(this,"active")){
HBUI.removeClass(this,"active");
}
else{
HBUI.addClass(this,"active");
}
break;
case "check":
if(HBUI.hasClass(this,"checked")){
HBUI.removeClass(this,"checked").addClass(this,"unchecked");
}
else{
HBUI.addClass(this,"checked").removeClass(this,"unchecked");
}
default:
break;
}
};
}
};
window.addEventListener('load',_bind_switch);
return this;
},
/*绑定事件*/
bind:function(target,event,func){
target.addEventListener(event,func);
},
addEvent:function(e_name){
if(!this.isfeasible())return;
if(typeof e_name == "string" && HBUI.issave(e_name)){
HBUI.addEvent(e_name);
}
},
isfeasible:function(){
if(typeof window.hbui === "undefined"){
return false;
}
return true;
}
};
return _HBUIButton;
}
else{
return hbuiButton;
}
}
HBUIBUTTON.prototype = {
}
//HBUI
if(typeof window.hbuiButton === "undefined"){
window.hbuiButton = window.HBUIBUTTON = HBUIBUTTON().init();
}
})(window,document,undefined);
暂时没有别的了~
4194
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
