产品对比插件
1 $.fn.comparison = function (options) { 2 var defaults = { 3 coparison: $('<div></div>').attr({ 'class': 'compCon', 'id': 'comparisonCon' }), 4 hideDivBtn: $('<a></a>').attr({ 'class': 'hideDivBtn', 'href': 'javascript:void(0);' }).text('隐藏'), 5 selectedplan: $('<ul></ul>').attr({ 'id': 'selectedplan' }), 6 clearLink: $('<a></a>').attr({ 'class': 'buttonLink', 'href': 'javascript:void(0);' }).text('清空'), 7 compLink: $('<a></a>').attr({ 'class': 'buttonLink', 'href': 'javascript:void(0);' }).text('对比') 8 } 9 var opts = $.extend(defaults, options); 10 11 12 opts.coparison.append(opts.hideDivBtn, opts.selectedplan, opts.selectedplan, opts.clearLink, opts.compLink); 13 //显示对比窗口 14 function toShow() { 15 opts.coparison.show().animate({ 16 "right": 0 17 }, 300, function () { 18 if (opts.selectedplan.html()) { 19 opts.selectedplan.slideDown(300); 20 } 21 }); 22 } 23 //隐藏对比窗口 24 function toHide() { 25 if (opts.selectedplan.html()) { 26 opts.selectedplan.slideUp(300, function () { 27 opts.coparison.animate({ 28 "right": -150 29 }, 300, function () { 30 opts.coparison.hide(); 31 }); 32 }); 33 } else { 34 opts.coparison.animate({ 35 "right": -150 36 }, 300, function () { 37 opts.coparison.hide(); 38 }); 39 }; 40 41 } 42 //清空对比项目 43 function clearAllItems() { 44 opts.selectedplan.slideUp(300, function () { 45 opts.selectedplan.empty(); 46 $(".selected").addClass('un_select').removeClass('selected'); 47 toHide(); 48 }); 49 50 } 51 //删除对应对比产品 52 function delItem(obj) { 53 54 $(obj).closest("li").slideUp(300, function () { 55 $(obj).closest("li").remove(); 56 if (!opts.selectedplan.html()) 57 toHide(); 58 }); 59 var id = $(obj).parent().attr("id"); 60 id = id.substr(2, id.length); 61 $("#" + id).addClass('un_select').removeClass('selected'); 62 63 } 64 //获取产品信息 65 function actionplan(obj) { 66 var othis = $(obj); 67 if ($(document.body).find(opts.coparison.attr('id'))) { 68 $(document.body).append(opts.coparison); 69 } 70 var itemPicHtml = othis.closest("li").find("img").eq(0).closest("a"); 71 var itemName = othis.closest("li").find("h2,h3,h4,h5").children(); 72 var itemId = othis.attr('id'); 73 74 addCompItems(itemPicHtml, itemName, itemId); 75 76 77 } 78 //添加产品到对比列表 79 function addCompItems(itemPicHtml, itemName, itemId) { 80 if (!opts.coparison.is(":animated")) { 81 if (!$("#" + itemId).hasClass('selected')) { 82 if (opts.selectedplan.children('li').length > 3) { 83 alert("最多支持四个产品的对比！"); 84 return false; 85 } else { 86 if (!opts.selectedplan.children('li').is(":animated")) { 87 var selectedItems = $('<li></li>').attr({ 'id': 'li' + itemId }).hide(); 88 var selectTtemPic = $('<div></div>').attr({ 'class': 'selectTtemPic' }).append(itemPicHtml.clone()); 89 var selectTtemName = $('<h2></h2>').append(itemName.clone()); 90 var valInput = $('<input></input>').attr({ 'type': 'hidden' }).val(itemId); 91 var closeBtn = $('<span></span>').attr({ 'class': 'close' }).click(function () { 92 delItem(this); 93 }); 94 opts.selectedplan.append(selectedItems.append(selectTtemPic, selectTtemName, valInput, closeBtn)); 95 96 $("#" + itemId).attr("class", "selected"); 97 if (opts.coparison.is(':hidden')) { 98 opts.coparison.show().animate({ 99 "right": 0 100 }, 300, function () { 101 if (opts.selectedplan.is(":hidden")) { 102 opts.selectedplan.find('li:hidden').show().end().slideDown(300); 103 } else 104 opts.selectedplan.find('li:hidden').slideDown(300); 105 }); 106 } else 107 opts.selectedplan.find('li:hidden').slideDown(300); 108 } else 109 opts.selectedplan.find('li:hidden').slideDown(300); 110 } 111 } else { 112 if (opts.coparison.is(':hidden')) { 113 $("#li" + itemId).remove(); 114 toShow(); 115 if (!opts.selectedplan.html()) 116 toHide(); 117 } 118 $("#li" + itemId).slideUp(300, function () { 119 $("#li" + itemId).remove(); 120 if (!opts.selectedplan.html()) 121 toHide(); 122 }); 123 $("#" + itemId).attr("class", "un_select"); 124 } 125 } 126 } 127 //开始对比 128 function goToComp() { 129 if (true) { 130 if (opts.selectedplan.children("li").length < 2) { 131 alert('对比需要两个以上产品，请选择'); 132 } 133 else { 134 var comStr = 'products='; 135 opts.selectedplan.children("li").each(function () { 136 comStr += $(this).closest('li').find('input').val()+'_'; 137 }); 138 alert(comStr); 139 } 140 } 141 } 142 //声明按添加对比钮点击时间（就是调用此脚本的那个按钮点击事件） 143 this.click(function () { 144 actionplan(this); 145 }); 146 //清楚按钮 绑定事件 147 opts.clearLink.click(function () { 148 clearAllItems(); 149 }); 150 //隐藏按钮 绑定事件 151 opts.hideDivBtn.click(function () { 152 toHide(); 153 }); 154 //对比按钮 绑定事件 155 opts.compLink.click(function () { 156 goToComp(); 157 }); 158 //返回this，为了方便jquery链式操作 159 return this; 160 161 }
再附上对比列表区的css代码
1 #comparisonCon { background: #E94D3A; top: 50%; margin-top: -256px; position: fixed; width: 80px; right: -82px; z-index: 100; padding: 2px; display: none; text-align: center; } 2 .hideDivBtn { display: block; background: #E94D3A; color: #fff; text-align: center; cursor: pointer; } 3 .hideDivBtn:hover { background: #d83c29; } 4 5 #selectedplan { margin: 0 auto; display: block; overflow: hidden; zoom: 1; list-style: none; } 6 #selectedplan li { padding: 5px 0; border-bottom: 1px dotted #e2e2e2; background: #fff; display: block; position: relative; } 7 #selectedplan li span.close { display: block; background: url(../images/productList/close.gif) center center no-repeat #fff; color: #E94D3A; height: 7px; width: 7px; text-align: center; padding: 1px; position: absolute; right: 2px; top: 2px; cursor: pointer; border: 1px solid #E94D3A; } 8 #selectedplan li span.close:hover { background: url(../images/productList/close_hover.gif) center center no-repeat #E94D3A; color: #fff; } 9 #selectedplan .selectTtemPic { margin: 0 auto; text-align: center; height: 70px; width: 70px; line-height: 70px; *display: block; *font-size: 59px; /*约为高度的0.873，200*0.873 约为175*/ *font-family: Arial; /*防止非utf-8引起的hack失效问题，如gbk编码*/ overflow: hidden; text-align: center; } 10 #selectedplan .selectTtemPic a { display: block; } 11 #selectedplan .selectTtemPic a:after { content: "."; font-size: 1px; visibility: hidden; } 12 #selectedplan .selectTtemPic a img { position: static; ＋position: relative; top: -50%; left: -50%; max-height: 70px; max-width: 70px; vertical-align: middle; } 13 14 #selectedplan h2 { text-align: left; } 15 #selectedplan h2 a { color: #09F; text-decoration: none; display: block; line-height: 18px; font-size: 12px; font-weight: normal; height: 36px; padding: 0 5px; overflow: hidden; text-overflow: ellipsis; } 16 17 .productl_duibi a.un_select, .productl_duibi a.selected { height: 22px; width: 80px; color: #999; border: 1px solid #e2e2e2; line-height: 22px; text-align: center; cursor: pointer; } 18 .productl_duibi a.un_select:hover { color: #E94D3A; border-color: #E94D3A; } 19 .productl_duibi a.selected { color: #FFF; background: #E94D3A; border-color: #E94D3A; } 20 .clearAllItems { height: 25px; line-height: 25px; text-align: center; display: block; margin: 5px auto; background: #666; color: #fff; cursor: pointer; } 21 .clearAllItems:hover { background: #333; } 22 .buttonLink { display: inline-block; _zoom: 1; *display: inline; color: #fff; text-align: center; width: 35px; text-decoration: none; margin: 5px 0; } 23 .buttonLink:hover { background: #d83c29; text-decoration: none; } 24 .buttonLink:active { background: #fa5e4b; }
