在现代网页设计中,为用户提供直观且响应迅速的导航体验至关重要。本文将介绍一种基于链表的网址导航控件的实现方法,该方法通过客户端存储和JavaScript代码,实现用户界面的交互式导航。这种控件可以让用户根据一级或两级链接(例如,州和县)来改变网站的位置。
该控件的优势在于所有数据都存储在客户端的.js文件中,用户无需等待数据库或其他服务器端存储的响应。这些数据可以手动填充,也可以自动从数据库或XML文件中获取。
控件的功能包括:
使用代码:
这是一个.NET实现的用户控件(项目中的Locator.ascx)。服务器端的C#代码负责在Page_Load事件中从XML源文件创建一个JavaScript存储文件。这个存储文件包含数组,存储州和县的名称及其链接。为了确保检索到的是最新版本,每次数据生成后都会更改文件名。控件的使用依赖于两个文件:包含控制功能的JavaScript代码的Locator.js,以及上述定义的JS存储文件(ServiceStore0/1.js)。
JavaScript概要:
JavaScript功能代码由三个类组成:
自动隐藏功能:
所有控件内的可拖动对象和可拖动对象本身都附加到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);
}
}