利用JavaScript创建功能强大的GUI(5)

1<img align="middle" alt="click to make your selection bold" class="button" height="16" onclick="format_sel('b');" onmousedown="mousedown(this);" onmouseout="mouseout(this);" onmouseover="mouseover(this);" onmouseup="mouseup(this);" src="bold.gif" width="16"/>
1<img align="middle" alt="click to make your selection italic" class="button" height="16" onclick="format_sel('i');" onmousedown="mousedown(this);" onmouseout="mouseout(this);" onmouseover="mouseover(this);" onmouseup="mouseup(this);" src="italic.gif" width="16"/>
1<img align="middle" alt="click to add a link" class="button" height="16" onclick="insert_link();" onmousedown="mousedown(this);" onmouseout="mouseout(this);" onmouseover="mouseover(this);" onmouseup="mouseup(this);" src="link.gif" width="32"/>
1<textarea cols="30" name="my_textarea" rows="6"></textarea>

一个div中包含了三个按钮的图像,这样会使代码显得简洁。函数调用在

1<img/>

标记的事件处理程序中,我们向格式化函数传递一个将被改变样式的元素的引用,根据希望使用的格式(b表示粗体,i表示斜体),我们向format_sel()函数传递一个合适的参数。

结束语

当然,这只是创建工具栏的一种方法,还有许多其他方法也可以创建工具栏。读者创建的工具栏的功能也不必局限于本篇文章中涉及的功能,利用W3C DOM,可以很方便地改变一个文档的样式。

利用DOM操作,我们可以建立一个Word风格的工具栏,让用户定制显示卡的所有方面:改变字体的大小、文档的字体、改变栏目的宽度。结合使用CSS、JavaScript和DOM,我们能够创建与标准浏览器兼容的功能强大的应用软件GUI。

Published At
Categories with 网页设计
comments powered by Disqus