CMS项目总结:17、调用ckeditor编辑器以及通过javascript缩放左边的导航菜单

马化腾:

他是一个专注的人。   

我不盲目创新,微软、Google做的都是别人做过的东西,最聪明的方法肯定是学习最佳案例,然后再超越。

显然。珊瑚虫作者是缺乏法律意识,没有像腾讯一样在商业化过程中及时、巧妙地洗干净自己的商业模式。

腾讯的十年,也就是中国互联网发展的一个缩影。这十年,中国的互联网在苛责中倔强地成长着,值得骄傲的一点是:中国互联网虽然在模仿者的阴影里饱受诟病,但仍在中国本土市场上顽强地生长,并开出极为绚丽的花朵。

Ckeditor简介:

ckeditor是个开源工具,是基于CSSjavascript的工具。

ckeditor主要作用就是把页面中的textarea多行文本区域变成功能强大的富文本编辑器,可以改变输入文字的格式啦。实现过程也很简单:

1、将ckeditor的解压包放入WebRoot目录下;

2、然后在需要用到ckeditor的页面(本例是add_article.jsp)中将ckeditor.js包含进本页面:

<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>

3、接下来执行以下代码,来用ckeditor替换textarea

<script type="text/javascript">

function initEditor(){

        CKEDITOR.replace( 'content',

                {

                       width:700

                } 

        );

}

</script>

</head>

<body onLoad="initEditor()">

 

CKEDITOR.replace( 'content',”中的content即是下文中的textareaname<textarea rows="20" cols="100" name="content" id="content"></textarea>

表示用ckeditor来替换name为“content”的textarea。但由于这段javascript代码在textarea定义前写的,所以我们这么调用他:<body onLoad="initEditor()">

表示页面全部加载完成后,在调用onloadinitEditor()方法。

 

效果图:

编写javascript缩放左边的导航菜单:

在很多网站中可以看到点击某个按钮啦区域啦,很使一块区域出现或者消失。我们现在用javascript代码来实现这一功能:

Main.jsp页面的代码:

Main.jsp中包含了top.jspcenter.jsp(包含了left.jsp,即要显示或隐藏的页面)和down.jsp页面,在本例中用到了top.jspcenter.jsp页面。

 

top.jsp页面中的重要的部分代码:

        

        <td width="147" background="images/main_29.gif" onclick="openClose()" style="cursor:pointer;">

                  <table width="100%" border="0" cellspacing="0" cellpadding="0">

                           <tr>

                                     <td width="24%"> </td>

                                     <td width="43%" height="20" valign="bottom" class="STYLE1">管理菜单</td>

                                     <td width="33%"> </td>

                           </tr>

                  </table>

        </td>

Center.jsp页面的部分重要代码:

 

top.jsp的页面是

style="cursor:pointer;"的功能是当把鼠标放到“管理菜单”那一片区域时,会出现一只手的形状。同时当点击管理菜单那一块时,触发了onclick="openClose()",接下来分析这段javascript代码:

window.parent.mainFrame.document.getElementById("leftMenu").width = 1;

Window.parent即是top.jsp页面的父面main.jsp

Window.parent.mainFrame即是center.jsp页面。

Window.parent.mainFrame.document.getElementById("leftMenu")即是center.jsp中包含的left.jsp页面。

当点击top.jsp中的管理菜单区域时,调用window.parent.mainFrame.document.getElementById("leftMenu").width = 1;将使left.jsp页面宽度为1,即隐藏,而再点击一下,会再赋值window.parent.mainFrame.document.getElementById("leftMenu").width = 147;即显示出来。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值