模仿360buy商品比较的jquery插件

听了某人的话，专心在家写代码！于是就把它完成了..

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript" src="/giftcompare.js"></script>
<style type="text/css">
*{ font-size:12px;padding:0;margin:0;}
li{list-style:none;}
.compare{background:#fff;border:1px solid #C4C4C4;width:200px;position:fixed;right:5px;top:220px;}
.compare_h1{line-height:30px; height:30px; font-size:13px;font-weight:bold;padding-left:10px; background:#F3F3F3;}
.compare_h1 .close{ float:right;padding:0 2px; text-decoration:none; font-size:14px; font-weight:bold;}
.compare .comprolist{padding:2px;}
.compare .comprolist li{margin-bottom:2px;border:1px solid #E5E5E5;padding:4px 12px 4px 4px;}
.compro_bottom{text-align:center;margin-bottom:4px;}
.compro_bottom .btn{cursor:pointer;}
</style>
<script type="text/javascript">
(function($){
/*
*
* @author  :   张志华(Singhania)
* @date    :   2011-10-23
* @function    :   根据选择的对象触发click事件获取当前对象的 废材属性  rel
*                    rel 数据格式使用json形式
*                    例如：rel="{id:2106,name:'金博源 舒心玉兔 共振音响 X8001-2'}"
*
*                    参数说明
*                    model_title   :   模型的title,
*                    come_in_max   :   最大层数默认 2
*                    li_a_url         ：  创建层数中a表的超链接设置默认 http://www.1000li.detail.aspx
*                    form_action   :   表单提交的地址 默认/compare.php
*                    cookie_key    :   设置key的键
*/
$.fn.model= function(options){
//可设置的默认配置
var defaults = {
model_title : '商品比较',   //模型的title
come_in_max :   2,  //添加的最大数量
li_a_url : '/detail.aspx', //a标签的url
form_action : '/compare.aspx',   //表单提交的地址
cookie_key : 'key'
};
var opts = $.extend(defaults,options);
var is_set_model = false;   //是否已经创建了模型 默认false;
var come_in_id = [];        //已经添加过的id
//               delCookie(opts.cookie_key); //测试使用
//获取cookie 如果已经存在 则建模型
var cookie_valus = getJsonByCookie(opts.cookie_key);
if(cookie_valus.length > 0)
{
for(var i = 0;i < cookie_valus.length;i++)
{
come_in_id[i] = cookie_valus[i].id;
}
createBoxModel(cookie_valus);
return;
}
$(this).click(function(e){
e.preventDefault();
var this_element_val = $(this).attr('rel');//json 字符串形式
if(this_element_val.length === 0)   return false;
var this_element_val_json = eval('(' + this_element_val + ')' );//json 对象
if(isNaN(this_element_val_json.id)) return false;
if(is_set_model)//是否已经创建过模型了
{
if(come_in_id.length == opts.come_in_max)
{
alert('最多添加'+ (opts.come_in_max));
return false;
}
if(!hadAddBox(this_element_val_json.id))
{
come_in_id.push(this_element_val_json.id);
}else{
alert('对不起,已经添加过了!');
}
var cookie_value_str = getCookie(opts.cookie_key);
cookie_value_str += '^' + this_element_val;
setCookie(opts.cookie_key,cookie_value_str);
addLi(this_element_val_json);
}else{
createBoxModel([this_element_val_json]);
setCookie(opts.cookie_key,this_element_val);
}
});
function createBoxModel(j)
{
var model = '<form action='+ opts.form_action +' method=\"GET\" target="_blank" id="box_form" >';
model += '<div class=\"compare\" id=\"adlayer\">';
model += '<h1 class=\"compare_h1\"><a href=\"#\" class=\"close\" id=\"close\">×</a>'+ opts.model_title +'</h1>'
model += '<ul class="comprolist">';
for(var i = 0 ; i < j.length;i++)
{
model += '<li class=\"comprolist_li\">';
model += '<a href=\"'+ opts.li_a_url + '?gift_id=' + j[i].id +'\" target="_blank"  id=\"model_hidden_a\" target="_blank">';
model += '<input type=\"hidden\" name=\"gift_id[]\" value=\"'+ j[i].id +'\"/>';
model += j[i].name;
model += '</li>';
}
model += '</ul>';
model += '<div class=\"compro_bottom\">';
model += '<input type=\"button\" class=\"model_btn\" id=\"model_btn\" value=\"对比所选商品\">';
model += '</div>';
model += '</div>';
model += '</form>';
$('body').append(model);
is_set_model = true;
//button 绑定提交表单事件
$("#model_btn").bind('click',function(e){
e.preventDefault();
if(come_in_id.length < 2)
{
alert("一个商品不能比较,请再选择一个商品!");
return false;
}
$('#box_form').submit();
});
//移除模型 且重置数据
$("#close").bind('click',function(){
is_set_model = false;
come_in_id   = [];
$('#box_form').remove();
delCookie(opts.cookie_key);
});
}
function addLi(j)
{
$('ul.comprolist li').last().after('<li  class=\"comprolist_li\" ><a href=\"'+ opts.li_a_url + '?gift_id=' + j.id +'\" target="_blank" >'+j.name+'</a><input type=\"hidden\" name=\"gift_id[]\" value=\"'+ j.id +'\"/></li>')
}
function getJsonByCookie(key)
{
var str = getCookie(key);
if(!str)    return [];
var values = str.split('^');
for(var i = 0 ; i < values.length;i++)
{
values[i] = eval('(' + values[i] + ')' );
}
return values;
}
function setCookie(name,value)//两个参数，一个是cookie的名子，一个是值
{
var Days = 1;
var exp  = new Date();    //new Date("December 31, 9998");
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ encodeURI(value) + ";expires=" + exp.toGMTString();
}
function getCookie(name)//取cookies函数
{
var start = document.cookie.indexOf(name+"=");
var len = start+name.length+1;
if ((!start) && (name != document.cookie.substring(0,name.length))) return null;
if (start == -1) return null;
var end = document.cookie.indexOf(";",len);
if (end == -1) end = document.cookie.length;
return decodeURI(document.cookie.substring(len,end));
}
function delCookie(name)//删除cookie
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
document.cookie = name + "=;expires=" + exp.toGMTString();
}
//是否已经添加到容器中
function hadAddBox(id)
{
var len = come_in_id.length;
if(len == 0)   return false;
for(var i = 0 ; i <= len;i++)
{
if(len[i] === id)
{
return true;
}
}
return false;
}
function explode(split_str,arry)
{
var ret = '';
for(var i = 0 ; i <arry.length;i++)
{
ret += split_str + arry[i];
}
return ret.substr(0,0);
}
};
})(jQuery);
$(function(){
$('.ip_v').model();
});
</script>
</head>
<body>
<input type="button" rel="{id:2106,name:'金博源 舒心玉兔 共振音响 X8001-2'}" class="ip_v" value="测试" />
<input type="button" rel="{id:1407,name:'金莱福 喜结良缘 沙金黄 G060132B'}" class="ip_v" value="测试" />
<input type="button" rel="{id:1400,name:'111'}" class="ip_v" value="测试" />
</body>
</html>

模仿360buy商品比较的jquery插件相关推荐

1000个jquery插件
1.导航类 (1)Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件.二手图书二手书特价书旧书网 (2)jQuery-Horizontal ...
jquery_jquery插件、jqueryUI使用方法、自定义jquery插件（一个插件其实就是一个功能）...
1.jquery插件比如:演示如下注意复制代码时要注意引用文件的路径是不是对的. 2.jqueryUI jqueryUI里面集合了很多用jquery封装的小功能比如:案例演示如下 3.可以自己封 ...
jQuery：收集一些基于jQuery框架开发的控件/jquery插件2
Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. 主页:http://letmehaveblog.blogspot.com/2007/10/ ...
好用的侧边栏菜单/面板jQuery插件
我想大家都用过一些APP应用,它们的菜单展示是以侧边栏滑动方式展现,感觉很新鲜,而现在网页设计也是如此,不少网站也效仿这样的方式来设计.使用侧边栏的好处就是可以节约空间,对于一些内容多或者喜欢简约的网 ...
jquery插件---自动补全类插件
jquery插件---自动补全类插件 (1)AutoComplete-JQuery jQuery插件易于集成到现在的表单中(Form). (2)Facebook like Autocomplete 基 ...
50个jQuery插件可将你的网站带到另一个高度
Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...
30+ 新鲜惊奇的 jQuery 插件与教程
在网络发展领域,由于 jQuery 简单易学,易于使用和易于扩展的特点,因此正慢慢变得无处不在.以下是从一些 jQuery 相关文章中整理出来的 30+ 新鲜与惊奇的 jQuery 插件与教程.如果你 ...
1000个JQuery插件（转载）
超强1000个jquery极品插件!(转) 花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++ ...
40 个让你的网站更加友好的 jQuery 插件
一个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个jQuery插件是一个基本的可以扩充jQuery 原型对 ...

模仿360buy商品比较的jquery插件

模仿360buy商品比较的jquery插件相关推荐

最新文章

热门文章