在听取了某人的建议后，作者决定专心在家编写代码，最终成功地完成了任务。
听了某人的话，专心在家写代码！于是就把它完成了..
<!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>
扫一扫
2577
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
