php表单元素,PHP_表单设计器—HTML元素操作，表单设计器界面图为： - phpStudy...

表单设计器—HTML元素操作

表单设计器界面图为：

查看原图(大图)

主编辑区域的TabControl分为设计模式和编码模式两个页，设计模式页包含dhtml edit control，实例名称为：axDHTMLEdit；编码模式页包含多行文本框，实例名称为：txtCode。可以在设计模式和编码模式之间进行切换，来展示不同内容，类似于Dreamweaver的功能。

为了标识着两种模式，定义枚举类型EditorMode：

///　

///　编辑器的模式

///　

public　enum　EditorMode　{　Design,　Code}

模式之间切换代码为：

if　(tabControl.SelectedIndex　==(int)EditorMode.Code)

{

GlobalStatus.CurrentMode　=　EditorMode.Code;

txtCode.Text　=　axDHTMLEdit.DocumentHTML;

}

else　if　(tabControl.SelectedIndex　==(int)EditorMode.Design)

{

GlobalStatus.CurrentMode　=　EditorMode.Design;

axDHTMLEdit.DocumentHTML　=　txtCode.Text;

}

可以在空白面板区点击鼠标，然后点击工具中的按钮，即可在空白面板上增加相应的HTML控件。相应的代码为：

///　

///　插入控件的处理函数

///　1.如果是设计模式

///　1.1如果当前焦点在控件上，那么不允许插入

///　1.2如果当前焦点不在控件上

///　1.2.1如果插入之前需要预设信息，那么弹出属性窗口进行设置，然后插入控件信息

///　1.2.2如果插入之前不需要预设信息，直接插入控件信息

///　2.如果是编辑模式，直接插入控件信息

///　

///　

private　void　insertControl(string　type)

{

//设计模式

if　(GlobalStatus.CurrentMode　==　EditorMode.Design)

{

IHTMLSelectionObject　range　=　axDHTMLEdit.DOM.selection;

if　(range.type　==　RangeType.CONTROL)

{

MessageBox.Show(ErrorMessage.E_FOCUS_ON_CONTROL_CANNOT_ADD_CONTROL);

}

else

{

IHTMLTxtRange　obj　=　(IHTMLTxtRange)range.createRange();

//判断是否需要预设信息

if(NeedShowPropertyForm(type))

{

//根据元素类型获取html对象，类型为：button,text,password,table,checkbox,radio等

IHTMLElement　element　=　HtmlControlFactory.getHtmlElement(type,axDHTMLEdit);

//获取元素的属性窗口并显示，待用户设置属性信息后生成html增加到设计视图中

Form　propForm　=　getPropertyForm(element);

DialogResult　result=　propForm.ShowDialog();

if　(result　==　DialogResult.OK)

{

obj.pasteHTML(HtmlControlFactory.getHtmlElementString(element));

}

}

else

{

obj.pasteHTML(HtmlControlFactory.getHtmlElementString(type,axDHTMLEdit));

}

}

}

else

{

txtCode.Paste(HtmlControlFactory.getHtmlElementString(type,axDHTMLEdit));

}

}

///　

///　点击增加控件按钮后，是否需要弹出属性窗口进行初始化设置

///　

///　控件类型

///　是：需要进行初始化设置；否：不需要进行初始化设置

private　bool　NeedShowPropertyForm(string　type)

{

if　(HtmlControlType.TABLE　==　type)　return　true;

return　false;

}

///　

///　HTML控件类型

///　

public　class　HtmlControlType

{

public　const　string　BUTTON　=　"button";

public　const　string　CHECK_BOX_LIST　=　"checkboxlist";

public　const　string　SELECT　=　"select";

public　const　string　DATE_TIME　=　"datetime";

public　const　string　PICTURE　=　"picture";

public　const　string　TABLE　=　"table";

public　const　string　CHECK_BOX　=　"checkbox";

public　const　string　RADIO_BOX　=　"radio";

public　const　string　PASSWORD　=　"password";

public　const　string　HIDDEN　=　"hidden";

public　const　string　TEXT　=　"text";

public　const　string　INPUT　=　"input";

}

///　

///　DHTML控件选中区域类型

///　

public　class　RangeType

{

///　

///　选中控件

///　

public　const　string　CONTROL　=　"Control";

///　

///　未选中

///　

public　const　string　NONE　=　"None";

}

主要知识点：

axDHTMLEdit.DocumentHTML：将一段Html文档赋值给该属性，DHTMLEdit控件可以显示控件布局，即设计模式视图；同时也可以从该属性获取设计模式视图的HTML代码。

IHTMLSelectionObject 对象获取当前控件选中区域的类型，该对象可以通过axDHTMLEdit的DOM属性的selection属性获取。 IHTMLSelectionObject包含一个type属性，type的属性值有Control、Text、None三种分别代表选中控件，文本，未选中任何对象。

IHTMLTxtRange 对象，该对象表示与当前选中区域(selection)相关的文本域对象，可以通过、 range.createRange()来获取该对象。可以通过text、htmlText属性获取该区域中的文本字符串；或者通过 pasteHTML(string)方法将一段HTML文本字符串添加到当前选中的文本区域中，再设计模式下向编辑区增加控件即是通过该方法完成的。

IHTMLElement类型是HTML控件的基类型，通过属性outerHTML可以获取对象的HTML内容相关阅读:

在Linux环境下安装JSP

对于访问IIS元数据库失败的解决

第6课：学习更多元素

Windows7操作系统无法玩魔兽3的问题

不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题

掌握XML实例演练ASP+XML编程

B/S开发中常用javaScript技术与代码

Oracle的dual虚拟表介绍

php引用地址改变变量值的问题

简洁的一个实现网页全屏代码

不用组件实现Ajax效果

关于分页查询和性能问题

php5 mysql分页实例代码

php 各种应用乱码问题的解决方法