xheditor随时调整编辑框的高度
软源LOGO
讲述咱程序员自己的故事

位置:软源 »源码 »文章

xheditor随时调整编辑框的高度

coolapp;2012-06-06 16:40:37;浏览:2697

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>
分享到:
(转载→)