![关闭 [x]](http://dw1.s81c.com/i/c.gif){kind=small}
在我们的上一篇文章 “使用 Ajax 技术构建一个 Web 演示应用程序，第 1 部分：开发 Web UI” 中，我们展示了如何在 Web 上构建一个演示 UI。但是，我们只是创建了一个演示界面，用户不能输入和编辑信息。在本文中，我们将添加一些新特性，允许您编辑这个 Web 演示。我们将包括一些常用操作，比如添加一个文本框、更改字体特征等。
添加这些特性主要涉及一个将一些适当的代码行添加到我们的现有框架的函数，因此，本文主要展示添加什么代码和在哪里添加代码。源代码已在一个 Windows® 平台上的 Firefox 3.5.3 中测试，但它应该可以在其他环境中使用。
您不需要 Web 服务器就可以打开 index.html 来观看这个演示。图 1 展示了这个样例应用程序的文件布局。
图 1. 样例代码的文件夹视图
打开 index.html 后，您将看到一个演示 UI，如图 2 所示。
图 2. 用户界面
单击 New Slide 按钮创建一个幻灯片以供使用。这将弹出一个窗口，选择 Blank slide。
图 3. 选择幻灯片布局
单击 Insert Text 操作按钮，这将显示一个允许您插入文本的窗口（如图 4 所示）。
图 4. 带有新文本框的编辑器的屏幕截图
现在，请看一看 Insert Text 按钮是如何工作的。文本框是带有特定 CSS 和文本的分区。清单 1 展示了一个文本框定义的样例代码。这个代码可以在 js/toolbar.js 文件中找到。
清单 1. 文本框定义
function insertText()
{
var slide = document.getElementById("slide_" + currentNum.toString(10));
var textDiv = document.createElement("div");
textDiv.id = "slideText_" + slideNum.toString(10) + "_" + textNum.toString(10)+"1_t1";
textDiv.style.cssText = " position: absolute; height: 20%; width: 80%;
left: 10%; top: 10%; border: 1px solid #BBBBBB;
text-align: center;overflow: hidden;";
textDiv.style.fontSize = "3em";
textDiv.contentEditable="true";
textDiv.ondragstart="true";
var textNode = document.createTextNode("You insert a text box.");
textDiv.insertBefore(textNode, null);
slide.appendChild(textDiv);
document.getElementById(textDiv.id).focus(); }
|
在清单 1 中的源代码中，我们将一个 division 属性设置为 true。这样，我们就可以调整文本框的大小、拖动它并在其中输入文本。只需将代码 textDiv.contentEditable="true"; 添加到函数的末尾。您可以在 js/toolbar.js 文件中找到这个完整的函数。
图 5. 一个可编辑文本对象的屏幕截图
拥有一个可编辑的文本对象后，您需要向编辑工具栏添加一些操作，如图 6 所示。这个工具栏实际上是 HTML 页面中的一个表，我们将介绍每个函数的代码。在样例代码（参见 下载）中，您可以在 index.html 中找到所有函数。
图 6. 编辑工具栏的屏幕截图
首先，通过将清单 2 中的代码放置到 js/toolbar.js 文件中来定义一个 cmdExec() 函数。
清单 2. cmdExec() 的定义
function cmdExec(cmd, opt)
{ document.execCommand(cmd,"", opt);
} |
然后使用以下几个代码样例来为工具栏按钮定义函数。
清单 3. Undo 工具栏按钮的代码
<img hspace="1" vspace=1 align=absmiddle src="images/undo.gif" alt="Undo"
onClick="cmdExec('undo')" onMouseOver="button_over(this);"
onMouseOut="button_out(this);" onMouseDown="button_down(this);"
onMouseUp="button_up(this);" width="23" height="22"
> |
清单 4 显示 Redo 按钮的代码。
清单 4. Redo 工具栏按钮的代码
<img hspace="1" vspace=1 align=absmiddle src="images/redo.gif" alt="redo"
onClick="cmdExec('redo')" onMouseOver="button_over(this);"
onMouseOut="button_out(this);" onMouseDown="button_down(this);"
onMouseUp="button_up(this);" width="23" height="22"
> |
清单 5 显示更改字体名称的控制代码。
清单 5. 字体选择下拉菜单的代码
<select id="Select2"
onchange="cmdExec('fontname',this[this.selectedIndex].value);"
name="Select2"
>
<option selected>Font</option>
<option value="Arial">Arial</option>
<option value="Arial Black">Arial Black</option>
<option value="Arial Narrow">Arial Narrow</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="System">System</option>
<option value="Tahoma">Tahoma</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Verdana">Verdana</option>
<option value="Wingdings">Wingdings</option>
</select> |
清单 6 显示更改字体大小的下拉菜单的代码。
清单 6. 字体大小下拉菜单的代码
<select id="Select3"
onchange="cmdExec('fontsize',this[this.selectedIndex].value);"
name="Select3"
>
<option selected>Size</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="10">10</option>
<option value="12">12</option>
<option value="14">14</option>
</select> |
清单 7 显示粗体格式按钮的代码。
清单 7. 粗体格式按钮的代码
<img hspace="1" vspace=1 align=absmiddle src="images/Bold.gif" alt="Bold"
onClick="cmdExec('bold')" onMouseOver="button_over(this);"
onMouseOut="button_out(this);" onMouseDown="button_down(this);"
onMouseUp="button_up(this);" width="23" height="22"
> |
清单 8 显示斜体格式按钮的代码。
清单 8. 斜体格式按钮的代码
<img class="cbtn" hspace="1" vspace=1
align=absmiddle src="images/Italic.gif" alt="Italics"
onClick="cmdExec('italic')" onMouseOver="button_over(this);"
onMouseOut="button_out(this);" onMouseDown="button_down(this);"
onMouseUp="button_up(this);" width="23" height="22"
> |
清单 9 显示下划线格式按钮的代码。
清单 9. 下划线格式按钮的代码
<img class="cbtn" hspace="1" vspace=1 align=absmiddle
src="images/under.gif" alt="Under" onClick="cmdExec('underline')"
onMouseOver="button_over(this);" onMouseOut="button_out(this);"
onMouseDown="button_down(this);"
onMouseUp="button_up(this);" width="23" height="22"
> |
清单 10 显示删除线格式按钮的代码。
清单 10. 删除线格式按钮的代码
<img class="cbtn" hspace="1" vspace=1 align=absmiddle src="images/Strikethrough.gif"
alt="Strike-through" onClick="cmdExec('StrikeThrough')"
onMouseOver="button_over(this);" onMouseOut="button_out(this);"
onMouseDown="button_down(this);"
onMouseUp="button_up(this);" width="23" height="22"
> |
清单 11 显示创建有序列表格式按钮的代码。
清单 11. 创建有序列表格式按钮的代码
<img class="cbtn" hspace="1" vspace=1 align=absmiddle src="images/numlist.gif"
alt="Ordered List" onClick="cmdExec('insertorderedlist')"
onMouseOver="button_over(this);" onMouseOut="button_out(this);"
onMouseDown="button_down(this);" onMouseUp="button_up(this);"
> |
清单 12 显示创建无序列表格式按钮的代码。
清单 12. 创建无序列表格式按钮的代码
<img class="cbtn" hspace="1" vspace=1 align=absmiddle src="images/bullist.gif"
alt="Unordered List" onClick="cmdExec('insertunorderedlist')"
onMouseOver="button_over(this);" onMouseOut="button_out(this);"
onMouseDown="button_down(this);" onMouseUp="button_up(this);"
> |
清单 13 显示添加缩进格式按钮的代码。
清单 13. 缩进格式按钮的代码
<img class="cbtn" hspace="1" vspace=1 align=absmiddle src="images/indent.gif"
alt="Increase Indent" onClick="cmdExec('indent')"
onMouseOver="button_over(this);" onMouseOut="button_out(this);"
onMouseDown="button_down(this);" onMouseUp="button_up(this);"
> |
清单 14 显示减少缩进（Outdent）格式按钮的代码。
清单 14. 减少缩进格式按钮的代码
<img class="cbtn" hspace="1" vspace=1 align=absmiddle src="images/outdent.gif"
alt="Decrease Indent" onClick="cmdExec('outdent')"
onMouseOver="button_over(this);" onMouseOut="button_out(this);"
onMouseDown="button_down(this);" onMouseUp="button_up(this);"
> |
清单 15 添加左对齐格式按钮的代码。
清单 15. 左对齐格式按钮的代码
<img class="cbtn" hspace="1" vspace=1 align=absmiddle
src="images/left.gif" alt="Justify Left" onClick="cmdExec('justifyleft')"
onMouseOver="button_over(this);" onMouseOut="button_out(this);"
onMouseDown="button_down(this);" onMouseUp="button_up(this);"
> |
清单 16 显示添加中间对齐格式按钮的代码。
清单 16. 中间对齐格式按钮的代码
<img class="cbtn" hspace="1" vspace=1 align=absmiddle src="images/Center.gif"
alt="Center" onClick="cmdExec('justifycenter')"
onMouseOver="button_over(this);" onMouseOut="button_out(this);"
onMouseDown="button_down(this);" onMouseUp="button_up(this);"
> |
清单 17 显示添加右对齐格式按钮的代码。
清单 17. 右对齐格式按钮的代码。
<img class="cbtn" hspace="1" vspace=1 align=absmiddle src="images/right.gif"
alt="Justify Right" onClick="cmdExec('justifyright')"
onMouseOver="button_over(this);" onMouseOut="button_out(this);"
onMouseDown="button_down(this);" onMouseUp="button_up(this);"
> |
由于很多开发人员都不是图形设计专家，因此最好使用内置的主题来帮助用户改进他们的演示的观感。您可以使用一个更改主题 函数来实现这个功能。
图 7. 主题选择
这个 Dojo 窗口的代码如清单 18 所示。
清单 18. 选择主题的 Dojo 代码
<div dojoType="dijit.Dialog" id="themeDialog" title="Choose theme">
<table width="300px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img onclick="createBlankTheme()"
class="themeImg" src="images/themes/blank_thumbnail.png" /></td>
<td><img onclick="createBubbleTheme()"
class="themeImg" src="images/themes/bubbles_thumbnail.png" /></td>
</tr>
</table>
</div> |
图 8. 应用了主题的演示
清单 19 显示更改为 Bubble 主题的代码。
清单 19. 更改 Bubble 主题的代码
function createBubbleTheme()
{ dijit.byId("themeDialog").hide(); var slide = document.getElementById("slide_" +
currentNum.toString(10));
slide.style.cssText+="background-image:url(images/themes/bubbles.png)";
} |
在这篇文章中，我们展示了如何使用 HTML 和 JavaScript 来创建一个便于工作的基于 Web 的演示框架。本文继续这个主题，但描述了如何使该演示可编辑并解释了如何添加格式化功能。但是，这个演示仍旧不完整；还可以添加导入和导出功能，这些功能现在仅仅显示为位置标识符。您还可以添加按钮来更改幻灯片的类型，并添加用户在一个演示应用程序中经常发现的其他功能。
但是，本文展示了如何使用 Ajax 通过相对较少的代码为用户创建健壮的、友好的功能。您可以任意改进这个示例，并告知我们您所取得的进展。
| 描述 | 名字 | 大小 | 下载方法 |
|---|---|---|---|
| 源代码 | demo.zip | 1053KB | HTTP |
- 参阅上一篇文章 “使用 Ajax 技术构建一个 Web 演示应用程序，第 1 部分：开发 Web
UI”，了解如何使用 Ajax 技术构建一个 Web 应用程序来进行幻灯片演示。
- “JavaScript 和文档对象模型（DOM）”，检查 DOM 的 JavaScript 方法，编撰 Web 页面的构建史，用户可以向这个构建史添加注释并编辑注释内容。
- “理解 DOM”，解释 DOM 文档的结构，展示如何使用 Java 技术从一个 XML 文档创建一个 Document，修改它并检索其输出。
- JavaScript 教程 帮助您开始学习 JavaScript 编程。
- DojoCampus.org 向您提供 Dojo 培训、在线课程以及教程。
- 使用这个关于 Cascading Style Sheets (CSS) 的教程来控制 Web 页面的样式和布局。
- 在 developerWorks Ajax 资源中心 查找各种 Ajax 资源。
- 加入 My developerWorks 并参与众多专门针对 Ajax 主题的社交小组。
- developerWorks 技术活动和网络广播：随时关注 developerWorks 技术活动和网络广播。
-
developerWorks Web development
专区：通过专门关于 Web 技术的文章和教程，扩展您在网站开发方面的技能。
标签
使用 搜索 文本框在 My developerWorks 中查找包含该标签的所有内容。
使用 滑动条 调节标签的数量。
热门标签 显示了特定专区最受欢迎的标签（例如 Java technology，Linux，WebSphere）。
我的标签 显示了特定专区您标记的标签（例如 Java technology，Linux，WebSphere）。
使用搜索文本框在 My developerWorks 中查找包含该标签的所有内容。热门标签 显示了特定专区最受欢迎的标签（例如 Java technology，Linux，WebSphere）。我的标签 显示了特定专区您标记的标签（例如 Java technology，Linux，WebSphere）。