`
try1try
  • 浏览: 11466 次
  • 来自: ...
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

怎样将DHTML更多属性和事件扩展到AJAX WebShop的属性编辑器中

阅读更多

怎样将DHTML更多属性和事件扩展到AJAX WebShop的属性编辑器中<o:p></o:p>

<o:p> </o:p>

者: <o:p></o:p>

       用过AJAX WebShop的朋友都知道,这个AJAX工具是全可视化的,非常类似delphi的开发模式,提供了可视化拖拉控件,属性编辑,事件编辑,语法提示等功能,但是有时使用时很奇怪,部分标准的DHTML属性和事件在里面找不到,就不得不手工写代码完成属性设置和事件编程。

       最开始我也是这样做的,但经过摸索,我却发现,原来AJAX WebShop是完全支持自己扩展属性和事件的,扩展的方法很简单,大家看我的操作:

       首先找到JCL目录下的XML文件,这下面有好多XML文件,一一对应了元件选项板上的控件,随便打开几个看看,居然还有继承的机制,难怪好多XML文件里面几乎没什么内容,好了,现在找到UIControl.xml,里面的内容是这样的:

 

<?xml version="1.0" encoding="gb2312"?><o:p></o:p>

<class classname="UIControl" visible="true" iscontainer="false" extends="JCLControl"><o:p></o:p>

  <imports><o:p></o:p>

    <import>jcl/Control.js</import><o:p></o:p>

  </imports><o:p></o:p>

  <private><o:p></o:p>

  </private><o:p></o:p>

  <protect><o:p></o:p>

  </protect><o:p></o:p>

  <public><o:p></o:p>

  </public><o:p></o:p>

  <published><o:p></o:p>

    <properties><o:p></o:p>

      <property name="align" type="String" editor="SelectEditor"><o:p></o:p>

          <options><o:p></o:p>

             <option value="center"/>            <o:p></o:p>

            <option value="left"/><o:p></o:p>

            <option value="right"/><o:p></o:p>

             <option value="justify"/>            <o:p></o:p>

           </options>        <o:p></o:p>

      </property><o:p></o:p>

      <property name="disabled" type="boolean" editor="SelectEditor"><o:p></o:p>

          <options><o:p></o:p>

            <option value="true"/><o:p></o:p>

             <option value="false"/>              <o:p></o:p>

           </options>        <o:p></o:p>

      </property><o:p></o:p>

      <property name="innerHTML" type="String"><o:p></o:p>

      </property><o:p></o:p>

      <property name="className" type="String"><o:p></o:p>

      </property><o:p></o:p>

      <property name="PopupMenu" type="PopupMenu" editor="ObjectEditor"><o:p></o:p>

      </property><o:p></o:p>

      <property name="style" type="style" editor="TreeEditor"><o:p></o:p>

       <properties><o:p></o:p>

         <property name="backgroundColor" type="String" editor="ColorEditor"><o:p></o:p>

         </property><o:p></o:p>

         <property name="backgroundImage" type="String"><o:p></o:p>

         </property><o:p></o:p>

         <property name="borderColor" type="String" editor="ColorEditor"><o:p></o:p>

         </property><o:p></o:p>

         <property name="borderStyle" type="String" editor="SelectEditor"><o:p></o:p>

          <options><o:p></o:p>

            <option value="none"/><o:p></o:p>

             <option value="dotted"/>            <o:p></o:p>

             <option value="dashed"/>           <o:p></o:p>

             <option value="solid"/>              <o:p></o:p>

             <option value="double"/>            <o:p></o:p>

             <option value="groove"/>           <o:p></o:p>

             <option value="ridge"/>              <o:p></o:p>

             <option value="inset"/>              <o:p></o:p>

             <option value="window-inset"/>         <o:p></o:p>

             <option value="outset"/>            <o:p></o:p>

           </options>        <o:p></o:p>

         </property>         <o:p></o:p>

         <property name="borderWidth" type="String" ><o:p></o:p>

         </property><o:p></o:p>

         <property name="borderLeft" type="String" ><o:p></o:p>

         </property><o:p></o:p>

         <property name="borderTop" type="String" ><o:p></o:p>

         </property><o:p></o:p>

         <property name="borderRight" type="String" ><o:p></o:p>

         </property><o:p></o:p>

         <property name="borderBottom" type="String" ><o:p></o:p>

         </property><o:p></o:p>

        <property name="cursor" type="String" editor="SelectEditor"><o:p></o:p>

          <options><o:p></o:p>

            <option value="all-scroll"/><o:p></o:p>

             <option value="auto"/>        <o:p></o:p>

             <option value="col-resize"/>              <o:p></o:p>

             <option value="crosshair"/>        <o:p></o:p>

             <option value="default"/>           <o:p></o:p>

             <option value="hand"/>              <o:p></o:p>

             <option value="help"/>        <o:p></o:p>

             <option value="move"/>             <o:p></o:p>

             <option value="no-drop"/>          <o:p></o:p>

             <option value="not-allowed"/>           <o:p></o:p>

             <option value="pointer"/>           <o:p></o:p>

             <option value="progress"/>         <o:p></o:p>

             <option value="row-resize"/>             <o:p></o:p>

             <option value="text"/>         <o:p></o:p>

             <option value="url(uri)"/>           <o:p></o:p>

             <option value="vertical-text"/>                        <o:p></o:p>

             <option value="wait"/>        <o:p></o:p>

             <option value="*-resize"/>                       <o:p></o:p>

           </options>        <o:p></o:p>

         </property>         <o:p></o:p>

         <property name="display" type="String" editor="SelectEditor"><o:p></o:p>

          <options><o:p></o:p>

            <option value="block"/><o:p></o:p>

             <option value="none"/>              <o:p></o:p>

             <option value="inline"/>              <o:p></o:p>

            <option value="inline-block"/><o:p></o:p>

             <option value="table-header-group"/>        <o:p></o:p>

             <option value="table-footer-group"/>         <o:p></o:p>

           </options>        <o:p></o:p>

         </property><o:p></o:p>

         <property name="color" type="String" editor="ColorEditor" ><o:p></o:p>

         </property><o:p></o:p>

         <property name="fontFamily" type="String" ><o:p></o:p>

         </property><o:p></o:p>

         <property name="fontSize" type="String" ><o:p></o:p>

         </property><o:p></o:p>

         <property name="fontStyle" type="String" editor="SelectEditor"><o:p></o:p>

          <options><o:p></o:p>

            <option value="normal"/><o:p></o:p>

             <option value="italic"/>              <o:p></o:p>

             <option value="oblique"/>           <o:p></o:p>

           </options>        <o:p></o:p>

         </property><o:p></o:p>

       <property name="paddingTop" type="String"><o:p></o:p>

       </property><o:p></o:p>

       <property name="paddingLeft" type="String"><o:p></o:p>

       </property><o:p></o:p>

       <property name="paddingRight" type="String"><o:p></o:p>

       </property><o:p></o:p>

       <property name="paddingBottom" type="String"><o:p></o:p>

       </property><o:p></o:p>

         <property name="position" type="String" default="absolute" editor="SelectEditor"><o:p></o:p>

          <options><o:p></o:p>

            <option value="static"/><o:p></o:p>

             <option value="absolute"/>         <o:p></o:p>

             <option value="relative"/>    <o:p></o:p>

           </options>        <o:p></o:p>

         </property><o:p></o:p>

         <property name="textAlign" type="String" editor="SelectEditor"><o:p></o:p>

          <options><o:p></o:p>

            <option value="left"/><o:p></o:p>

             <option value="right"/>              <o:p></o:p>

             <option value="center"/>     <o:p></o:p>

             <option value="justify"/>     <o:p></o:p>

           </options>        <o:p></o:p>

         </property><o:p></o:p>

         <property name="visibility" type="String" editor="SelectEditor"><o:p></o:p>

          <options><o:p></o:p>

            <option value="inherit"/><o:p></o:p>

             <option value="visible"/>            <o:p></o:p>

             <option value="hidden"/>     <o:p></o:p>

           </options>        <o:p></o:p>

         </property><o:p></o:p>

         <property name="wordWrap" type="String" editor="SelectEditor"><o:p></o:p>

          <options><o:p></o:p>

            <option value="normal"/><o:p></o:p>

             <option value="break-word"/>           <o:p></o:p>

           </options>        <o:p></o:p>

         </property><o:p></o:p>

         <property name="zIndex" type="Variant" ><o:p></o:p>

         </property>  </properties><o:p></o:p>

      </property><o:p></o:p>

      <property name="tabIndex" type="Integer"><o:p></o:p>

      </property><o:p></o:p>

      <property name="title" type="String"><o:p></o:p>

      </property><o:p></o:p>

    </properties><o:p></o:p>

    <methods><o:p></o:p>

    </methods><o:p></o:p>

    <events><o:p></o:p>

      <event name="onblur"><o:p></o:p>

              <params><o:p></o:p>

              </params><o:p></o:p>

      </event><o:p></o:p>

      <event name="onclick"><o:p></o:p>

              <params><o:p></o:p>

              </params><o:p></o:p>

      </event><o:p></o:p>

      <event name="ondblclick"><o:p></o:p>

              <params><o:p></o:p>

              </params><o:p></o:p>

      </event><o:p></o:p>

      <event name="onfocus"><o:p></o:p>

              <params><o:p></o:p>

              </params><o:p></o:p>

      </event><o:p></o:p>

      <event name="onkeydown"><o:p></o:p>

              <params><o:p></o:p>

              </params><o:p></o:p>

      </event><o:p></o:p>

      <event name="onkeypress"><o:p></o:p>

              <params><o:p></o:p>

              </params><o:p></o:p>

      </event><o:p></o:p>

      <event name="onkeyup"><o:p></o:p>

              <params><o:p></o:p>

              </params><o:p></o:p>

      </event><o:p></o:p>

      <event name="onmousedown"><o:p></o:p>

              <params><o:p></o:p>

              </params><o:p></o:p>

      </event><o:p></o:p>

      <event name="onmouseenter"><o:p></o:p>

              <params><o:p></o:p>

              </params><o:p></o:p>

      </event><o:p></o:p>

      <event name="onmouseleave"><o:p></o:p>

              <params><o:p></o:p>

              </params><o:p></o:p>

      </event><o:p></o:p>

      <event name="onmousemove"><o:p></o:p>

              <params><o:p></o:p>

              </params><o:p></o:p>

      </event><o:p></o:p>

      <event name="onmouseout"><o:p></o:p>

              <params><o:p></o:p>

              </params><o:p></o:p>

      </event><o:p></o:p>

      <event name="onmouseover"><o:p></o:p>

              <params><o:p></o:p>

              </params><o:p></o:p>

      </event><o:p></o:p>

      <event name="onmouseup"><o:p></o:p>

              <params><o:p></o:p>

              </params><o:p></o:p>

      </event><o:p></o:p>

      <event name="onmousewheel"><o:p></o:p>

              <params><o:p></o:p>

              </params><o:p></o:p>

      </event><o:p></o:p>

    </events><o:p></o:p>

  </published><o:p></o:p>

</class><o:p></o:p>

然后重启动WebShop,事件栏中是不是多一个onresize ,哈哈。

我还发现,不仅仅可以自己定义属性事件,甚至可以自己扩展控件到元件选项板中,等下次我有空了,再告诉大家怎么自定义控件。

 

分享到:
评论
3 楼 try1try 2007-02-01  

比较不错的文章,带有图片,我给个连接地址吧。

AJAX for PHP简单表数据提交实例
2 楼 try1try 2006-12-25  
怎样将DHTML更多属性和事件扩展到AJAX WebShop的属性编辑器中

作 者: 青 玉
用过AJAX WebShop的朋友都知道,这个AJAX工具是全可视化的,非常类似delphi的开发模式,提供了可视化拖拉控件,属性编辑,事件编辑,语法提示等功能,但是有时使用时很奇怪,部分标准的DHTML属性和事件在里面找不到,就不得不手工写代码完成属性设置和事件编程。
最开始我也是这样做的,但经过摸索,我却发现,原来AJAX WebShop是完全支持自己扩展属性和事件的,扩展的方法很简单,大家看我的操作:
首先找到JCL目录下的XML文件,这下面有好多XML文件,一一对应了元件选项板上的控件,随便打开几个看看,居然还有继承的机制,难怪好多XML文件里面几乎没什么内容,好了,现在找到UIControl.xml,里面的内容是这样的:
<?xml version="1.0" encoding="gb2312"?>
<class classname="UIControl" visible="true" iscontainer="false" extends="JCLControl">
  <imports>
    <import>jcl/Control.js</import>
  </imports>
  <private>
  </private>
  <protect>
  </protect>
  <public>
  </public>
  <published>
    <properties>
      <property name="align" type="String" editor="SelectEditor">
   <options>
             <option value="center"/>
     <option value="left"/>
     <option value="right"/>
             <option value="justify"/>
           </options>
      </property>
      <property name="disabled" type="boolean" editor="SelectEditor">
   <options>
     <option value="true"/>
             <option value="false"/>
           </options>
      </property>
      <property name="innerHTML" type="String">
      </property>
      <property name="className" type="String">
      </property>
      <property name="PopupMenu" type="PopupMenu" editor="ObjectEditor">
      </property>
      <property name="style" type="style" editor="TreeEditor">
<properties>
         <property name="backgroundColor" type="String" editor="ColorEditor">
         </property>
         <property name="backgroundImage" type="String">
         </property>
         <property name="borderColor" type="String" editor="ColorEditor">
         </property>
         <property name="borderStyle" type="String" editor="SelectEditor">
   <options>
     <option value="none"/>
             <option value="dotted"/>
             <option value="dashed"/>
             <option value="solid"/>
             <option value="double"/>
             <option value="groove"/>
             <option value="ridge"/>
             <option value="inset"/>
             <option value="window-inset"/>
             <option value="outset"/>
           </options>
         </property>        
         <property name="borderWidth" type="String" >
         </property>
         <property name="borderLeft" type="String" >
         </property>
         <property name="borderTop" type="String" >
         </property>
         <property name="borderRight" type="String" >
         </property>
         <property name="borderBottom" type="String" >
         </property>
        <property name="cursor" type="String" editor="SelectEditor">
   <options>
     <option value="all-scroll"/>
             <option value="auto"/>
             <option value="col-resize"/>
             <option value="crosshair"/>
             <option value="default"/>
             <option value="hand"/>
             <option value="help"/>
             <option value="move"/>
             <option value="no-drop"/>
             <option value="not-allowed"/>
             <option value="pointer"/>
             <option value="progress"/>
             <option value="row-resize"/>
             <option value="text"/>
             <option value="url(uri)"/>
             <option value="vertical-text"/>             
             <option value="wait"/>
             <option value="*-resize"/>             
           </options>
         </property>        
         <property name="display" type="String" editor="SelectEditor">
   <options>
     <option value="block"/>
             <option value="none"/>
             <option value="inline"/>
     <option value="inline-block"/>
             <option value="table-header-group"/>
             <option value="table-footer-group"/>
           </options>
         </property>
         <property name="color" type="String" editor="ColorEditor" >
         </property>
         <property name="fontFamily" type="String" >
         </property>
         <property name="fontSize" type="String" >
         </property>
         <property name="fontStyle" type="String" editor="SelectEditor">
   <options>
     <option value="normal"/>
             <option value="italic"/>
             <option value="oblique"/>
           </options>
         </property>
<property name="paddingTop" type="String">
</property>
<property name="paddingLeft" type="String">
</property>
<property name="paddingRight" type="String">
</property>
<property name="paddingBottom" type="String">
</property>
         <property name="position" type="String" default="absolute" editor="SelectEditor">
   <options>
     <option value="static"/>
             <option value="absolute"/>
             <option value="relative"/>
           </options>
         </property>
         <property name="textAlign" type="String" editor="SelectEditor">
   <options>
     <option value="left"/>
             <option value="right"/>
             <option value="center"/>
             <option value="justify"/>
           </options>
         </property>
         <property name="visibility" type="String" editor="SelectEditor">
   <options>
     <option value="inherit"/>
             <option value="visible"/>
             <option value="hidden"/>
           </options>
         </property>
         <property name="wordWrap" type="String" editor="SelectEditor">
   <options>
     <option value="normal"/>
             <option value="break-word"/>
           </options>
         </property>
         <property name="zIndex" type="Variant" >
         </property> </properties>
      </property>
      <property name="tabIndex" type="Integer">
      </property>
      <property name="title" type="String">
      </property>
    </properties>
    <methods>
    </methods>
    <events>
      <event name="onblur">
<params>
</params>
      </event>
      <event name="onclick">
<params>
</params>
      </event>
      <event name="ondblclick">
<params>
</params>
      </event>
      <event name="onfocus">
<params>
</params>
      </event>
      <event name="onkeydown">
<params>
</params>
      </event>
      <event name="onkeypress">
<params>
</params>
      </event>
      <event name="onkeyup">
<params>
</params>
      </event>
      <event name="onmousedown">
<params>
</params>
      </event>
      <event name="onmouseenter">
<params>
</params>
      </event>
      <event name="onmouseleave">
<params>
</params>
      </event>
      <event name="onmousemove">
<params>
</params>
      </event>
      <event name="onmouseout">
<params>
</params>
      </event>
      <event name="onmouseover">
<params>
</params>
      </event>
      <event name="onmouseup">
<params>
</params>
      </event>
      <event name="onmousewheel">
<params>
</params>
      </event>
    </events>
  </published>
</class>
看到这个就很明白了,只需要按照MSDN中的标准属性和事件增加到XML节点中就搞定啦,我加了如下内容:
      <event name="onresize">
<params>
</params>
      </event>
然后重启动WebShop,事件栏中是不是多一个onresize ,哈哈。
我还发现,不仅仅可以自己定义属性事件,甚至可以自己扩展控件到元件选项板中,等下次我有空了,再告诉大家怎么自定义控件。

本开发工具的下载地址  点击这里
1 楼 daoger 2006-12-19  
js文件没显示,楼主再整理一下吧!

相关推荐

    DHTML手册 DHTML手册

    CSS3的引入带来了更多的动画和过渡效果,增强了DHTML的表现力。 JavaScript作为DHTML的核心,提供了事件处理、对象创建和函数调用等功能。通过监听用户的交互,如点击、滚动等,JavaScript可以触发相应的动态效果,...

    DHTML中文参考手册

    DHTML中文参考手册的CSS属性参考部分将列出常见的CSS选择器、属性和值,例如颜色、字体、边距、布局模式、过渡和动画效果,这些都是创建动态效果的关键。 **可视化滤镜和切换参考** 在早期的IE浏览器中,可视化...

    CSS+DHTML中文手册

    1. **选择器**:CSS2.0引入了更丰富的选择器,如类选择器、ID选择器、元素选择器等,以及后代选择器、相邻兄弟选择器等更复杂的组合选择器,用于精确地定位网页中的元素。 2. **属性与值**:包括颜色、字体、布局、...

    DHTML 默认行为中文手册

    7. **实例分析**:为了帮助读者更好地理解,手册可能会提供多个实际的DHTML示例,包括默认行为的演示和如何修改这些行为以实现特定需求。 8. **最佳实践**:最后,手册可能会给出一些编写高效、可维护的DHTML代码的...

    一个非常漂亮的基于DHTML+ajax实现的标签导航类库代码

    【标签导航】是一种常见的网页设计元素,用于组织和展示页面上的多个内容区域,让用户能够轻松地在不同主题或功能之间切换。在这个项目中,我们看到的是一个利用DHTML(Dynamic HTML)和AJAX(Asynchronous ...

    用VC获得webbrowser中的网页代码(包括dhtml及ajax变动后的)

    通过阅读和理解这些代码,你可以更好地理解如何在VC++中与`WebBrowser`控件交互,以及如何捕获和处理DHTML和AJAX页面的动态内容。 总结来说,获取`WebBrowser`控件中的网页代码,特别是处理DHTML和AJAX变动,需要对...

    Dhtml手册(Dhtml手册.chm)

    例如,可以使用Ajax技术向服务器请求数据,然后用JavaScript将新数据插入到页面的相应位置。 8. **兼容性问题**:由于DHTML涉及的技术在不同的浏览器中有不同的实现,所以开发者需要考虑跨浏览器兼容性,确保在多种...

    基于DHTML+AJAX实现的 Menu类库scripts代码例子

    本篇将深入探讨基于DHTML+AJAX实现的Menu类库scripts代码实例,这一技术主要用于构建动态、交互式的网页菜单系统。DHTML(Dynamic HTML)是一种结合了HTML、CSS、JavaScript以及DOM(Document Object Model)的技术...

    DHTML 手册 DHTML 手册

    DHTML 手册通常会涵盖这些基础知识,以及更高级的话题,如框架库(如jQuery)、AJAX使用、响应式设计、跨浏览器兼容性等。通过深入学习和实践DHTML,开发者能够创建更加丰富、互动的网页应用,提升用户与网页的交互...

    DHTML完全参考手册

    《DHTML完全参考手册》中很可能详细介绍了这些技术的原理、用法和实例,包括但不限于DOM操作、事件处理模型、CSS选择器和样式规则、JavaScript的基本语法和高级特性,以及HTC的使用和限制。这本手册对于提升WEB...

    DHTML源代码和效果

    3. JavaScript:JavaScript是DHTML的核心,提供了与用户交互的能力,处理动态内容和事件。它可以修改HTML元素的属性,改变CSS样式,或者通过AJAX(异步JavaScript和XML)获取和更新服务器数据,从而实现动态效果。 ...

    Dhtml帮助文档 (Dhtml帮助文档)

    DHTML(Dynamic HTML)是一种在网页上实现动态交互效果的技术集合,它结合了HTML、CSS、JavaScript以及DOM(Document ...虽然现代Web开发有更多高级工具和技术,但理解DHTML的基本原理对于前端开发仍然是非常有价值的。

    DHTML 手册中文文档

    DHTML 完全手册 动态 HTML (DHTML) 对象模型参考 &lt;br&gt;DHTML 对象 DHTML 属性 DHTML 方法 DHTML 事件 DHTML 集合 HTML 参考 &lt;br&gt;HTML 元素 HTML 字符集 样式表(CSS)参考 &lt;br...

    最新收集的实用 DHtml 代码例子

    DHtml,全称为Dynamic HTML,即动态HTML,是90年代末互联网技术发展的一个重要阶段。它通过结合HTML、CSS(层叠样式表...同时,也可以将这些实例作为模板,根据实际需求进行调整和扩展,创造出更具个性化的交互式网页。

    DHTML中文文档 用户手册

    **DHTML中文文档用户手册** 是一份针对动态超文本标记语言(DHTML)技术的详细指南,旨在帮助用户深入理解和应用这一技术。DHTML是一种在Web页面上实现交互性和动态效果的技术,它结合了HTML、CSS、JavaScript以及...

    DHTML中文帮助手册CHM格式

    3. **CSS样式指南**:涵盖CSS选择器、属性和布局技巧,教你如何创建美观的动态效果。 4. **DOM操作**:详细阐述如何使用JavaScript操作DOM,实现动态内容更新和用户交互。 5. **实例分析**:提供实际的代码示例和...

    Dhtml 手册

    CSS3引入了更多高级功能,如渐变、阴影、动画和过渡,这些都是DHTML动态效果的关键。 3. **JavaScript**:JavaScript是DHTML的核心,提供了事件处理、对象操作和函数调用等功能,使得网页可以响应用户行为。例如,`...

    常用手册 DHTML 手册.chm

    CSS3的引入更是增强了DHTML的效果,如过渡、动画和3D转换等功能,为网页增添更多视觉效果。 四、DOM与DHTML DOM(Document Object Model)是HTML和XML文档的结构化表示,它将文档解析为一个节点树。开发者可以通过...

    DHTML手册中文chm版下载

    帮助你进行动态的网页制作。。。网页制作完全手册下载 。。DHTML 对象 DHTML 属性 DHTML 方法 DHTML 事件 DHTML 集合 HTML 参考。。DHTML手册中文chm版下载

Global site tag (gtag.js) - Google Analytics