html下拉菜单读取xml,基于XML的可配置Html下拉框的设计与实现

(江西制造职业技术学院信息工程系,江西 南昌 330000)

摘 要:专门针对Web下拉框控件影响网页性能、不利于美工和维护等问题,通过比较Web下拉框与Html下拉框各自的利弊,提出一种基于XML实现可配置Html下拉框的方法。该方法提高网页性能、方便界面美工、提高维护效率。

关键词:Html控件;XML;JavaScript;可配置

中图分类号:TP 文献标识码:A文章编号:1672-3198(2011)01-0302-01

1 下拉框的潜在问题

1.1Web下拉框控件影响性能

Web下拉框控件最大的优势在于全面,既能满足前台选择的需要,也能满足后台数据库交互的需要。正因为这样,Web下拉框控件受到大部分初学者的青睐。然而,通常情况下,下拉框控件只被用于选项选择,不与后台数据库交互。此时,Web下拉框控件的回发特性无形中给IE浏览器造成负载压力,使之无故刷新,严重时引起假死白屏。

1.2 Web下拉框控件不利于美工

Web下拉框控件是对Html下拉框控件的综合封装,其美工设计都是“傻瓜式”的点对点。易于配置的同时,牺牲了灵活性,众多复杂的特效难以实现,极不利于高级美工调整。

1.3 下拉框控件选项难以保持一致

无论是Web下拉框控件还是Html下拉框控件,其选项必须事先录入。代码表现为:

江西

若该下拉框被同时用于多个Html页面,一旦发生变化,所有被涉及的页面都要统一修改,稍有遗漏便会导致页面间相同下拉框选项不一致,极不利于后期维护。

2 改进总体方案

2.1 改用Html下拉框控件 提高性能和美工灵活性

Web下拉框控件影响性能,主要是因为Web控件具有回发特性,即页面每次刷新都要往返服务器。若不与服务器上的数据库交换数据,这种回发是完全没有必要的。对于常用于选项选择,不与数据库交换数据的下拉框而言,每次回发无疑是一种性能上的耗费。

相比之下,Html下拉框控件是纯粹的客户端控件,即页面每次刷新都不与服务器回发,不与数据库交换数据,非常适合仅做选项选择的下拉框。因为不必做无谓的回发,所以有效提高网站性能。

另一方面,正因为改用了Html下拉框控件,解除了Web控件在美工方面的封装束缚,使得美工师能够直接对其Html代码进行加工,从而灵活实现各种特效。

2.2 使用XML保持下拉框控件选项一致性

为保持选项的一致性,只能把所有选项统一存放于配置文件处,即实现下拉框选项的可配置性。这样,所有下拉框都从该配置文件中获取选项内容,有效避免因选项变化导致下拉框选项不一致的逻辑错误。

其实,配置文件就是一个小型数据库,存取原理与数据库相同。但选用SQL或ORACLE这样大型的数据库做配置文件不利于后期部署。所以,选择适合小型文件的XML技术较为适合。

2.3 基于XML的可配置Html下拉框的总体设计

当页面加载时,Html控件通过JavaScript脚本从XML文件获取并显示选项内容。其中,Html下拉框控件是纯粹的客户端控件,不引起与服务器的回发,提高客户端性能。XML文件作为配置文件,旨在存储下拉框选项内容。JavaScript也是纯粹的客户端技术,旨在绑定Html下拉框控件和XML文件。如图1所示。

3 XML实现配置性的详细方案

3.1 定义XML文件格式

XML文件作为配置文件的载体,首先要定义供数据存取的结构。如定义性别下拉框的选项。首先定义性别选项框,然后定义选项内容,代码如下:

若要添加新的下拉框及其选项内容,只需在后面追加即可,非常利于今后扩展。

3.2 定义JS脚本代码

XML文件中的选项内容若要在下拉框中显示,必须通过JavaScript脚本绑定。其脚本执行流程为:首先通过传参的方式定位XML文件,然后进入加载环节。加载时,先判断是否加载过该XML文件。若已加载,直接进入绑定环节。若未加载,先加载XML文件,再进入绑定环节。绑定时,先判断是否将选项与下拉框绑定过。若已绑定,先清空下拉框选项,再重新绑定。若未绑定,直接进行绑定该流程。

3.3 使用JS脚本绑定下拉框选项

首先把JS脚本拖拽进Html页面,代码如下:

然后在Html页面中创建Html下拉框控件,代码如下:

最后执行JS脚本实现绑定。在后台通过代码Page.ClientScript.RegisterStartupScript(typeof(string),"", @" InitSelect('../Xml/Enum.xml', 'sex', 'Root//Sex');")调用。其中从InitSelect方法的各项参数可知,名为sex的Html下拉框控件将从../Xml/Enum.xml配置文件中获取绑定Root/Sex下的选项内容。

参考文献

[1](美)泽卡斯著,李松峰等译.JavaScript高级程序设计(第2版)[M].北京:人民邮电出版社,2010.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值