基于链表的网址导航控件

在现代网页设计中,为用户提供直观且响应迅速的导航体验至关重要。本文将介绍一种基于链表的网址导航控件的实现方法,该方法通过客户端存储和JavaScript代码,实现用户界面的交互式导航。这种控件可以让用户根据一级或两级链接(例如,州和县)来改变网站的位置。

控件的优势在于所有数据都存储在客户端的.js文件中,用户无需等待数据库或其他服务器端存储的响应。这些数据可以手动填充,也可以自动从数据库或XML文件中获取。

控件的功能包括:

  • 一个开始按钮,用户点击后会弹出一个窗口,包含三个控件:一个文本控件和两个列表框控件。
  • 箭头按钮可以选择显示或隐藏。
  • 两种模式供用户选择所需项目:用户可以从第一个列表框中选择一个州,然后该州的县会显示在下面的列表框中。
  • 用户可以通过双击县,然后点击出现的箭头按钮来跳转到相应的URL。
  • 第二种(自动完成)模式适用于用户输入字母或单词的情况。第二个列表框会自动隐藏,所有州的县列表会按升序显示在第一个列表框中。
  • 当用户输入的数据不足时,所有列表框都会隐藏。
  • 控件会立即响应用户操作,并在用户点击控件外部的任何区域时自动隐藏。

使用代码:

这是一个.NET实现的用户控件(项目中的Locator.ascx)。服务器端的C#代码负责在Page_Load事件中从XML源文件创建一个JavaScript存储文件。这个存储文件包含数组,存储州和县的名称及其链接。为了确保检索到的是最新版本,每次数据生成后都会更改文件名。控件的使用依赖于两个文件:包含控制功能的JavaScript代码的Locator.js,以及上述定义的JS存储文件(ServiceStore0/1.js)。

JavaScript概要:

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

  • Positions:获取鼠标位置,计算鼠标位置和可拖动控件的top/left坐标的偏移量,计算可拖动对象的当前位置。
  • Drag:提供控件的拖动和自动隐藏功能。拖动功能是通过处理文档的onmousemove事件实现的。处理函数是Drag类的MouseMove成员函数。在这种情况下,可拖动对象是一个ID为“maindiv”的div标签,但在拖动这个对象之前,必须激活它为可拖动。这个操作是在可拖动对象(在这种情况下是“maindiv”)的OnMouseDown事件中执行的。
  • CountySearch:当用户点击第一个列表框中州的名称或在文本框中输入字母时,提供自动完成功能。

自动隐藏功能:

所有控件内的可拖动对象和可拖动对象本身都附加到onblur事件处理程序。当用户点击控件外部时,拖动对象的Focus变量控制未聚焦/聚焦状态。如果焦点没有返回到可拖动对象,timeOut函数会在0.3秒后将其关闭。

使用控件:

这个控件是为IE6及以上版本和Firefox 2.0设计的。控件的自定义实现也可以通过其代码(这是一个数字)找到县。可以通过取消注释或注释全局onTextKeyup(textctrl)函数中的行来打开或关闭这个功能。

JavaScript函数:

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); } }
沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485