<style type="text/css">
.x-panel {
border-style: solid;
border-width:0;
}
.x-panel {
border-color: #99bbe8;
}
.x-panel-header {
overflow:hidden;
zoom:1;
padding:5px 3px 4px 5px;
border:1px solid;
line-height: 15px;
background: transparent repeat-x 0 -1px;
}
.x-panel-header {
overflow:hidden;
zoom:1;
}
.x-panel-header {
color:#15428b;
font-weight:bold;
font-size: 11px;
font-family: tahoma,arial,verdana,sans-serif;
border-color:#99bbe8;
background-image: url(images/panel/white-top-bottom.gif);
}
.x-unselectable, .x-unselectable * {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select:ignore;
}
.x-tool {
overflow:hidden;
width:15px;
height:15px;
float:right;
cursor:pointer;
background:transparent no-repeat;
margin-left:2px;
}
/* expand / collapse tools */
.x-tool-toggle {
background-position:0 -60px;
}
.x-tool {
background-image:url(images/panel/tool-sprites.gif);
}
.x-panel-bwrap {
overflow:hidden;
zoom:1;
left:0;
top:0;
}
.x-panel-body {
border:1px solid;
border-top:0 none;
overflow:hidden;
position: relative; /* added for item scroll positioning */
}
.x-panel-body {
background-color: #FFFFFF;
border-color: #99BBE8;
}
.x-panel-body {
overflow:hidden;
zoom:1;
}
</style>
/**
2012-7-15
keel全局
*/
keel = {};
(function(){
var ua = navigator.userAgent.toLowerCase();
keel.browser = {
isIE : /msie/.test(ua),
isIE6 : /msie 6/.test(ua),
isIE7 : /msie 7/.test(ua),
isIE8 : /msie 8/.test(ua),
isIE9 : /msie 9/.test(ua),
isChrome : /chrome/.test(ua),
isFirefox : /firefox/.test(ua)
}
keel.checker = {
isObject : function(v){
return v !=null && typeof v === 'object';
},
isArray : function(v){
return Object.prototype.toString.apply(v) === '[object Array]';
},
isEmpty : function(v){
return v === null || v === undefined || v === '';
},
isElement : function(node){
return node.nodeType == 1 ? true : false;
},
isString : function(v){
return typeof v === 'string';
},
isNumber : function(v){
return typeof v === 'nubmber';
},
isNull : function(v){
return v === null;
},
isUndefined : function(v){
return typeof v == "undefined";
},
isFunction : function(v){
return typeof v ==='function';
}
}
/**
继承
function TMap(){
keel.util.Map.call(this);
}
keel.extend(TMap,keel.util.Map);
var map = new TMap();
for(var i=0;i<10;i++){
map.add(i,i);
}
for(var i=0;i<map.length;i++){
document.write(map.get(i)+'<br/>');
}
*/
keel.extend = function(subClazz, superClazz){
var f = function F(){};
var sup = f.prototype = superClazz.prototype;
sup.constructor = subClazz;
subClazz.prototype = sup;
}
keel.onReady = function(fn,scope){
document.onreadystatechange = function() {
if (document.readyState == "complete") {
if(keel.checker.isFunction(fn)){
fn.call(scope||window);
}
}
}
}
})();
/**
keel的工具集合
*/
keel.util = {};
keel.util.Map = function(){
this.map = {};
this.length = 0;
};
keel.util.Map.prototype = {
add : function(key,obj){
if(keel.checker.isEmpty(key)){
return key;
}
this.map[key] = obj;
this.length ++;
return obj;
},
get : function(key){
if(keel.checker.isEmpty(key)){
return key;
}
return this.map[key];
},
remove : function(key){
if(keel.checker.isEmpty(key)){
return key;
}
this.length --;
delete this.map[key];
},
removeAll : function(){
this.length = 0;
this.map = {};
}
};
/**
keel的dom集合
*/
keel.dom = {
isElement : function(node){
return keel.checker.isElement(node);
},
getName : function(node){
return keel.dom.isElement(node) ? node.nodeName : '';
},
/**
var el = keel.dom.createElement('div',{height:200,align:'center',title:'div element',cls:['tc2','tc1']});
*/
createElement : function(){
if(arguments.length==0){
return;
}
var name = arguments[0],
o = arguments[1];
//var df = document.createDocumentFragment();
var element = document.createElement(name);
if(keel.checker.isObject(o)){
for(var k in o){
if(!keel.checker.isEmpty(o[k])){
if(k=='cls'||k=='className'){
keel.dom.addClass(element,o[k]);
}else if(k == 'style'&&keel.browser.isIE){
element.style.cssText = o[k];
}else if(k == 'width'){
element.style.width = keel.checker.isNumber(o[k])? (o[k]+ 'px') : o[k];
}else if(k == 'height'){
element.style.height = keel.checker.isNumber(o[k])? (o[k]+ 'px') : o[k];
}else{
element.setAttribute(k,o[k]);
}
}
}
}
return element;
},
addClass : function(node,className){
if(keel.dom.isElement(node)){
if(keel.checker.isString(className)){
if((' '+node.className+' ').indexOf(' ' + cn + ' ')==-1){
node.className += ' '+className;
}
}else if(keel.checker.isArray(className)){
for(var i=0,len=className.length;i<len;i++){
var cn = className[i];
if(keel.checker.isString(cn) && (' '+node.className+' ').indexOf(' ' + cn + ' ')==-1){
node.className += ' '+className[i];
}
}
}
}
},
removeClass : function(node,className){
var reg = /^\s+|\s+$/g,sp = /\s+/;
if(keel.dom.isElement(node)){
if(!keel.checker.isArray(className)){
className = [className];
}
var oldCls = node.className.replace(reg, '').split(sp);
for(var i=0,len=className.length;i<len;i++){
var cls = className[i];
if (keel.checker.isString(cls)) {
cls = cls.replace(reg, '');
for(var j=0;j<oldCls.length;j++){
if(oldCls[j]==cls){
oldCls.splice(j, 1);
break;
}
}
}
}
node.className = oldCls.join(' ');
}
},
getWidth : function(node){
alert(node.clientWidth);//offsetWidth
}
};
/**
* keel.Element对象
var statusDiv = new keel.Element('status');
statusDiv.addListener('click',function(el,eventType){
alert(el.id);
alert(eventType);
});
*/
keel.Element = function(element){
this.dom = keel.checker.isString(element) ? document.getElementById(element) : element;
this.id = this.dom.id;
}
keel.Element.prototype = {
addListener : function(eventType,callback){
var me = this;
eventType = eventType.toLowerCase();
if (me.dom.addEventListener) {
me.dom.addEventListener(eventType, function(){
callback.call(me,me.dom,eventType);
}, false);
}else if (me.dom.attachEvent) {
me.dom.attachEvent('on' + eventType, function(){
callback.call(me,me.dom,eventType);
});
}
},
removeListener:function (eventType, callback) {
var me = this;
if (me.dom.removeEventListener) {
me.dom.removeEventListener(eventType, function(){
callback.call(me,me.dom,eventType);
}, false);
} else {
if (me.dom.deattachEvent) {
me.dom.detachEvent(eventType, function(){
callback.call(me,me.dom,eventType);
});
} else {
me.dom["on" + eventType] = null;
}
}
}
}
/**
*一般事件
onclick 鼠标点击时触发此事件
ondblclick 鼠标双击时触发此事件
onmousedown 按下鼠标时触发此事件
onmouseup 鼠标按下后松开鼠标时触发此事件
onmouseover 当鼠标移动到某对象范围的上方时触发此事件
onmousemove 鼠标移动时触发此事件
onmouseout 当鼠标离开某对象范围时触发此事件
onkeypress 当键盘上的某个键被按下并且释放时触发此事件.
onkeydown 当键盘上某个按键被按下时触发此事件
onkeyup 当键盘上某个按键被按放开时触发此事件
*页面相关事件
onabort 图片在下载时被用户中断
onbeforeunload 当前页面的内容将要被改变时触发此事件
onerror 出现错误时触发此事件
onload 页面内容完成时触发此事件
onmove 浏览器的窗口被移动时触发此事件
onresize 当浏览器的窗口大小被改变时触发此事件
onscroll 浏览器的滚动条位置发生变化时触发此事件
onstop 浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断
oncontextmenu 当弹出右键上下文菜单时发生
onunload 当前页面将被改变时触发此事件
*表单相关事件
onblur 当前元素失去焦点时触发此事件
onchange 当前元素失去焦点并且元素的内容发生改变而触发此事件
onfocus 当某个元素获得焦点时触发此事件
onreset 当表单中RESET的属性被激发时触发此事件
onsubmit 一个表单被递交时触发此事件
*/
keel.event = {
getEvent:function (event) {
return event || window.event;
},
getTarget:function (event) {
return event.target || event.srcElement;
},
preventDefault:function (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
addListener : function (element, eventType, callback) {
var self = this;
eventType = eventType.toLowerCase();
if (element.addEventListener) {
element.addEventListener(eventType, callback, false);
}else if (element.attachEvent) {
element.attachEvent('on' + eventType, callback);
}
},
removeListener : function (element, eventType, callback) {
eventType = eventType.toLowerCase();
if (element.removeEventListener) {
element.removeEventListener(element, eventType, callback);
}else if (element.detachEvent) {
element.detachEvent('on' + eventType, callback);
}
},
dragdrop : function () {
var dragdrop = new keel.event.EventTarget();
var dragging = null;
var diffX = 0;
var diffY = 0;
function handleEvent(event) {
event = event || window.event;
var target = event.target || event.srcElement;
switch (event.type) {
case "mousedown":
if (target.className.indexOf("draggable") > -1) {
dragging = target;
diffX = event.clientX - target.offsetLeft;
diffY = event.clientY - target.offsetTop;
dragdrop.fire({ type: "dragstart", target: dragging,
x: event.clientX, y: event.clientY
});
}
break;
case "mousemove":
if (dragging !== null) {
event = event || window.event;
dragging.parentNode.style.left = (event.clientX - diffX) + "px";
dragging.parentNode.style.top = (event.clientY - diffY) + "px";
dragdrop.fire({ type: "drag", target: dragging,
x: event.clientX, y: event.clientY
});
}
break;
case "mouseup":
if(dragging !== null){
dragdrop.fire({ type: "dragend", target: dragging,
x: event.clientX, y: event.clientY
});
}
dragging = null;
break;
}
}
dragdrop.enable = function () {
keel.event.addListener(document, "mousedown", handleEvent);
keel.event.addListener(document, "mousemove", handleEvent);
keel.event.addListener(document, "mouseup", handleEvent);
};
dragdrop.disable = function () {
keel.event.removeListener(document, "mousedown", handleEvent);
keel.event.removeListener(document, "mousemove", handleEvent);
keel.event.removeListener(document, "mouseup", handleEvent);
};
return dragdrop;
}
};
keel.event.EventTarget = function(){
this.handlers = {};
};
keel.event.EventTarget.prototype = {
constructor: keel.event.EventTarget,
addHandler: function (type, handler) {
if (typeof this.handlers[type] === "undefined") {
this.handlers[type] = [];
}
this.handlers[type].push(handler);
},
fire: function (event) {
if (!event.target) {
event.target = this;
}
if (this.handlers[event.type] instanceof Array) {
var handlers = this.handlers[event.type];
for (var i = 0, len = handlers.length; i < len; i++) {
handlers[i](event);
}
}
},
removeHandler: function (type, handler) {
if (this.handlers[type] instanceof Array) {
var handlers = this.handlers[type];
for (var i = 0, len = handlers.length; i < len; i++) {
if (handlers[i] === handler) {
break;
}
}
handlers.splice(i, 1);
}
}
};
keel.Panel = function(){
this.width = 100;
this.height = 100;
this.title = 'Panel';
//var df = document.createDocumentFragment();
var div1 = keel.dom.createElement('div',{width:this.width,cls:['x-panel']});
var div2 = keel.dom.createElement('div',{cls:['x-panel-header','x-unselectable']});
var div2_1 = keel.dom.createElement('div',{cls:['x-tool','x-tool-toggle']});
var nbsp = document.createTextNode(' ');
var span = keel.dom.createElement('span',{cls:['x-panel-header-text']});
var title = document.createTextNode(this.title);
var div3 = keel.dom.createElement('div',{style:'overflow:auto;', width: this.width, height: this.height,cls:['x-panel-body']});
//div3.innerHTML = '<p>sadfjsadlkdfjsalkdfj</p>';
var html = document.createTextNode(' sadfjsadlkdfjsalkdfj');
div2_1.appendChild(nbsp);
span.appendChild(title);
div2.appendChild(div2_1);
div2.appendChild(span);
div3.appendChild(html);
div1.appendChild(div2);
div1.appendChild(div3);
//df.appendChild(div1);
document.body.appendChild(div1);
}
|