七分地 » javascript http://www.qifendi.com soncy的七分责任田，种点瓜果蔬菜和杂草 Sun, 22 Aug 2010 13:24:38 +0000 en hourly 1 http://wordpress.org/?v=3.1.2 JS分组切换内容并标识状态 http://www.qifendi.com/html/y2010/js-packet-switch-content-and-identity-status.html http://www.qifendi.com/html/y2010/js-packet-switch-content-and-identity-status.html#comments Fri, 23 Apr 2010 05:59:07 +0000 soncy http://www.qifendi.com/?p=861 [......]

]]> 大概需要实现的效果：调用部分：

var ftimg = new ImgChange({
	prev : "prev",//上一组按钮ID
	next : "next",//下一组按钮ID
	listIco : "list",//状态小圆点ID
	icoEl : "li",//小圆点标签
	conent : "content",//需要切换的内容区ID
	clist : "list",//切换区每组的class值
	disabled : "disabled",//按钮无效后需要添加的className
	active : "active"//小圆点激活时的className
});

HTML部分（可以发挥想象随意更改）：

<div id="prev">上一组</div>
<ul id="list">
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>
<div id="next">下一组</div>
<div id="content">
	<div class="list">第一组</div>
	<div class="list">第二组</div>
	<div class="list">第三组</div>
</div>

CSS部分也可以发挥想象随意创造。 JS部分(代码中&lt;为”<"符号，被插件转成这个了)：

function ImgChange(setting){
	if(!setting){
		alert("要使用该功能，请正确传入参数！");
		return;
	}
	this._prev = setting.prev;
	this._next = setting.next;
	this._listIco = setting.listIco;
	this._icoEl = setting.icoEl;
	this._conent = setting.conent;
	this._clist = setting.clist;
	this.nowGroup = 1;//当前第几组
	this.allGroups = 1;//一共多少组
	this._disabled = setting.disabled;
	this._active = setting.active;
	this.load();
}
 
ImgChange.prototype.load = function(){
	var $cs = function(el){
		return document.getElementById(el);
	}
	this._contents = $cs(this._conent).getElementsByTagName("*");
	this._groups = [];
	for(var i = 0;i &lt; this._contents.length;i++){
		if(this._contents[i].className == this._clist){
			this._groups.push(this._contents[i]);
		}
	}
	this.allGroups = this._groups.length;
	this._nextEl = $cs(this._next);
	this._prevEl = $cs(this._prev);
	this._status = $cs(this._listIco).getElementsByTagName(this._icoEl);
	this.regEvent();
};
 
ImgChange.prototype.hideAll = function(){
	for(var i = 0;i &lt; this._groups.length;i++){
		this._groups[i].style.display = "none";
	}
};
 
ImgChange.prototype.reStatus = function(){
	if(this.nowGroup &gt;= this.allGroups){
		this.addCss(this._nextEl,this._disabled);
	}else{
		this.removeCss(this._nextEl,this._disabled);
	}
 
	if(this.nowGroup &lt;= 1){
		this.addCss(this._prevEl,this._disabled);
	}else{
		this.removeCss(this._prevEl,this._disabled);
	}
 
	for(var i = 0;i &lt; this._status.length;i++){
		this.removeCss(this._status[i],this._active);
	}
 
	this.hideAll();
	this._groups[this.nowGroup -1].style.display = "block";
	this.addCss(this._status[this.nowGroup - 1],this._active);
};
 
 
ImgChange.prototype.regEvent = function(){
	var self = this;
	if(window.addEventListener){
		self._nextEl.addEventListener("click" , function(event){
			self.next();
		},false);
		self._prevEl.addEventListener("click" , function(event){
			self.prev();
		},false);
 
	}else{
		self._nextEl.attachEvent("onclick" , function(event){
			self.next();
		});
		self._prevEl.attachEvent("onclick" , function(event){
			self.prev();
		});
	}
 
 
	for(var i = 0; i &lt; this._status.length;i++){
		var _st = this._status[i];
		if(window.addEventListener){
			_st.addEventListener("click" , function(idx){
				return function(event){
					self.nowGroup = idx + 1;
					self.reStatus();
				}
 
			}(i),false);
		}else{
			_st.attachEvent("onclick" , function(idx){
				return function(event){
					self.nowGroup = idx + 1;
					self.reStatus();
				}
			}(i));
		}
	}
};
 
 
ImgChange.prototype.next = function(){
	if(this.nowGroup &gt;= this.allGroups) return;
	this.nowGroup ++;
	this.reStatus();
};
 
ImgChange.prototype.prev = function(){
	if(this.nowGroup &lt;= 1) return;
	this.nowGroup --;
	this.reStatus();
};
 
 
ImgChange.prototype.addCss = function(element,cssName){ 
	var element,cssName; 
	if (!element.className || element.className == cssName){ 
		element.className = cssName; 
	} 
	else{ 
		element.className = element.className + " " + cssName; 
	} 
};
 
ImgChange.prototype.removeCss = function(element,cssName){ 
	var element,cssName; 
	var oldCss = element.className; 
	var cssList = oldCss.split(" "); 
	for(var i = 0;i &lt; cssList.length;i++){ 
		if (cssList[i] == cssName) { 
			cssList[i] = ""; 
			break; 
		} 
	} 
	element.className = cssList.join(" "); 
};

演示：

提示：你可以先修改部分代码再运行。

]]> http://www.qifendi.com/html/y2010/js-packet-switch-content-and-identity-status.html/feed 3 javascript+css模拟下拉框(更新) http://www.qifendi.com/html/y2010/javascript-css-simulated-drop-down-box-update.html http://www.qifendi.com/html/y2010/javascript-css-simulated-drop-down-box-update.html#comments Sat, 13 Mar 2010 10:08:24 +0000 soncy http://www.eyike.com/?p=430 javascript+css模拟下拉框，但是代码太难看了，所以重写了一下代码：
  1. Function.prototype.method = function(name,func){
  2.     if(!this.prototype[name]){
  3.         this.prototype[name] = func;
  4.     }
  5. };
[......]

]]> 前面写了一个javascript+css模拟下拉框，但是代码太难看了，所以重写了一下代码：

  1. Function.prototype.method = function(name,func){
  2.     if(!this.prototype[name]){
  3.         this.prototype[name] = func;
  4.     }
  5. };
  6.  
  7.  
  8. function CsSelect(_data,_element){
  9.     this._element = _element;
  10.     if(typeof _element == "string"){
  11.         this._element = document.getElementById(_element);
  12.     }
  13.     this._value = "";
  14.     this.data = _data;
  15.              this.change = function(){};//下拉框选取值更改，外部重定义
  16.     this._closeEventStatus = false;
  17.     this._selectEventStatus = false;
  18.     this._create();
  19. }
  20.  
  21. //创建下拉框DOM
  22. CsSelect.method("_create",function(){
  23.     var self = this;
  24.     if(typeof this.data == "undefined" || this.data.length < 1) return;
  25.     var _htmlArr = [];
  26.  
  27.     this._CsSelect = document.createElement("div");
  28.     this._CsSelect.className = "csSelect";
  29.  
  30.     this._CsStitle = document.createElement("div");
  31.     this._CsStitle.className = "csStitle";
  32.  
  33.     this._CsStitle.innerHTML = this.data[0][1];
  34.     this._element.value = this.data[0][0];
  35.  
  36.     this._CsSelect.appendChild(this._CsStitle);
  37.     this._CsSlist = document.createElement("ul");
  38.     this._CsSlist.className = "csSlist";
  39.  
  40.     for(var i =0;i < self.data.length;i++){
  41.         var _tempData = self.data[i];
  42.         var _optValue = _tempData[0];//获取value值
  43.         var _optText = _tempData[1];//获取text值
  44.         _htmlArr.push('<li><a href="#" value="');
  45.         _htmlArr.push(_optValue);
  46.         _htmlArr.push('">');
  47.         _htmlArr.push(_optText);
  48.         _htmlArr.push('</a></li>');
  49.     }
  50.  
  51.     this._CsSlist.innerHTML = _htmlArr.join("");
  52.     this._CsSelect.appendChild(this._CsSlist);
  53.  
  54.     this._element.style.display = "none";
  55.     this._insertAfter(this._CsSelect,this._element);
  56.  
  57.  
  58.     //事件注册
  59.     self._CsStitle.onclick = this._selfClick();
  60.    
  61. });
  62.  
  63.  
  64. //点击展开和收起
  65. CsSelect.method("_selfClick",function(){
  66.     var self = this;
  67.     return function(){
  68.         var _CsSlist = self._CsSlist;
  69.  
  70.         var _Clist = document.getElementsByTagName("ul");
  71.  
  72.         for(var i = 0;i < _Clist.length;i++){
  73.             if(_Clist[i].className.indexOf("csSlist") > -1 && _Clist[i] != self._CsSlist){
  74.                 _Clist[i].style.display = "none";
  75.             }
  76.         }
  77.  
  78.         if(_CsSlist.style.display != "block"){
  79.             _CsSlist.style.visibility = "hidden";
  80.             _CsSlist.style.display = "block";
  81.  
  82.             if(_CsSlist.offsetHeight > 200){
  83.                 _CsSlist.style.height = "200px";
  84.             }
  85.  
  86.             _CsSlist.style.visibility = "inherit";
  87.         }else{
  88.             _CsSlist.style.display = "none";
  89.             _CsSlist.style.height = "auto";
  90.         }
  91.  
  92.          self._select();
  93.          self._closeEvent();
  94.     }
  95. });
  96.  
  97.  
  98. //选择下拉框内容
  99. CsSelect.method("_select",function(){
  100.     if(this._selectEventStatus) return;
  101.     var self = this;
  102.     var _csList = this._CsSlist.getElementsByTagName("a");
  103.     for(var i = 0;i < _csList.length;i ++){
  104.         _csList[i].onclick = function(event){
  105.             var ev = event || window.event;
  106.             var el = ev.srcElement || ev.target;
  107.             self._CsStitle.innerHTML = el.innerHTML;
  108.             self._element.value = el.getAttribute("value");
  109.             self._CsSlist.style.display = "none";
  110.             self.change();
  111.             return false;
  112.         }
  113.     }
  114.     this._selectEventStatus = true;
  115. });
  116.  
  117.  
  118.  
  119.  
  120. CsSelect.method("_insertAfter",function(newElement,targetElement){
  121.     var parent = targetElement.parentNode;
  122.     if(parent.lastChild == targetElement){
  123.         parent.appendChild(newElement);
  124.     }else{
  125.         parent.insertBefore(newElement,targetElement.nextSibling);
  126.     }
  127. });
  128.  
  129.  
  130. //隐藏组件
  131. CsSelect.method("hide",function(){
  132.     this._CsSelect.style.display = "none";
  133. });
  134.  
  135. //显示组件
  136. CsSelect.method("show",function(){
  137.     this._CsSelect.style.display = "block";
  138. });
  139.  
  140.  
  141. //设置下拉框默认显示项
  142. CsSelect.method("setValue",function(value){
  143.     var _idx = 0;
  144.     for(var i = 0;i < this.data.length;i++){
  145.         if(this.data[i].join("").indexOf(value) > -1){
  146.             _idx = i;
  147.         }
  148.     }
  149.     this._CsStitle.innerHTML = this.data[_idx][1];
  150.     this._element.value = this.data[_idx][0];
  151. });
  152.  
  153.  
  154. //获取下拉框当前值
  155. CsSelect.method("getValue",function(){
  156.     return this._element.value;
  157. });
  158.  
  159. //点击除下拉框的其他地方，收起下拉框
  160. CsSelect.method("_closeEvent",function(){
  161.  
  162.     if(this._closeEventStatus) return;
  163.  
  164.     if(window.addEventListener){ 
  165.         document.addEventListener("click" , function(event){
  166.             var ev = event || window.event;
  167.             var el = ev.srcElement || ev.target;
  168.             if(el.className == "csStitle") return;
  169.             var _Clist = document.getElementsByTagName("ul");
  170.             for(var i = 0;i < _Clist.length;i++){
  171.                 if(_Clist[i].className.indexOf("csSlist") > -1){
  172.                     _Clist[i].style.display = "none";
  173.                 }
  174.             }
  175.         },false);
  176.     }else{
  177.         document.attachEvent("onclick" , function(event){
  178.             var ev = event || window.event;
  179.             var el = ev.srcElement || ev.target;
  180.             if(el.className == "csStitle") return;
  181.             var _Clist = document.getElementsByTagName("ul");
  182.             for(var i = 0;i < _Clist.length;i++){
  183.                 if(_Clist[i].className.indexOf("csSlist") > -1){
  184.                     _Clist[i].style.display = "none";
  185.                 }
  186.             }
  187.         });
  188.     }
  189.  
  190.     this._closeEventStatus = true;
  191. });
]]> http://www.qifendi.com/html/y2010/javascript-css-simulated-drop-down-box-update.html/feed 1 NetBeans初体验&&自用配色 http://www.qifendi.com/html/y2010/netbeans.html http://www.qifendi.com/html/y2010/netbeans.html#comments Sat, 13 Mar 2010 05:12:52 +0000 soncy http://www.eyike.com/?p=421 NetBeans，就去找了一下，NetBeans是一个功能丰富的IDE，支持JAVA,PHP,Ruby等，下了一个for php的版本，安装的时候提示没有安装JDK或者JRE，按照官方网站的说明作好所有准备工作后，然后开始安装，最新版的NetBeans已经支持JS了。 安装完后发现编辑器默认的代码的字体和配色都不是自己想要的，于是自己动手改改吧，先改成了consolas，结果中文字显示不出来了，只好找了一个中英文都有的字体，yahei consolas hybrid，然后动手调了调配色，已经习惯了黑底的代码环境了。[......]

]]> 前两天寻找zend studio的时候无意中看到有人提到NetBeans，就去找了一下，NetBeans是一个功能丰富的IDE，支持JAVA,PHP,Ruby等，下了一个for php的版本，安装的时候提示没有安装JDK或者JRE，按照官方网站的说明作好所有准备工作后，然后开始安装，最新版的NetBeans已经支持JS了。安装完后发现编辑器默认的代码的字体和配色都不是自己想要的，于是自己动手改改吧，先改成了consolas，结果中文字显示不出来了，只好找了一个中英文都有的字体，yahei consolas hybrid，然后动手调了调配色，已经习惯了黑底的代码环境了。 配置文件，直接导入就可以了 config.zip

]]> http://www.qifendi.com/html/y2010/netbeans.html/feed 0 javascript+css模拟下拉框 http://www.qifendi.com/html/y2010/simulation-of-the-drop-down-box-javascript-css.html http://www.qifendi.com/html/y2010/simulation-of-the-drop-down-box-javascript-css.html#comments Wed, 03 Mar 2010 03:08:28 +0000 soncy http://www.eyike.com/?p=391 [......]

]]> 浏览器自带的下拉框用起来挺方便，但是很多时候也会遇到麻烦，说说两个最大的麻烦吧 1，在IE下，下拉框无法自定义样式。 2，在IE下，下拉框的优先级最高，如果有遮盖效果的话，遮不住它。

这个时候模拟一个下拉框也是很必要的，自己写了一个简单的下拉框的模拟，效果：


JS部分：

下载: CsSelect.js
  1. function CsSelect(_data,_element){ 
  2.     if(typeof _element == "string"){ 
  3.         _element = document.getElementById(_element);
  4.     } 
  5.     var self = this;
  6.     self._value = "";
  7.     self.data = _data;
  8.     if(typeof self.data == "undefined" || self.data.length < 1) return;
  9.     this.insertAfter = function(newElement,targetElement){ 
  10.         var parent = targetElement.parentNode;
  11.         if(parent.lastChild == targetElement){ 
  12.             parent.appendChild(newElement);
  13.         }else{ 
  14.             parent.insertBefore(newElement,targetElement.nextSibling);
  15.         } 
  16.     };
  17.     var _htmlArr = [];
  18.     self._CsSelect = document.createElement("div");
  19.     self._CsSelect.className = "csSelect";
  20.     self._CsStitle = document.createElement("div");
  21.     self._CsStitle.className = "csStitle";
  22.     self._CsStitle.innerHTML = self.data[0][1];
  23.     _element.value = self.data[0][0];
  24.     self._CsSelect.appendChild(self._CsStitle);
  25.     self._CsSlist = document.createElement("ul");
  26.     self._CsSlist.className = "csSlist";
  27.     for(var i =0;i < self.data.length;i++){ 
  28.         var _tempData = self.data[i];
  29.         var _optValue = _tempData[0];//获取value值
  30.         var _optText = _tempData[1];//获取text值
  31.         _htmlArr.push('<li><a href="#" value="');
  32.         _htmlArr.push(_optValue);
  33.         _htmlArr.push('">');
  34.         _htmlArr.push(_optText);
  35.         _htmlArr.push('</a></li>');
  36.     } 
  37.     self._CsSlist.innerHTML = _htmlArr.join("");
  38.     self._CsSelect.appendChild(self._CsSlist);
  39.     //展示
  40.     var _parentNode = _element.parentNode;
  41.     _element.style.display = "none";
  42.     self.insertAfter(self._CsSelect,_element);
  43.     //事件注册
  44.     self._CsStitle.onclick = function(){ 
  45.         var _CsSlist = self._CsSlist;
  46.         var _Clist = document.getElementsByTagName("ul");
  47.         for(var i = 0;i < _Clist.length;i++){ 
  48.             if(_Clist[i].className.indexOf("csSlist") > -1 && _Clist[i] != self._CsSlist){ 
  49.                 _Clist[i].style.display = "none";
  50.             } 
  51.         } 
  52.         if(_CsSlist.style.display != "block"){ 
  53.             _CsSlist.style.visibility = "hidden";
  54.             _CsSlist.style.display = "block";
  55.             if(_CsSlist.offsetHeight > 200){ 
  56.                 _CsSlist.style.height = "200px";
  57.             } 
  58.             _CsSlist.style.visibility = "inherit";
  59.         }else{ 
  60.             _CsSlist.style.display = "none";
  61.             _CsSlist.style.height = "auto";
  62.         } 
  63.     };
  64.     var _csList = self._CsSlist.getElementsByTagName("a");
  65.     for(var i = 0;i < _csList.length;i ++){ 
  66.         _csList[i].onclick = function(event){ 
  67.             var ev = event || window.event;
  68.             var el = ev.srcElement || ev.target;
  69.             self._CsStitle.innerHTML = el.innerHTML;
  70.             _element.value = el.getAttribute("value");
  71.             self._CsSlist.style.display = "none";
  72.             self.change();
  73.             return false;
  74.         } 
  75.     };
  76.     this.change = function(){ 
  77.        
  78.     };
  79.     this.hide = function(){ 
  80.         self._CsSelect.style.display = "none";
  81.     };
  82.     this.show = function(){ 
  83.         self._CsSelect.style.display = "block";
  84.     };
  85.     this.setValue = function(value){ 
  86.         var _idx = 0;
  87.         for(var i = 0;i < self.data.length;i++){ 
  88.             if(self.data[i][0] == value){ 
  89.                 _idx = i;
  90.             } 
  91.         } 
  92.         self._CsStitle.innerHTML = self.data[_idx][1];
  93.         _element.value = self.data[_idx][0];
  94.     };
  95.     this.getValue = function(){ 
  96.         return _element.value;
  97.     };
  98.     if(window.addEventListener){ 
  99.         document.addEventListener("click" , function(event){ 
  100.             var ev = event || window.event;
  101.             var el = ev.srcElement || ev.target;
  102.             if(el.className == "csStitle") return;
  103.             var _Clist = document.getElementsByTagName("ul");
  104.             for(var i = 0;i < _Clist.length;i++){ 
  105.                 if(_Clist[i].className.indexOf("csSlist") > -1){ 
  106.                     _Clist[i].style.display = "none";
  107.                 } 
  108.             } 
  109.         },false);
  110.     }else{ 
  111.         document.attachEvent("onclick" , function(event){ 
  112.             var ev = event || window.event;
  113.             var el = ev.srcElement || ev.target;
  114.             if(el.className == "csStitle") return;
  115.             var _Clist = document.getElementsByTagName("ul");
  116.             for(var i = 0;i < _Clist.length;i++){ 
  117.                 if(_Clist[i].className.indexOf("csSlist") > -1){ 
  118.                     _Clist[i].style.display = "none";
  119.                 } 
  120.             } 
  121.         });
  122.     } 
  123. }

css部分：

下载: CsSelect.css
  1. .csSelect{position:relative;width:154px;} 
  2. .csStitle{cursor:pointer;border:1px solid #bababa;padding:4px;width:146px;background:#fff url(images/icon_CsSelect.gif) no-repeat right center;} 
  3. .csSlist{display:none;position:absolute;background:#fff;width:100%;border:1px solid #bababa;border-top:0;overflow-y:auto;overflow-x:hidden;} 
  4. .csSlist li{line-height:auto !important;margin:0 !important;} 
  5. .csSlist a{display:block;padding:2px 4px;color:#555;outline:none;} 
  6. .csSlist a:hover{background:#0069ca;color:#fff;}

用法： html部分：

  1. <input type="hidden" name="xxx" id="csselect" />

js部分:

  1. var selectData = [["value","text"],["value1","text1"]];
  2. var someSelect = new CsSelect(selectData,document.getElementById("csselect"));

需要用到的图片：

]]> http://www.qifendi.com/html/y2010/simulation-of-the-drop-down-box-javascript-css.html/feed 4 textarea的scrollHeight http://www.qifendi.com/html/y2009/scrollheight-the-textarea.html http://www.qifendi.com/html/y2009/scrollheight-the-textarea.html#comments Sun, 31 May 2009 08:36:39 +0000 soncy http://www.eyike.com/?p=282 javascript删除元素节点》时，用自己修改的runcode插入了一段代码，用的是[\runcode][\/runcode]的方式，按照我插件的实现方式，[\runcode]标签没有参数时，他的高度应该是根据内容自适应的才是，用的方法是取得<textarea>的sc[......]

继续阅读

]]> 在写昨天那篇日志《javascript删除元素节点》时，用自己修改的runcode插入了一段代码，用的是[\runcode][\/runcode]的方式，按照我插件的实现方式，[\runcode]标签没有参数时，他的高度应该是根据内容自适应的才是，用的方法是取得<textarea>的scrollHeight然后赋值给他的height，但是在firefox下却没有得到我想要的表现，发现他的高度始终是100px，除非<textarea>中的内容高度超过了100px，scrollHeight的值才会改变，试着运行下面的代码：

提示：你可以先修改部分代码再运行。

提示：你可以先修改部分代码再运行。

第一段代码中<textarea>中的代码是

<div>
</div>
<script type="text/javascript">
var textareaObj = new (function(){
	this.textarea = document.getElementById("xx");
	this.xx = function(){
		this.textarea.style.height = this.textarea.scrollHeight + "px";
	}
	this.checkHeight = function(){
                          alert("高度是"+this.textarea.scrollHeight + "px");
	}
})();
window.onload = function(){
	textareaObj.xx();
}
</script>

这段内容高度超过了80px，所以firefox下得到的高度是210px，但是第二段代码中，<textarea>中的代码只有<div></div>，但得到的高度却是80px，正好是在css中定义的，<textarea>的高度，只要把css中定义的高度去掉，就能得到文本的高度了，您可以修改代码然后运行试试。

]]> http://www.qifendi.com/html/y2009/scrollheight-the-textarea.html/feed 2 javascript删除元素节点 http://www.qifendi.com/html/y2009/javascript-delete-element-node.html http://www.qifendi.com/html/y2009/javascript-delete-element-node.html#comments Sat, 30 May 2009 06:23:37 +0000 soncy http://www.eyike.com/?p=244

]]> 在javascript操作dom树的时候可能会经常遇到增加，删除节点的事情，比如一个输入框后一个增加按钮，一个删除按钮，点击增加就增加个输入框，点击删除就删除对应的输入框。在一些js框架，如Prototype中，可以用element.remove()来删除一个节点，核心JS中并没有这样的方法，IE中有这样一个方法:removeNode()，尝试运行下面的代码

提示：你可以先修改部分代码再运行。

可以发现，这个方法在IE下是好使的，但是在Firefox等标准浏览器中就会报错了 removeNode is not defined，但是在核心JS中有一个操作DOM节点的方法叫：removeChild()，看名字应该就知道是移除子节点的，那么我们就可以变通一下来实现移除指定的节点了，我们可以先去找到要删除节点的父节点，然后在父节点中运用removeChild来移除我们想移除的节点。我们可以定义一个方法，就叫removeElement吧。

function removeElement(_element){
         var _parentElement = _element.parentNode;
         if(_parentElement){
                _parentElement.removeChild(_element);  
         }
}

尝试运行下面的代码，可以在各种浏览器中正确执行了。

提示：你可以先修改部分代码再运行。

]]> http://www.qifendi.com/html/y2009/javascript-delete-element-node.html/feed 11 iframe的高度自适应 http://www.qifendi.com/html/y2009/iframe-height-adaptive.html http://www.qifendi.com/html/y2009/iframe-height-adaptive.html#comments Mon, 18 May 2009 11:11:54 +0000 soncy http://www.eyike.com/?p=60 继续阅读

]]> iframe不像普通的div或者span等元素默认高度是auto，在iframe嵌套一个页面时，如果不指定iframe的高度，那么肯定是得不到想要的结果的，但是如果被嵌套的页面（以下称子页面）的内容是不固定的呢？这个时候如果再写死iframe的高度就不靠谱了，当子页面的内容变化，比如变多，子页面的高度就会增加，在嵌套页面（以下称父页面）中就只会看到一部分，如果子页面内容变少，高度变低，那么就会看到一大片空白，很不爽。

这个时候就有必要考虑iframe的高度自适应了，原理很简单，就是得到子页面的高度，再把高度赋给iframe。首先在父页面定义一个函数，用于指定iframe的高度设置。

0
1
2
3
4
5

function setIfrmHeight(_iframid,_height,_visibility){
	if(_visibility){
		$(_iframid).style.display = _visibility;
	}
	$(_iframid).style.height = _height + "px";
}

这个函数接收三个参数，分别为iframe的id，要设置的高度和是否显示。
接下来在子页面调用这个函数就可以了，在子页面需要取得页面高度和当页面被哪个iframe调用，页面高度可以用document.body.offsetHeight得到，iframe的id可以通过iframe的src传进去，如

0

<iframe id="piframe" src="aa.html?frmid=piframe" height="0" width="100%" scrolling="no" frameborder="0"></iframe>

在子页面中，就可以这样调用了

0
1
2
3
4
5
6
7
8
9
10
11
12

function QueryString(val)  
{
	var uri = window.location.search;
	var re = new RegExp("" +val+ "=([^&?]*)", "ig");
	return ((uri.match(re))?(uri.match(re)[0].substr(val.length+1)):null);
}
var _bodyHeight = document.body.offsetHeight;
var _iframeId = QueryString("frmid");
var _visibility = "block";
if(_bodyHeight < 10){
	_visibility = "none";
}
window.parent.setIfrmHeight(_iframeId,_bodyHeight,_visibility);

其中QueryString()函数是负责取得url中的对应字段的。
使用这种方法的时候有两个注意事项，一是子页面和父页面必须在同一个域下，二是子页面必须有DOCTYPE的声明。

]]> http://www.qifendi.com/html/y2009/iframe-height-adaptive.html/feed 0 经常用到的两个小函数暨测试下WP-Codebox http://www.qifendi.com/html/y2009/e7-bb-8f-e5-b8-b8-e7-94-a8-e5-88-b0-e7-9a-84-e4-b8-a4-e4-b8-aa-e5-b0-8f-e5-87-bd-e6-95-b0-e6-9a-a8-e6-b5-8b-e8-af-95-e4-b8-8bcoolcode.html http://www.qifendi.com/html/y2009/e7-bb-8f-e5-b8-b8-e7-94-a8-e5-88-b0-e7-9a-84-e4-b8-a4-e4-b8-aa-e5-b0-8f-e5-87-bd-e6-95-b0-e6-9a-a8-e6-b5-8b-e8-af-95-e4-b8-8bcoolcode.html#comments Wed, 13 May 2009 07:36:26 +0000 soncy http://www.eyike.com/?p=5 function addCss(element,cssName){ var element,cssName; if (!element.className || element.className == cssName){ element.className = cssName; } else{ element.className = element.className + " " + cssName; } } function removeCss(element,cssName){ var element,cssName; var oldCss = element.className; var cssList = oldCss.split(" "); for(var i = 0;i < cssList.length;i++){ if (cssList[i] == cssName) { cssList[i] = ""; break; } } element.className = cssList.join(" "); } 顺便说下，国外的主机速度真的不是一般慢。[......]

]]> 
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function addCss(element,cssName){ 
        var element,cssName; 
        if (!element.className || element.className == cssName){ 
            element.className = cssName; 
        } 
        else{ 
            element.className = element.className + " " + cssName; 
        } 
    } 
    function removeCss(element,cssName){ 
        var element,cssName; 
        var oldCss = element.className; 
        var cssList = oldCss.split(" "); 
        for(var i = 0;i < cssList.length;i++){ 
            if (cssList[i] == cssName) { 
                cssList[i] = ""; 
                break; 
            } 
        } 
        element.className = cssList.join(" "); 
    }

顺便说下，国外的主机速度真的不是一般慢。

]]> http://www.qifendi.com/html/y2009/e7-bb-8f-e5-b8-b8-e7-94-a8-e5-88-b0-e7-9a-84-e4-b8-a4-e4-b8-aa-e5-b0-8f-e5-87-bd-e6-95-b0-e6-9a-a8-e6-b5-8b-e8-af-95-e4-b8-8bcoolcode.html/feed 0