ABCABC 处理 JavaScript 中的可视化对象

• 下载源代码 - 12.75 KB

引言

我知道每个人都讨厌 Web 脚本，原因有很多，我可以坚持其中的一些，但是对于那些看到隧道尽头的光亮的人，我愿意提供一些代码实践，用于处理在编程 Web UI 时的敏感视觉方面。

下面显示的示例旨在启发思路，并可能以一种不太复杂的方式，使用基本的 HTML 对象和标签，让实践者更接近他们的解决方案。 我所说的经典 HTML 对象和标签是：DIV 和 TABLE。 更进一步，我们将 DIV 视为图形形状，因此，我们将仅处理矩形形状，因为这些对象本身就是矩形。

注意：此项目的漏洞：它仅设计为在 Internet Explorer Web 浏览器下工作。

我想讨论的主题

1. 如何以可视化方式控制图形形状 – 创建、移动、调整大小、删除。
2. 此外，为了使这些对象得到类似的处理，我们需要定义一个具有相同类型和相同行为的对象集合。
3. 然后，为了让这些动词发挥作用并执行一些操作，您需要在 UI 中的每个对象上应用不同的用户友好的上下文菜单。

当然，我所说的每个对象都在项目中包含的不同 JS 文件中定义，并使用不同的 CSS 文件，如下所示

• 对于区域对象- GCZones.js 和 styleZone.css
• 对于显示 - GCDisplay.js 和 styleDisplay.css
• 对于 ContextMenu – GCContextMenu.js 和 styleCM.css
• 对于文档 – GCDocument.js

可视化控制图形形状

1. 在显示界面中创建区域
   注意：您需要为区域的宽度和高度实现默认值。创建新区域对象的位置是当前的鼠标位置。

   var defaultWidth = 300; 
   var defaultHeight = 200; 
   ... 
   //
   // creates new zone with default size 
   //
   function CreateZone(obj)
   {
       obj = document.getElementById("display");
       if (obj == null)
           return; 
   
       (new Zone(event.clientX, event.clientY, defaultHeight, defaultWidth)).Show();
   }

   

2. 调整显示界面中区域的大小
   注意：在调整大小时，我为该区域实现了一个最小尺寸，并且它是硬编码的。

3. 删除区域
   注意：删除一个区域意味着隐藏 div 对象并重置区域的私有计数器

   

4. 在显示界面中停靠区域
   注意：停靠时，请记住停靠索引，以便您可以使用显示界面的剩余空间。

   

5. 在显示界面中移动区域
   注意：移动时，您需要考虑窗口的坐标，显示界面在窗口中的位置和大小以及显示界面的边框粗细。

6. 选择当前区域
   注意：选择一个区域意味着将其“提升”到最顶层并使用不同的颜色来标记它

   

模拟类似区域集合的用法

• 首先，创建将定义一个 zone 对象的功能

  //
  // define the Zone object 
  //
  function Zone(posX, posY, height, width)
  {
      this.id = "zone" + zoneNo; 
      this.top = posY; 
      this.left = posX; 
      this.height = height; 
      this.width = width; 
      this.Show = function () {ShowZone(this);}
      //this.background = zoneColor; 
      this.dock = "None"; 
      this.deleted = false; 
      ZoneList[zoneNo] = this;
      zoneNo++; 
  }

• 然后创建一个具有集合所有功能的函数（添加、插入、删除、索引等），并明确发送到这些函数的参数对象，以将其视为先前定义的 Zone 类型。

  //
  // define a simple array  
  //
  var ZoneList = new Array; 
  
  //
  // create functions that describe collection functionality ...
  // 

• 是的，并且不要忘记为从显示界面创建或删除的区域声明一个私有计数器。

为您创建的特殊形状创建上下文菜单功能

例如，这个小型应用程序使用为两种不同类型的对象定义的 CM

• 一个是用于显示界面的，它显示可以应用于显示界面的特定操作
• 另一个用于显示界面中的区域，它显示可以应用于显示的区域的操作

在我看来，CM 库最好的事情是易于声明和编码，非侵入性，并且仍然能够具有吸引人的外观，就像下面描述的那样

// 
// declare CM options 
// 
var optMenuDisplay = new Array(); 
// these declarations allow the user to define 
optMenuDisplay[0] = new MenuItem("Create zone", "CreateZone();", "images\\create.gif");
optMenuDisplay[1] = new MenuItem("Change display", "ChangeDisplay();", 
        "images\\check2.gif"); // a CM item with a relevant image attached 
// this option draws a separator between CM items 
optMenuDisplay[2] = new MenuItem("hr", "hr");                                          
// this declaration creates a simple CM item 
optMenuDisplay[3] = new MenuItem("About", "About();");
var cmDisplay = new ContextMenu(optMenuDisplay); 
cmDisplay.Create(); 

... CM 的其余功能位于完善的 JS 库中。

一般信息

可以选择更改显示界面的大小。 调整显示界面大小会触发显示界面内 Zone 的大小调整。

历史

• 2007 年 7 月 13 日：首次发布