当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 利用JavaScript创建功能强大的GUI(5)

HTML/XHTML教程
XHTML中不再使用HTML中的一些废弃元素
语义化的HTML结构怎么理解
Web 标准学习 理解结构和表现相分离
html5 标签
HTML5 新事件 小结
HTML5 b和i标记将被赋予真正的语义
HTML是网页制作者必须要学习掌握的
HTML DOCTYPE的缩写
Readonly和Disabled的区别
16进制颜色代码（完全）
H标记要在网页制作中合理使用
abbr标记和acronym标记
知名浏览器对DOCTYPE模式的选择机制
用标准dl,dt,dd标签抛弃table列表
html 标签ID可以是变量
iframe 自适应大小实现代码
HTML5 解析规则分析
HTML减肥 精简HTML标记制作网页
HTML5 File API改善网页上传功能
HTML 5 Reset Stylesheet

No. « 12 13 14 15 »

技术文章搜索

关键字

HTML/XHTML教程 中的 利用JavaScript创建功能强大的GUI(5)

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-11-04   浏览: 123 ::
收藏到网摘: n/a



<img class="button"
onmouseover="mouseover(this);"
onmouseout="mouseout(this);"
onmousedown="mousedown(this);"
onmouseup="mouseup(this);"
onclick="format_sel('b');"
src="/upload/tech/20091104/20091104154820_c81e728d9d4c2f636f067f89cc14862c.gif"
width="16" height="16"
align="middle"
alt="click to make your selection bold">
<img class="button"
onmouseover="mouseover(this);"
onmouseout="mouseout(this);"
onmousedown="mousedown(this);"
onmouseup="mouseup(this);"
onclick="format_sel('i');"
src="/upload/tech/20091104/20091104154820_a8e864d04c95572d1aece099af852d0a.gif"
width="16" height="16"
align="middle"
alt="click to make your selection italic">
<img class="button"
onmouseover="mouseover(this);"
onmouseout="mouseout(this);"
onmousedown="mousedown(this);"
onmouseup="mouseup(this);"
onclick="insert_link();"
src="/upload/tech/20091104/20091104154821_5ef0b4eba35ab2d6180b0bca7e46b6f9.gif"
width="32" height="16"
align="middle"
alt="click to add a link">

<textarea cols="30" rows="6" name="my_textarea"></textarea>

　　一个div中包含了三个按钮的图像，这样会使代码显得简洁。函数调用在<img>标记的事件处理程序中，我们向格式化函数传递一个将被改变样式的元素的引用，根据希望使用的格式（b表示粗体，i表示斜体），我们向format_sel()函数传递一个合适的参数。

结束语

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

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