xheditor随时调整编辑框的高度

2012-06-06  金城  2972

xheditor 是一个很优秀的web版html编辑器。不过有些功能官方的反应总是一句话“以后的版本会加上”。

可是，我们等不及。

先看演示(点击下边的高度控制项)

高度控制   

演示代码

里边的iframe为本例演示物件，在真正的编辑器中也会生成一个class=xheIframeArea的iframe物件。如果您没有xheditor编辑器的设置基础，请先学习基础知识。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>DEMO</title>
<script src="http://www.mycoolapp.net/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
<style type="text/css">
.xheIframeArea{width:400px;height:200px;}
</style>
<script type="text/javascript">
function adJHeight(f){
 $area=$('.xheIframeArea');
 var h=$area.height();
 if(f==-1){
   h=h/2;if(h<100)h=200;
   $area.animate({'height':h+'px'},300);
 }else if(f==0){
   if(h>100)$area.animate({'height':(h-50)+'px'},300);
 }else if(f==1){
   $area.animate({'height':(h+50)+'px'},300);
 }else if(f==2){
   if(h<2000)h=h*1.5;else h=h+200;
   $area.animate({'height':h+'px'},300);
 }
};
</script>
</head>

<body>
<iframe class="xheIframeArea"></iframe>
<div align="center">
 <span id="adjHeightCtrl">高度控制
 <label onclick="adJHeight(-1)" title="减半">[/]</label>
 <label onclick="adJHeight(0)" title="减50px">[-]</label>
  
 <label onclick="adJHeight(1)" title="加50px">[+]</label>
 <label onclick="adJHeight(2)" title="加半">[*]</label>
 </span>     
 <button>提交</button>
</div>
</body>
</html>
编辑器JQueryhtmlxheditorweb版iframe演示