- // JavaScript Document
- /**
- * @description 用于定位
- * @autor 李洋
- * @date 2012-12-31
- * @email 314087278@qq.com
- */
- /*
- 一、使用说明
- <div id="position">
- <div></div>
- <div></div>
- <div></div>
- </div>
- 1. $("#position").position({"parameter":"200,*,200","direction":"h"});
- 2. $("#position").position({"parameter":"200,*70%,*30%"});
- 3. $("#position").position({"parameter":"200,*,*200","direction":"v"});
- 二、参数说明
- 200 为绝对长度,
- * 为总长度去除绝对长度,
- *200 为相对长度再划分一分绝对长度,
- *70% 为对相对长度去除其中的绝对长度 再划分所占的比例,
- 三、具体使用
- <script language="javascript" src="js/jquery-1.6.1.min.js" type="text/javascript" ></script>
- <script language="javascript" src="js/position-1.0.js" type="text/javascript" ></script>
- <script language="javascript">
- $(document).ready(function(){
- //如果放在BODY下一定要设html,body的width,height为100%,margin为0px.也可用样式写
- $("html,body").CSS({"width":"100%",
- "height":"100%",
- "margin":"0px",
- "padding":"0px"});
- $("#position").position();
- });
- </script>
- */
- //操作对象数组
- var _selObjs=[];
- jQuery.fn.extend({
- position:function(passedOptions){
- //初始化参数
- var options={
- "parameter":"80,*,80",//画分区域及比例
- "direction":"v"//方向 h为水平,v为垂直
- };
- //合并参数
- if ( passedOptions ) {
- jQuery.extend( options, passedOptions );
- }
- //保存对象及参数
- var selObj={
- "obj":this,
- "options":options
- };
- //判断在数组中是否已存在
- var index=-1;
- for(i=0;i < _selObjs.length ; i ++ ){
- if( $(selObj.obj).selector == $( _selObjs[i].obj).selector ){
- index = i;
- break;
- }
- }
- //存在则添加,不存在则替换
- if ( index == -1 ){
- _selObjs.push( selObj );
- }else{
- _selObjs.splice(index,1,selObj);
- }
- var pars = options.parameter.split(',');//参数分解出来
- var parType = new Array(pars.length);//参数类型
- var parTypeVal = [0,0];//绝对长度和,相对绝对长度和
- //解析参数
- for(i = 0 ; i < pars.length ;i ++ ){
- if(pars[i].match(/^[0-9][0-9]*/)){
- parTypeVal[0] += parseInt(pars[i]);
- parType[i]=0;
- }else if(pars[i].match(/^\\*[0-9][0-9]?%$/)){
- parType[i]=2;
- }else if(pars[i].match(/^\\*[0-9][0-9]*/)){
- parTypeVal[1] += parseInt(pars[i].substring(1,pars[i].length));
- parType[i]=1;
- }else if(pars[i].match(/^\\*$/)){
- parType[i]=3;
- }
- }
- //alert("parType: "+parType.join()+" parTypeVal: "+parTypeVal);
- //遍历选择器先选元素
- $.each($(this),function(){
- //如果是唯一的子元素,则设置高宽为100%
- if($(this).parent().children().size()==1){
- $(this).css({"width":$(this).parent().width()+"px",
- "height":$(this).parent().height()+"px"
- });
- }
- //处理定位
- if(options.direction.toLowerCase()=="v"){
- for(i = 0 ; i < pars.length ;i ++ ){
- var height=getLength($(this).height());
- $(this).children().eq(i).css({"width":$(this).width()+"px",
- "height":height+"px",
- "border":"0px",
- "padding":"0px"
- });
- }
- }else {
- if(options.direction.toLowerCase()=="h"){
- for(i = 0 ; i < pars.length ;i ++ ){
- var width=getLength($(this).width());
- $(this).children().eq(i).css({"height":$(this).height()+"px",
- "width":width+"px",
- "float":"left",
- "border":"0px",
- "padding":"0px"
- });
- }
- }
- }
- });
- //计算长度
- function getLength(toLen){
- var len=0;
- switch(parType[i]){
- case 0 :
- len = pars[i];
- break;
- case 1 :
- len = pars[i].substring(1,pars[i].length);
- break;
- case 2 :
- len = (toLen - parTypeVal[0] - parTypeVal[1])*pars[i].substring(1,pars[i].length-1)/100;
- break;
- case 3 :
- len = toLen - parTypeVal[0];
- break;
- }
- return len;
- }
- return $(this);
- }
- });
- //窗口大小变化,则重调整
- $(window.top).resize(function(e){
- if(_selObjs != null){
- $.each(_selObjs,function(i,n){
- $(n.obj).position(n.options);
- });
- }
- });
- //该片段来自于http://www.codesnippet.cn/detail/230120131859.html
来源: http://www.codesnippet.cn/detail/230120131859.html