YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Downloads » PropertySelector – jQuery 商品属性选择器插件

PropertySelector – jQuery 商品属性选择器插件

程序简介:

PropertySelector是为朋友的一个电子商务网站开发的一个小程序。而我发现在blueidea论坛的前端开发板块也有朋友问类似淘宝那样的商品属性选择器怎么实现。我这里用的jQuery实现的PropertySelector,相信应该能够满足大家在平时的开发需求的了。

多组属性+单个属性可以多个子属性

$.PropertySelector.select({
	onlyone: true
});
	
$('#save-selected').click(function(){
	var savedValueToUrl = $.PropertySelector.getSelectedValuesToURL();
	alert(savedValueToUrl);
});

动态加载子属性 + 多组属性 + 单个属性只能选一个子属性

var mainCategorySelector = function(){
		$.PropertySelector.select({
			titles: $("#property-main h3"),
			lists: $("#property-main ul"),
			onlyone: true
		});
	}, subCategorySelector = function(){
		$.PropertySelector.select({
			titles: $("#property-second h3"),
			lists: $("#property-second ul"),
			onlyone: true
		});
	}, propertySelector = function(){
		$.PropertySelector.select({
			titles: $("#property-third h3"),
			lists: $("#property-third ul")
		});
	}, mainTabView = function(){
		$.ajaxTabView($('#property-main li'), $('#property-second')[0], function(){
			var selectedSubCategory = $('#selected-sub-category')[0],
			    selecedProperty = $('#selected-property')[0],
				values = $.PropertySelector.getSelectedValues();
				
			subCategorySelector();
			subTabView();
			
			if (selectedSubCategory) {
				$(selectedSubCategory).remove();
				
				if (values['sub-category'].length > 0) {
					values['sub-category'].length = 0;
				}
				
				$('#property-third').html('');
			}
			
			if (selecedProperty) {
				$(selecedProperty).remove();
				
				if (values['property'].length > 0) {
					values['property'].length = 0;
				}
			}
		});
	}, subTabView = function(){
		$.ajaxTabView($('#property-second li'), $('#property-third')[0], function(){
			var selecedProperty = $('#selected-property')[0],
				values = $.PropertySelector.getSelectedValues();
			if (selecedProperty) {
				$(selecedProperty).remove();
				
				if (values['property'].length > 0) {
					values['property'].length = 0;
				}
			}
			propertySelector();
		});
	};
	
	mainTabView();
	subTabView();
	mainCategorySelector();
	
	$('#save-selected').click(function(){
		var savedValueToUrl = $.PropertySelector.getSelectedValuesToURL();
		alert(savedValueToUrl);
	});
	
$('#save-selected').click(function(){
	var savedValueToUrl = $.PropertySelector.getSelectedValuesToURL();
	alert(savedValueToUrl);
});

多组属性+单个属性只能单个子属性

$.PropertySelector.select();
	
	$('#save-selected').click(function(){
		var savedValueToUrl = $.PropertySelector.getSelectedValuesToURL();
		alert(savedValueToUrl);
	});

选择后的数据会保存到一个数组里,然后点击保存的时候会自动的生成查询URL地址。如下图:

下载地址:PropertySelector.zip

程序特点:

  1. 支持Ajax动态加载子属性
  2. 支持多选子属性或只能单选
  3. 已经选择的属性可以取消(删除)重选
  4. 自动生成属性查选URL地址
  5. 浏览器兼容性好

程序 JavaScript 源代码

(function(){
	jQuery.ajaxTabView = function(tabs,cnt,callback){
		$(tabs).each(function(i){
			$(this).click(function(evt){
				var lnk = $(this).find('a')[0], 
				    url = $(lnk).attr('href'), 
					key = url.split('/')[0], 
					value = url.split('/')[1], 
					curTab = $(this)[0];
				
				jQuery.Ajax({
					url: key + '.html',
					type: 'GET',
					data: {
						key: value
					},
					dateType: 'html',
					success: function(html){
						$(cnt).show().html(html);
						if (callback) {
							callback();
						}
					},
					error: function(xhr){
						alert('错误:' + xhr.status);
					}
				});
				
				evt.preventDefault();
				evt.stopPropagation();
			});
		});
	};
})();

(function(){
	var selectedProperties = {
			values: {},
			keys: {}
		}, 
		header = null, 
		titles = null, 
		lists = null, 
		tabTag = '',
		isOnlyOne = {}, 
		lastSelectedTab = null, 
		selectedCounter = 0,
		indexOf = (Array.prototype.indexOf) ? function(a, val){
			return Array.prototype.indexOf.call(a, val);
		}: function(a, val){
		    var i = 0, len;
		    for (len = a.length; i < len; i = i + 1) {
				if (a[i] === val) {
					return i;
				}
			}
		
		    return -1;
	    };
		
	jQuery.PropertySelector = {	
		isOnlyOne: {},
		length: 0,
		/**
		 * @method select
		 * @param {Object} config
		 */
		select: function(config){
			var selector = this;
			
			header = (config && config.header) ? config.header : $("#property-header");
			titles = (config && config.titles) ? config.titles : $("#property-selector h3");
			lists = (config && config.lists) ? config.lists : $("#property-selector ul");
			tabTag = (config && config.tabTag) ? config.tabTag : 'li';
			
			lists.each(function(i){
				var tabs = $(this).find(tabTag), 
				    property = $(titles[i]).attr("id"), 
				    propertyText = $(titles[i]).text(),
				    keys = selectedProperties.keys,
				    values = selectedProperties.values; 
				
			    isOnlyOne[property] = (config && config.onlyone);
				selector.isOnlyOne[property] = isOnlyOne[property];
				
				values[property] = [];
				keys[property] = [];
				
				if (isOnlyOne[property]) {
					values[property].length = 1;
					keys[property].length = 1;
				}
				
				tabs.each(function(j){
					$(this).click(function(evt){
						var lnk = $($(this).find('a')[0]), value = lnk.attr('href').split('/')[1], valueText = $(this).text(), selectedKeyURL = property + '/' + value + '/', selectedKey = $('<a class="property" href="' + selectedKeyURL + '" tabindex="' + j + '" title="点击我可以取消选择">' + valueText + '</a>');
						selectedTab = $('#selected-' + property)[0];
						selectedTabTitle = $('#selected-' + property + '-title')[0];
						if (!selectedTab) {
							selectedTab = $('<span id="selected-' + property + '"></span>');
							header.append(selectedTab);
						}
						else {
							if (selectedTab) {
								$(selectedTab).show();
							}
						}
						
						if (!selectedTabTitle) {
							selectedTabTitle = $('<em id="selected-' + property + '-title"></em>').html(propertyText);
							$(selectedTab).append(selectedTabTitle);
						}
						
						if (isOnlyOne[property]) {
							values[property][0] = value;
							keys[property][0] = valueText;
							selectedCounter = 1;
							$(this).hide();
							$(lastSelectedTab).show();
							$($(selectedTab).find('a')[0]).remove();
							$(selectedTab).append(selectedKey);
							
							lastSelectedTab = $(this);
						}
						else {
							values[property].push(value);
							keys[property].push(valueText);
							selectedCounter += 1;
							$(this).hide();
							$(selectedTab).append(selectedKey);
						}
						
						$(selectedKey).click(function(evt){
							var tabIndex = $(this).attr('tabindex'), valueIndex = indexOf(value, values[property]);
							
							$(this).remove();
							if (isOnlyOne[property]) {
								selectedCounter = 0;
							}
							else {
								selectedCounter -= 1;
								if (selectedCounter < 0) {
									selectedCounter = 0;
								}
							}
							$(tabs[tabIndex]).show();
							if ($(selectedTab).find('a').length === 0) {
								$(selectedTab).hide();
							}
							
							values[property].splice(valueIndex, 1);
							
							selector.length = selectedCounter;
							
							evt.preventDefault();
							evt.stopPropagation();
						});
						
						selector.length = selectedCounter;
						
						evt.preventDefault();
						evt.stopPropagation();
					});
				});
			});
		},		
		getSelectedProperties: function(){
			return selectedProperties;
		},
		getSelectedValues: function(){
			return selectedProperties.values; 
		},
		getSelectedKeys: function(){
			return selectedProperties.keys; 
		},
		getSelectedValuesToURL: function(){
			var values = selectedProperties.values, value, key, i = 0, len = 0, url = '', decode = decodeURIComponent;
			
			for (key in values) {
				value = values[key];
				if (jQuery.isArray(value)) {
					$(value).each(function(k, val){
						if (val) {
							url += (url ? '&' : '') + key + '=' + decode(val);
						}
					});
				}
				else {
					if (value) {
						url += (url ? '&' : '') + key + '=' + decode(value);
					}
				}
			}
			
			return url;
		}
	};
})();

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:PropertySelector – jQuery 商品属性选择器插件

« »

1 条评论

  • BUG 修复:

    新版本的程序修复了选择多属性后,删除属性时,属性容器标签无法删除的 BUG

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)