jquery调整大小(resizable)-乐山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

jquery调整大小(resizable)

看着jquery的大小收缩，自己也尝试写了一个，其实就是增加了三个div来控制大小。

目前创新互联公司已为上1000+的企业提供了网站建设、域名、虚拟空间、绵阳服务器托管、企业网站设计、郴州网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

jquery调整大小(resizable) 效果图

 
 
 
 
resizable 
 
body{    
  -moz-user-focus:ignore;    
  -moz-user-input:disabled;    
  -moz-user-select:none;    
}      
.ui-resizable-bd{ 
    background:none; 
    position: absolute; 
    z-index: 1000; 
} 
.ui-resizable-bd-east{ 
    cursor: e-resize; 
} 
.ui-resizable-bd-south{ 
    cursor: s-resize; 
} 
.ui-resizable-bd-corner{ 
    width:16px; 
    height:16px; 
    cursor: nw-resize; 
/*  右下角小图标 */ 
    background: url(p_w_picpaths/resizable.JPG) no-repeat;  
}

/**

* jquery resizable

* @author huxiaoqi

(function($){

$.fn.resizable = function(cfg){

var self = $(this);

var BD_E = $("

");

var BD_S = $("

");

var BD_SE = $("

");

var WIDTH = self.width();

var HEIGHT = self.height();

var pos = self.offset();

var BD_WIDTH = 3; //default border width

var documentObj = $(document);

var bodyObj = $('body',documentObj);

* 定义缩放最小值

var _default = {

minwidth:50,

minheight:50

};

var config = $.extend({},_default,cfg);

//放入节点

BD_E.insertAfter(self);

BD_S.insertAfter(self);

BD_SE.insertAfter(self);

setBDPos(WIDTH, HEIGHT, pos.left, pos.top);

documentObj.bind({

'mousedown':function(e){

if(isBD(e.target)){

var currentTarget = e.target;

var className = currentTarget.className;

documentObj.bind('mousemove',function(e){

pos = self.offset();

WIDTH = self.width();

HEIGHT = self.height();

var width = e.pageX - pos.left;

var height = e.pageY - pos.top;

if(className.indexOf('bd-east') != -1){

* east border

if(width > config.minwidth ){

self.width(width);

setBDPos(width, HEIGHT, pos.left, pos.top);

}

bodyObj.css('cursor','e-resize');

}

else if(className.indexOf('bd-south') != -1){

* south border

if(height > config.minheight ){

self.height(height);

setBDPos(WIDTH, height, pos.left, pos.top);

}

bodyObj.css('cursor','s-resize');

}

else if(className.indexOf('bd-corner') != -1){

* south-east border

if(width > config.minwidth && height > config.minheight){

self.width(width);

self.height(height);

setBDPos(width, height, pos.left, pos.top);

}

bodyObj.css('cursor','se-resize');

}

});

}

'mouseup':function(e){

documentObj.unbind('mousemove');

bodyObj.css('cursor','default');

}

});

//get border position

function setBDPos(w,h,l,t){

BD_E.css({'width':BD_WIDTH,'height':h,'left':l+w,'top':t});

BD_S.css({'width':w,'height':BD_WIDTH,'top':t+h,'left':l});

BD_SE.css({'left':l+w-BD_SE.width(),'top':t+h-BD_SE.height()});

};

//justify target is border ?

function isBD(target){

if(target && target.className){

return target.className.indexOf('ui-resizable-bd') != -1;

}

return false;

}

};

})(jQuery);

$('#demo').resizable();

当前文章：jquery调整大小(resizable)
链接URL：http://lswzjz.com/article/pijosj.html

新闻中心

其他资讯