JavaScript对象 function activeDiv(){
this.postion='center';
this.width=300;
this.height=200; }
activeDiv.prototype.drag = function(){
alert('拖动');
}
现在我就是想通过
var obj=new activeDiv();
创建一个JavaScript对象（相当于一个div）
document.body.appendchild(obj);
添加到页面上，并且可以实现drag方法，比如点击时调用。
目前一点思路都没，希望兄弟们帮帮忙！有什么好的方法介绍下。
this.postion='center';
this.width=300;
this.height=200; }
activeDiv.prototype.drag = function(){
alert('拖动');
}
现在我就是想通过
var obj=new activeDiv();
创建一个JavaScript对象（相当于一个div）
document.body.appendchild(obj);
添加到页面上，并且可以实现drag方法，比如点击时调用。
目前一点思路都没，希望兄弟们帮帮忙！有什么好的方法介绍下。
而 var obj=new activeDiv();中返回的是js对象，显然类型不匹配
<script type="text/javascript">function activeDiv(){
this.postion='absolute';
this.width=300;
this.height=200;
this.backgroundColor = "red";
}activeDiv.prototype.drag = function(){
alert('拖动');
}function doit(){
var div = document.createElement("div");
div.style.postion = this.postion;
div.style.width = this.width;
div.style.height = this.height;
div.style.backgroundColor = this.backgroundColor;
div.innerHTML = "xxxxx";
div.ondragstart = this.drag;
return div;
}window.onload=function(){
var obj=new activeDiv();
document.body.appendChild(doit.call(obj));
}
</script>
var div = document.createElement("div");
div.style.postion = this.postion;
div.style.width = this.width;
div.style.height = this.height;
div.style.backgroundColor = this.backgroundColor;
div.innerHTML = "xxxxx";
div.ondragstart = this.drag;
return div;
}window.onload=function(){
var obj=new activeDiv();
document.body.appendChild(doit.call(obj));
}
是不是改成
function doit(obj){
var div = document.createElement("div");
div.style.postion = obj.postion;
div.style.width = obj.width;
div.style.height = obj.height;
div.style.backgroundColor = obj.backgroundColor;
div.innerHTML = "xxxxx";
div.ondragstart = obj.drag;
return div;
}window.onload=function(){
var obj=new activeDiv();
document.body.appendChild(doit(obj));
}
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test</title>
<style type="text/css">
.div{height:160px;width:160px;position:absolute; text-align:center; border:1px solid #96C2F1;background-color:#EFF7FF;}
</style>
</head>
<body>
<input type='button' value='xxxxx' onclick='xx()'>
<script type="text/javascript">
(function(window,undefined){
window.Sys = function (ua){
var b = {
ie: /msie/.test(ua) && !/opera/.test(ua),
opera: /opera/.test(ua),
safari: /webkit/.test(ua) && !/chrome/.test(ua),
firefox: /firefox/.test(ua),
chrome: /chrome/.test(ua)
},vMark = "";
for (var i in b) {
if (b[i]) { vMark = "safari" == i ? "version" : i; break; }
}
b.version = vMark && RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0";
b.ie6 = b.ie && parseInt(b.version, 10) == 6;
b.ie7 = b.ie && parseInt(b.version, 10) == 7;
b.ie8 = b.ie && parseInt(b.version, 10) == 8;
return b;
}(window.navigator.userAgent.toLowerCase());window.Sys.ie6&&document.execCommand("BackgroundImageCache", false, true);window.$ = function(Id){
return document.getElementById(Id);
};
window.addListener = function(element,e,fn){
!element.events&&(element.events = {});
element.events[e]&&(element.events[e][addListener.guid++]=fn)||(element.events[e] = {'0':fn});
element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn);
};
window.addListener.guid = 1;
window.removeListener = function(element,e,fn){
var handlers = element.events[e],type;
if(fn){
for(type in handlers)
if(handlers[type]===fn){
element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn);
delete handlers[type];
}
}else{
for(type in handlers){
element.removeEventListener?element.removeEventListener(e,handlers[type],false):element.detachEvent("on" + e,handlers[type]);
delete handlers[type];
}
}
};window.currentStyle = function(element){
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
};var slice = Array.prototype.slice;
window.Bind = function(object, fun) {
var args = slice.call(arguments).slice(2);
return function() {
return fun.apply(object, args);
};
};
window.BindAsEventListener = function(object, fun,args) {
var args = slice.call(arguments).slice(2);
return function(event) {
return fun.apply(object, [event || window.event].concat(args));
}
};
window.extend = function(){
var target = arguments[0] || {}, i = 1, length = arguments.length, deep = true, options;
if ( typeof target === "boolean" ) {
deep = target;
target = arguments[1] || {};
i = 2;
}
if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[object Function]")
target = {};
for(;i<length;i++){
if ( (options = arguments[ i ]) != null )
for(var name in options){
var src = target[ name ], copy = options[ name ];
if ( target === copy )
continue;
if ( deep && copy && typeof copy === "object" && !copy.nodeType ){
target[ name ] = arguments.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy );
}
else if(copy !== undefined)
target[ name ] = copy;
}
}
return target;
};
window.each = function ( object, callback, args ) {
var name, i = 0, length = object.length;
if ( args ) {
args = Array.prototype.slice.call(arguments).slice(2);
if ( length === undefined ) {
for ( name in object )
if ( callback.apply( object[ name ],[name,object[ name ]].concat(args) ) === false )
break;
} else
for ( ; i < length; i++)
if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false ) //
break;
} else {
if ( length === undefined ) {
for ( name in object )
if ( callback.call( object[ name ], name, object[ name ] ) === false )
break;
} else
for ( var value = object[0];
i < length && callback.call( value, i, value ) !== false; value = object[++i] ){}
}
return object;
};
})(window);function test(options){
var obj = {},div = document.createElement('div');
div.className ='div';
extend(obj,arguments.callee.prototype,options||{}); div.style.top=obj.top+'px';
div.style.left=obj.left+'px';
obj.drag.init(div)
return div;
}
test.prototype={
drag :{
elem : null,
zindex : 0,
options : {},
init : function(){
each(arguments,function(i,elem,oThis){
addListener(elem,'mousedown',BindAsEventListener(oThis,oThis.start,elem));
},this);
},
start : function(e,elem){
var elem=this.elem = elem;
elem.style.zIndex=++this.zindex;
this.x = e.clientX - elem.offsetLeft ;
this.y = e.clientY - elem.offsetTop;
this.marginLeft = parseInt(currentStyle(elem).marginLeft)||0;
this.marginTop = parseInt(currentStyle(elem).marginTop)||0;
Sys.ie?elem.setCapture():e.preventDefault();
addListener(document,"mousemove",BindAsEventListener(this,this.move));
addListener(document,"mouseup",Bind(this,this.up));
this.options.callbackmove&&this.options.callbackmove(this.elem);
},
move : function(e){
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
var iLeft = e.clientX - this.x,iTop = e.clientY - this.y;obj = this.elem;
obj.style.left = iLeft - this.marginLeft + "px";
obj.style.top = iTop - this.marginTop + "px";
this.options.callbackmove&&this.options.callbackmove(this.elem);
},
up : function(){
removeListener(document,'mousemove');
removeListener(document,'mouseup');
Sys.ie&&this.elem.releaseCapture();
this.options.callbackup&&this.options.callbackup(this.elem);
}
}
}
var t=l=100;
function xx(){
document.body.appendChild(new test({left:l,top:t}))
l=t=t+20;}
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>new document</title>
<script type="text/javascript">
function activeDiv(){
var div = document.createElement("div"), self = this;
div.style.cssText = "position:absolute; width:300px; height:200px; left:100px;top:100px; border:1px solid #006699; background:#f5f6fb;";
div.onclick = function(){
self.drag();
};
this.element = div;
}
activeDiv.prototype.drag = function(){
alert("drag");
};
window.onload = function(){
var drag = new activeDiv();
document.body.appendChild(drag.element);
};
</script>
</head>
<body></body>
</html>
比如开发一个输入框控件：
<body>
<div class="input"></div>
</body>
在这里用<div class="input"></div>表示一个输入框控件。站在平台的角度怎么做呢，就是通过window.onload事件，用js动态地往页面增加标签，最后达到这样的效果：
<body>
<div class="input">
<input type="input" />
</div>
</body>
这就是做控件，这也是jQueryUI的思想。不知道我有没有说清楚。