使用 Ajax 技术构建 Web 演示应用程序，第 2 部分: 创建可编辑的 Web 演示

核心提示： 查看原图（大图）单击 New Slide 按钮创建一个幻灯片以供使用，这将弹出一个窗口，使用 Ajax 技术构建 Web 演示应用程序，第 2 部分: 创建可编辑的 Web 演示(2)，选择 Blank slide，图 3. 选择幻灯片布局查看原图（大图）单击 Insert Text 操作按钮，

查看原图（大图）

单击 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();　}