自动完成dragable和自动隐藏定位器控件

分享于 

5分钟阅读

Web开发

  繁體

图 1

介绍

网站经常需要根据一个或者两个链接列表中的值将它的位置更改为适当的URL。 如果你想创建一个根据一个或者两个级别链接更改网站位置的控件,可以使用这里控件。 我已经在 IE 7和 Firefox 2.0中测试过。 这种解决方案的优点是在客户端的一个单独的文件中存储所有数据,而用户不必等待数据库或者其他服务器端存储器的响应。 这里存储可以手动填充,也可以自动从数据库中填充,也可以从XML文件中自动填充。

功能

图 2图 3

控件有一个开始按钮。 用户单击它后,会出现一个弹出窗口( 图。 1 ) 具有三个控件: 一个文本控件和两个列表框控件。 可以显示或者隐藏箭头按钮。 控件提供了两种模式来选择所需的项。 用户可以从第一个 List 框中选择一个状态,这些状态的县随后出现在 List 框 below ( 图 Fig )。 1 ) 你可以通过双击该县进入相关的URL,然后单击"显示箭头"按钮。 第二个( 自动完成) 模式是指用户输入一个字母或者一个单词的情况。 第二个列表框将自动隐藏,并且所有状态的县 List 在第一个列表框中出现升序( 图)。 2 )。当用户输入不足数据时,所有列表框都将被隐藏( 图。 3 ) 注意,控件立即响应用户操作。 当用户单击它之外的任何区域时,控件自动隐藏。

使用代码

这是一个用户控件( Locator.ascx 在项目中)的.NET 实现。 服务器端 C# 代码提供了从 Page_Load 中的XML源文件创建一个JavaScript存储文件。 这个存储文件包含存储州名和县名及其链接的数组。 要确保检索到的最后一个版本将被检索,在每次数据生成后文件 NAME 都会被更改。 控件使用情况取决于两个文件: 使用JavaScript代码控制功能所需的JavaScript代码和定义的上面 存储文件( servicestore0/1.JS )。

JavaScript大纲:

JavaScript功能代码由三个类组成:

  • Positions
  • Drag
  • CountySearch

当用户在第一个 List 框中单击状态的NAME 或者在文本框中输入字母时,CountySearch 类提供自动完成功能。 Positions 类获取鼠标位置,计算鼠标位置和顶/左坐标的偏移量,计算of对象的当前位置。 Drag 类提供控件的拖动和自动隐藏功能。 拖动功能是通过处理文档事件的onmousemove 来实现的。 处理函数是 Drag 类的MouseMove 成员函数。 这里,dragable对象是带有 ID" maindiv"的div 标记,但是在拖动这个对象之前,我们必须将它作为dragable激活。 这里操作在dragable对象( 在这种情况下" maindiv")的OnMouseDown 事件期间执行。 我在 Drag 类的makeDragable() 函数中动态地将 OnMouseDown 事件附加到这个对象。

this.makeDragable = function(object) // object is dragable object{
 object.onmousedown = function() // handling function of  {
 OnFocus(object);
 self.dragObject = object;
 self.mouseOffset = m_Pos.getMouseOffset(object, self.mousePos);
 }
}

自动隐藏功能所有控件 inside dragable对象和拖动对象本身附加到 onblur 事件处理程序。 当用户单击控件的外部时,对象变量的拖动 Focus 将控制未聚焦的/焦点状态。 如果焦点不返回到dragable对象,则 timeOut 函数在 0.3秒后将它的关闭。

使用控件

控件是针对IE6和 上面 以及 Firefox 2.0设计和测试的。 控制实现的定制也通过它的代码( 这是一个数字) 来查找国家。 你可以通过取消注释或者注释来自全局 onTextKeyup(textctrl) 函数的行来打开/关闭这里功能。

function onTextKeyup(textctrl)
{
. . .
. . .
 //if (ch> 57 || ch// <48)//this is letter not digit//{ county.GetCounties(textctrl.value, count, name_services, m_select1, m_div1);
 //}// else// {// county.GetCounties(textctrl.value, cfipses, ips_services,m_select1, m_div1);
 // }} 

若要在页面的较高层设置控件,请在dragable对象样式style设置适当的z-index。

所有县都被链接到CodeProject的主页。


控制  AUTO  LOC  拖动  自动完成  
相关文章