js 的捷经

Question

本帖最后由 hetengfei_ 于 2012-02-23 16:55:37 编辑

Answer 1

jquery  extjs很看好的两个，特别是extjs，里面东西只能用非常非常...多来形容,当然，比较复杂些

Answer 2

jquery 和 ext 有很多
http://www.cnblogs.com/cloudgamer/default.html?OnlyTitle=1我经常自己写js.那些库太大，我一个项目的js,自己写才几十k.那些库就比我的所有代码还多了。

Answer 3

建议用jquery
extjs代码较。。

Answer 4

一直想用一个黑夹 子把那些没有用的js 代码 过虚了再发布。
  特别是jquery ，是很好用的，但也有很多用来到的！

Answer 5

用ext js编写完成后，可以用工具生成一个js，这个js中只包含ext js用到的代码

Answer 6

下面是我写的拖动div 在家看看其缺点，（当开源吧！）
文件名：_Drap.js
//  如下用法
// var dr = new _Drap("divClickTest","divMoveTest"); //声明一个对象
//          参数: divClickTest 点击的div
//          参数: divMoveTest  移动的div  通常 是 包住关系   
// dr.F_Drap(); //手动调用它的构造函数。
//------------------------
//// 参数c: 点击的div
//// 参数m: 移动 的div
//------------------------
//可用外部接口如下:
//总开关 开 this.Enable();
//总开关 关 this.Disable();
//X轴可拖 this.EnableX(){;
//X轴不可拖 this.DisableX();
//Y轴可拖 this.EnableY();
//Y轴不可拖 this.DisableY();
//范围设定 this.SetLimit(1,1,1000,700) ;
//使用范围 this.EnableLimit();
//不使用范围 this.DisableLimit();
//设定停靠处。  this.setDockPoint(leftX,leftY,rightX,rightY);
//靠左 this.DockLeft()
//靠右 this.DockRight();
//-
//  事件  class
//-
var _AboutEvent = function(){
//增加 事件 处理function
this.addEventHandler =function (oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
//移除 事件 处理function
this.removeEventHandler = function (oTarget, sEventType, fnHandler) {
if (oTarget.removeEventListener) {
oTarget.removeEventListener(sEventType, fnHandler, false);
} else if (oTarget.detachEvent) {
oTarget.detachEvent("on" + sEventType, fnHandler);
} else { 
oTarget["on" + sEventType] = null;
}
};
//用法
//addEventHandler(document, "mousemove", f1);
//addEventHandler(document, "mouseup", f2);
};//-
// 拖动 _Drap class
//-
var _Drap = function(c,m){
//缓存this
var  _this=this;
this.parpC=c;
this.parpM=m;
// 点击的JQ 对象
this.clickObj;
//移动的JQ 对象
this.moveObj;
//事件对象
this.MoveEvent=new _AboutEvent();
//拖动总开关
this.canBeDrap;
this.canBoDrapX;//X轴可拖
this.canBoDrapY;//Y轴可拖

// 是不是开始范围限定
this.isLimit;
//范围
this.LimitMinX;
this.LimitMaxX;
this.LimitMinY;
this.LimitMaxY;

//标记 是不是正在拖动中
this.IsDraping;
// 整体的大小；
this.width ;
this.height;
this.top;
this.left;
//窗体最大
this.MaxX;
this.MaxY;
//停靠
this.dockDirection;
//靠左时的座标
this.DockLeftX;
this.DockLeftY;
//靠右时的座标
this.DockRightX;
this.DockRightY;
//this.alertMax=function(){return (this.MaxX+":"+this.MaxY);};
//当前鼠标
this.centerX;
this.centerY;
// 上一步鼠标
this.BeforeX;
this.BeforeY;
//移动前鼠标
this.lastX;
this.lastY;
//移动前鼠标差
this.DiffX;
this.DiffY;
// 定时器；
// 拖动 div 跟综 定时器
this.followTimer;
//字符串?JQ对象?DOM 对象?;
//返回JQuery 对象
this.IsDomOrJQuery = function(Para){
//是字符串 id
if(typeof(Para)=="string")
{
return $("#"+Para);
}
//是JQ对象
else if(typeof(Para)=="object") //
{
//"dd".substring(
return Para;
}
else
{
return false;
}
};
//范围设定
this.SetLimit= function(minX,minY,maxX,maxY){
minX = minX?minX:this.LimitMinX;
maxX = maxX?maxX:this.LimitMaxX;
minY = minY?minY:this.LimitMinY;
maxY = maxY?maxY:this.LimitMaxY;
if(maxX-minX> this.width)
{
this.LimitMinX=minX;
this.LimitMaxX=maxX;
}
else
{
alert("maxX-minX> this.width ? false! 设置无效");
}
if(maxY-minY> this.height)
{
this.LimitMinY=minY;
this.LimitMaxY=maxY;
}
else{
alert("maxY-minY> this.height ? false! 设置无效");
}
};

//总开关 开
this.Enable=function(){
this.clickObj.css("cursor","pointer"); //:move;cursor:default;cursor:pointer;
this.canBeDrap=true;
};
//总开关 关
this.Disable=function(){
this.clickObj.css("cursor","default"); //:move;cursor:default;
this.canBeDrap=false;
};
//X轴可拖
this.EnableX = function(){
this.canBoDrapX=true;
};
//X轴不可拖
this.DisableX = function(){
this.canBoDrapX=false;
};
//Y轴可拖
this.EnableY = function(){
this.canBoDrapY=true;
};
//Y轴不可拖
this.DisableY = function(){
this.canBoDrapY=false;
};
// 设有限
this.EnableLimit= function()
{
this.isLimit=true;
this.MoveX();
this.MoveY();

};
// 设无限
this.DisableLimit= function()
{
this.isLimit=false;
};
//设定停靠处。
this.setDockPoint=function(leftX,leftY,rightX,rightY){
//靠左时的座标
if(leftX)
this.DockLeftX=leftX;
if(leftY)
this.DockLeftY=leftY;
//靠右时的座标
if(rightX)
this.DockRightX=rightX;//DockRightX
if(rightY)
this.DockRightY=rightY;
};
//点下鼠标时 触发（有条件 ：构造funtion 动行+总开关 打开）
this.ObjMouseDown = function(ev)
{
if(_this.canBeDrap)
{
_this.clickObj.css("cursor","move");//改变鼠标样式。

//动态添加 跟踪 函数
_this.MoveEvent.addEventHandler(document.body,"mousemove",_this.DocumentMouseMove);
//标记当前状态为 拖动状态
_this.IsDraping= true;
ev = ev || window.event;  // 事件
 //点下时的鼠标座标
_this.BeforeX=_this.lastX=_this.centerX = ev.clientX; 
_this.BeforeY=_this.lastY=_this.centerY = ev.clientY;
//记录 差值：
_this.DiffX=ev.clientX-parseInt(_this.moveObj.css("left"));
_this.DiffY=ev.clientY-parseInt(_this.moveObj.css("top"));
//设定定时器跟综
if(_this.followTimer)
{
clearInterval(_this.followTimer);
}
_this.followTimer= setInterval(function(){
//跟综 函数
if(_this.canBeDrap)
{
//div定位 
_this.SetDivPoint();
}
},80);
//下面可以加下颜色 标记
}
};
//定位处理函数(定位跟踪) \\这里是条件辩断
// \一般由定时器触发\
this.SetDivPoint=function(){
//X轴要不要改变 
if(this.canBoDrapX)//X轴可拖
{
if(this.BeforeX!=this.centerX )
{
this.MoveX();
}
}
//Y轴要不要改变 
if(this.canBoDrapY)//Y轴可拖?
{
if( this.BeforeY!=this.centerY)
{
this.MoveY();
}
}
//X既然 改变了，记录就要跟上
if(this.BeforeX!=this.centerX&&this.canBoDrapX)
{
this.BeforeX=this.centerX;  
}
//Y既然 改变了，记录就要跟上
if( this.BeforeY!=this.centerY&&this.canBoDrapY)
{
this.BeforeY=this.centerY;
}
};
this.MoveX=function(){
if(this.isLimit)//是不是有限定
{
if((this.centerX-this.DiffX) <= this.LimitMinX)
{
this.moveObj.css("left",this.LimitMinX.toString()+"px");
}
else if(this.centerX-this.DiffX+this.width >= this.LimitMaxX)
{
this.moveObj.css("left",(this.LimitMaxX-this.width).toString()+"px");
}
else
{
this.moveObj.css("left",(this.centerX-this.DiffX).toString()+"px");
}
}
else
{
this.moveObj.css("left",(this.centerX-this.DiffX).toString()+"px");
}
};
this.MoveY=function(){
if(this.isLimit)//是不是有限定
{
if(this.centerY-this.DiffY<=this.LimitMinY)
{
this.moveObj.css("top",this.LimitMinY.toString()+"px");
}
else if(this.centerY-this.DiffY+this.height>= this.LimitMaxY)
{
this.moveObj.css("top",(this.LimitMaxY-this.height).toString()+"px");
}
else
{
this.moveObj.css("top",(this.centerY-this.DiffY).toString()+"px");
}
}
else
{
this.moveObj.css("top",(this.centerY-this.DiffY).toString()+"px");
}

};
//鼠标弹起时 触发（有条件 ：构造funtion 运行+总开关 打开）
this.DocumentMouseUp=(function(that){
return (function(ev){
if(that.IsDraping== false)
{
return;
}
that.clickObj.css("cursor","pointer"); //鼠标样式
//标记当前状态为 非拖动状态
that.IsDraping= false;
if(that.followTimer)
{
clearInterval(that.followTimer);
that.followTimer=false;
}
if(that.canBeDrap)
{
//弹起前最后一次定位 
that.SetDivPoint();
}
ev = ev || window.event;  // 事件
that.BeforeX=that.centerX = ev.clientX; 
that.BeforeY=that.centerY = ev.clientY;
//取消(onmousemove) 跟踪 函数
that.MoveEvent.removeEventHandler(document.body,"mousemove",that.DocumentMouseMove);
});
})(this);
//鼠标跟踪
this.DocumentMouseMove = (function(that){
 return (function(ev){
ev = ev || window.event;  // 事件
that.centerX=ev.clientX;
that.centerY=ev.clientY;

//选不中
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
});
})(this);
//靠左
this.DockLeft = function(){
//靠左时的座标
this.moveObj.css("left",this.DockLeftX.toString()+"px");
this.moveObj.css("top",this.DockLeftY.toString()+"px");
this.dockDirection="left";
};
//靠右
this.DockRight = function(){
//靠右时的座标this.width
this.moveObj.css("left",this.DockRightX.toString()+"px");
this.moveObj.css("top",this.DockRightY.toString()+"px");
this.dockDirection="right";
};
//
// 构造 函数； 手动调用
(function(){
if(this.parpC&&this.parpM)
{
//对象 转换(string,Dom,JQuery) ----> JQuery
this.clickObj=this.IsDomOrJQuery(this.parpC);
this.moveObj=this.IsDomOrJQuery(this.parpM);

this.moveObj.css("position","absolute");//只有这个才能拖

this.MoveEvent.addEventHandler(this.clickObj[0],"mousedown",this.ObjMouseDown);
this.MoveEvent.addEventHandler(document.body,"mouseup",this.DocumentMouseUp);
//大小 位置记录
this.width= parseInt(this.moveObj.css("width"));
this.height= parseInt(this.moveObj.css("height"));
this.top= parseInt(this.moveObj.css("top"));
this.left= parseInt(this.moveObj.css("left"));
//
this.MaxX = parseInt($(document.body).css("width"));
this.MaxY = parseInt($(document.body).css("height"));
//范围
this.LimitMinX=0;
this.LimitMaxX=this.MaxX;
this.LimitMinY=0;
this.LimitMaxY=this.MaxY;
//停靠
//靠左时的座标
this.DockLeftX=0;
this.DockLeftY=0;
//靠右时的座标
this.DockRightX=this.MaxX-this.width;//DockRightX
this.DockRightY=0;
//默认停靠方向在右边。
this.dockDirection="right";
}
else
{
alert("请传入要拖动的对象");
}
}).apply(this,arguments);
};_Drap.prototype.canBeDrap=true;// 总开关默认值
_Drap.prototype.IsDraping=false;//标记 是不是正在拖动中
_Drap.prototype.dockDirection="right";//默认停靠方向在右边。
_Drap.prototype.canBoDrapX=true;//X轴可拖
_Drap.prototype.canBoDrapY=true;//Y轴可拖

Answer 7

下面是用法：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>testdrop</title>
<style type="text/css">
#divMoveTest
{
width: 200px;
height: 500px;
top:100px;
left:100px;
margin: 1px;
padding: 1px;
border-color:Green;
border-width:1px;
border-style:solid;
background-color:#e0e0e5;
}
#divClickTest
{
border-color:Yellow;
background-color:#304054;
color:White;
border-width:1px;
border-style:solid;
height:20px;
width:100%;
}
    </style>
<script src="JS/jquery-1.4.2.js" type="text/javascript"></script>
<script src="JS/Drap .js" type="text/javascript"></script>
 <script  type="text/javascript">
$(function(){
var dr = new _Drap("divClickTest","divMoveTest");
});
<script/><body>
    <form id="form1" runat="server">
    <div>

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<div id="divMoveTest">
<div id="divClickTest"></div>
</div>
    </div>
    </form>
</body>
</html>