当前位置：首页 > news >正文

东营做网站优化哪家好/网络营销策略案例

news 2025/7/1 0:59:24

东营做网站优化哪家好,网络营销策略案例,江西建设门户网站,深圳网站设计平台资源源码下载地址：http://download.csdn.net/source/2689287 最新版本请到https://github.com/oxcow/ProvCitySelected下载。利用js读取xml文件，通过xpath表达式获取所要数据，封装实现联动菜单。整个过程使用OOP思想进行处理。主要包含5…

资源源码下载地址：http://download.csdn.net/source/2689287

最新版本请到https://github.com/oxcow/ProvCitySelected下载。

利用js读取xml文件，通过xpath表达式获取所要数据，封装实现联动菜单。

整个过程使用OOP思想进行处理。主要包含5个对象：

HtmlSelect对象。该对象为页面下拉标签对象；
ProvinceAndCityLink对象。该对象为联动菜单基类对象。
Province对象。该对象继承自ProvinceAndCityLink对象，为省下拉菜单对象。
City对象。该对象继承自ProvinceAndCityLink对象，为市下拉菜单对象。
Area对象。该对象继承自ProvinceAndCityLink对象，为地区下拉菜单对象。

类图如下：

主代码如下：/*** html select 标签类* * @param {string}* sId 标签id* @param {string}* sName 标签 name* @param {string}* sVal 标签值* @constructor* @returns {HtmlSelect}*/ function HtmlSelect(sId, sName, sVal) {this.id = sId;this.name = sName;this.val = sVal;this.select = this.createSelect_(); } /*** 创建select元素* @private* @returns {Element} select element*/ HtmlSelect.prototype.createSelect_ = function() {var oSelect = document.createElement("select");oSelect.setAttribute("id", this.id);oSelect.setAttribute("name", this.name);return oSelect; }; /*** 创建并添加 option 元素* * @param {string}* sVal option 元素 value* @param {string}* sText option 元素显示值* @returns {Element} option element*/ HtmlSelect.prototype.addOption = function(sVal, sText) {/*** 创建option方法1 * 使用该方法IE6/FF下，默认selected不会出现错位*/var option = document.createElement("option");option.appendChild(document.createTextNode(sText));option.setAttribute('value', sVal);if (this.val && sVal == this.val) {option.setAttribute('selected', 'selected');}this.select.appendChild(option);/*** 创建option方法2 * 使用该方法IE6下，默认selected会出现错位*/ // var option = null; // if (this.val && sVal == this.val) { // option = new Option(sText, sVal, true, true); // } else { // option = new Option(sText, sVal, false, false); // } // try { // this.select.add(option, null); // standards compliant // } catch (ex) { // this.select.add(option); // IE only // }/*** 创建option方法2 * 使用该方法IE6下，默认selected会出现错位*/ // var option = document.createElement("option"); // option.value = sVal; // option.text = sText; // if (this.val && sVal == this.val) { // option.setAttribute('selected', 'true'); // } // //this.select.appendChild(option);IE6下此时不可用appendChild添加 // try { // this.select.add(option, null); // standards compliant // } catch (ex) { // this.select.add(option); // IE only // } }; /*** 清除 select 元素下所有的 option 元素* */ HtmlSelect.prototype.cleanOptions = function() {if (this.select && this.select.options.length != 0) {for ( var i = this.select.options.length - 1; i >= 0; i--) {this.select.remove(this.select.options[i]);}} }; /*** 显示select标签在页面中* * @param {string}* offset select元素父节点id*/ HtmlSelect.prototype.showHtml = function(offset) {var op = document.getElementById(offset);op.appendChild(this.select); }; /*** 省市地区联动菜单类* * @param {string}* sOffset 位置* @param {string}* sName 菜单名* @param {string}* sVal 菜单值* @constructor* @returns {ProvinceAndCityLink}*/ function ProvinceAndCityLink(sOffset, sName, sVal) {this.xml = loadxml();this.offset = sOffset;this.id = "id_" + (new Date()).getTime();this.name = sName;this.val = sVal;/*** @type {HtmlSelect}*/this.htmlSelect = new HtmlSelect(this.id, this.name, this.val); } /*** 初始化数据并显示在页面指定元素中* * @param {string}* xPath xPath表达式*/ ProvinceAndCityLink.prototype.init = function(xPath) {var xmlData = this.xml.documentElement.selectNodes(xPath);if (!this.val && xmlData[0]) {// 如果没有默认值，则将第一个元素设置为默认值this.val = xmlData[0].getAttribute("name");this.htmlSelect.val = this.val;}for ( var i = 0; i < xmlData.length; i++) {this.htmlSelect.addOption(xmlData[i].getAttribute("name"),xmlData[i].getAttribute("name"));}this.htmlSelect.showHtml(this.offset); }; /*** 联动菜单onchange事件* * @param {string}* xPath 新数据 xPath 表达式* @returns*/ ProvinceAndCityLink.prototype.change = function(xPath) {var oLink = ProvinceAndCityLink["link_" + this.id];// 获取onchange方法的绑定对象oLink.htmlSelect.cleanOptions();var sXpath = oLink.xPath.replace("&var", this.value);// 替换xPath中的变量部分var xmlData = oLink.xml.documentElement.selectNodes(sXpath);for ( var i = 0; i < xmlData.length; i++) {oLink.htmlSelect.addOption(xmlData[i].getAttribute("name"),xmlData[i].getAttribute("name"));}var oLinkedLink = ProvinceAndCityLink["link_" + oLink.id];// 获取被绑定对象onchange绑定的对象if (oLinkedLink) {oLinkedLink.htmlSelect.cleanOptions();var data = xmlData[0].childNodes;for ( var j = 0; j < data.length; j++) {if (data[j].nodeType == 1) {// ELEMENT_NODEoLinkedLink.htmlSelect.addOption(data[j].getAttribute("name"), data[j].getAttribute("name"));}}} }; /*** 省份下拉对象* * @param {string}* sOffset 显示位置* @param {string}* sName 变量名* @param {string}* sVal 变量值* @constructor* @extends {ProvinceAndCityLink}* @returns {Province}*/ function Province(sOffset, sName, sVal) {ProvinceAndCityLink.call(this, sOffset, sName, sVal);this.xPath = "//province";this.init(this.xPath); } Province.prototype = new ProvinceAndCityLink(); /*** 省市联动* * @param {City}* oCity 联动市对象*/ Province.prototype.linkCity = function(oCity) {oCity.xPath = "//province[@name='&var']/city";ProvinceAndCityLink["link_" + this.id] = oCity;// 指定当前province绑定的citythis.htmlSelect.select.onchange = this.change;if (this.val) {var sXpath = oCity.xPath.replace("&var", this.val);oCity.init(sXpath);} }; /*** 市下拉对象* * @param {string}* sOffset 显示位置* @param {string}* sName 变量名* @param {string}* sVal 变量值* @param {boolean|undefined|null}* isInit* <ul>* 是否初始数据。默认为false。* <li>如果只是构造单独的市下拉菜单，则需要设置该变量为true</li>* <li>如果是构造联动菜单，则需要将该变量设置为false</li>* </ul>* @constructor* @extends {ProvinceAndCityLink}* @returns {City}*/ function City(sOffset, sName, sVal, isInit) {ProvinceAndCityLink.call(this, sOffset, sName, sVal);this.xPath = "//city";if (isInit) {this.init(this.xPath);} } City.prototype = new ProvinceAndCityLink(); /*** 市区联动* * @param {Area}* oArea 区对象*/ City.prototype.linkArea = function(oArea) {oArea.xPath = "//city[@name='&var']/country";ProvinceAndCityLink["link_" + this.id] = oArea;// // 指定当前city绑定的areathis.htmlSelect.select.onchange = this.change;if (this.val) {oArea.htmlSelect.cleanOptions();var sXpath = oArea.xPath.replace("&var", this.val);oArea.init(sXpath);} }; /*** 地区下拉对象* * @param {string}* sOffset 显示位置* @param {string}* sName 变量名* @param {string}* sVal 变量值* @param {boolean|undefined|null}* isInit* <ul>* 是否初始数据。默认为false。* <li>如果只是构造单独地区下拉菜单，则需要设置该变量为true</li>* <li>如果是构造联动菜单，则需要将该变量设置为false</li>* </ul>* @constructor* @extends {ProvinceAndCityLink}* @returns {Area}*/ function Area(sOffset, sName, sVal, isInit) {ProvinceAndCityLink.call(this, sOffset, sName, sVal);this.xPath = "//country";if (isInit) {this.init(this.xPath);} } Area.prototype = new ProvinceAndCityLink();

页面调用html代码：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>省市区联动菜单</title> <mce:script type="text/javascript" src="loadxml.js" mce_src="loadxml.js"></mce:script> <mce:script type="text/javascript" src="C_area.js" mce_src="C_area.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <fieldset><legend>单独取省</legend> 无默认值： 有默认值： </fieldset> <fieldset><legend>单独取市</legend> 无默认值： 有默认值: </fieldset> <fieldset><legend>单独取地区</legend> 无默认值： <spanid="single_area_n"> 有默认值: </fieldset> <fieldset><legend>省市联动</legend> 无默认值： <spanid="pc_c_n"> 有默认值: </fieldset> <fieldset><legend>市地区联动</legend> 无默认值： <spanid="ca_a_n"> 有默认值: </fieldset> <fieldset><legend>市地区联动</legend> 无默认值： <spanid="lc"> 有默认值: <spanid="lc1"></fieldset> </body> </html>

查看全文

http://www.jmfq.cn/news/5221711.html