 |
|
|
 首页 |
名片设计 CorelDRAW Illustrator AuotoCAD Painter 其他软件 Photoshop Fireworks Flash |
|
看到chinaASP论坛的abc code editor了吗？是不是觉得很cool? 说真的，刚见到我还以为是用别的什么语言做的控件呢， 后来才发现没有那么神秘的。前几天做一个商品bbs，客户要求支持ubb，同时也要做一个编辑器。现在我把做ubb的思路给大家讲 一下。 首先碰到的是界面问题，实际上这个很好解决，只是利用td的onmouseover、onmouseout和onmousedown来实现，详细实现方 法件下面的代码。 其次就是实现文本效果的问题，这个可以利用textRange的execCommand方式来实现。 下面我给出一个简朴的例子，你可以把它存为一个html文件，直接可以运行，这个例子的功能很简朴，就是把编辑框中选定的 文字变为粗体或斜体。其他功能你可以参照这个例子自己加上。 对了，先把这两个图片存下来。 file : ubb.html <HTML> <HEAD> <TITLE>ubb演示</TITLE> </HEAD> <BODY> <br><br> <table width=300 cellspacing=2 cellpadding=2 border=0 bgcolor=lightgrey> <tr> <td id=tdBold onclick=doAction("Bold") onmousedown="DoDown(tdBold );" onmouseover = "On_Mouseover (tdBold) ;" onmouseout="On_Mouseout(tdBold);"> <img src=\\\'bold.gif\\\' width=16 height=16 > </td> <td id=tdItalic onclick=doAction("Italic") onmousedown="DoDown(tdItalic);" onmouseover = "On_Mouseover(tdItalic) ;" onmouseout="On_Mouseout(tdItalic);"> <img src=\\\'italic.gif\\\' width=16 height=16 > </td> <td width=268> </td> </tr> <tr> <td colspan=3> <iframe id=Editor name=Editor border=0 scroll=no width=300 height=200> </iframe> </td> </tr> </table> </BODY> </HTML> <script language=javascript> //initialize the iframe Editor.document .designMode = "On" ; Editor.document .open ; Editor.document .write (" ") ; Editor.document .close ; Editor.focus (); function On_Mouseover(thisTD) { thisTD.style .borderLeft = "1px solid buttonhighlight" ; thisTD.style .borderRight = "1px solid buttonshadow"; thisTD.style .borderTop = "1px solid buttonhighlight"; thisTD.style .borderBottom = "1px solid buttonshadow"; } function On_Mouseout(thisTD) { thisTD.style .borderLeft = "" ; thisTD.style .borderRight = ""; thisTD.style .borderTop = ""; thisTD.style .borderBottom = ""; } function DoDown(thisTD) { thisTD.style .borderLeft = "1px solid buttonshadow"; thisTD.style .borderRight = "1px solid buttonhighlight"; thisTD.style .borderTop = "1px solid buttonshadow"; thisTD.style .borderBottom = "1px solid buttonhighlight"; thisTD.style .paddingTop = "2px"; thisTD.style .paddingLeft = "2px"; thisTD.style .paddingBottom = "0px"; thisTD.style .paddingRight = "0px"; } function doAction(str) { var m_objTextRange = Editor.document .selection.createRange(); m_objTextRange.execCommand(str) ; } </script> 返回类别: 教程 上一教程: 利用VISUAL BASIC把ASP编写成DLL 下一教程: 多个表单和多个图片一起上传完美解决方案 您可以阅读与"自己动手，结合JAVASCRIPT和DHTML做一个UBB编辑器"相关的教程: · ASP讲座之十：自己动手编写组件 · 如何做一个高效的ASP数据库操作程序 · 用VB6做一个简朴的文件上传组件(一) · 新手初练:用ASP做一个域名查询系统 · 自己写的一个简朴ASP调用存储过程查询 |
  |
| 快精灵印艺坊 版权所有 |
首页 会员中心在线印刷在线编辑付款方式索取样品设计指南连锁门店
|
||
