jquery实现taobao 颜色 尺寸 联动效果
.sku-style
{
margin-bottom: 10px;
margin-right: 10px;
}
.sku-style .sku-title
{
float: left;
padding-right: 12px;
text-align: right;
width: 87px;
}
.sku-style label
{
float: none;
line-height: 1.5;
padding: 0;
text-align: left;
width: auto;
}
.sku-style .sku-wrap
{
background-color: #F8F8F8;
border: 1px solid #ECECEC;
overflow: hidden;
}
.sku-style .sku-group
{
margin: 5px 20px 15px;
}
.sku-style .sku-label
{
display: inline-block;
margin-bottom: 5px;
}
.sku-style label
{
float: none;
line-height: 1.5;
padding: 0;
text-align: left;
width: auto;
}
.sku-style .sku-box
{
overflow: hidden;
}
.sku-style .sku-list li
{
display: inline-block;
height: 25px;
overflow: hidden;
vertical-align: middle;
width: 145px;
}
.sku-style li
{
clear: none;
margin: 0;
}
.sku-style .sku-list .labelname, .sku-style .sku-list input
{
vertical-align: middle;
}
body, button, input, select, textarea
{
color: #404040;
font-family: tahoma,arial, "宋体" ,sans-serif;
font-size: 12px;
line-height: 1.5;
margin: 0;
}
.sku-style .sku-color .labelname
{
padding-left: 0;
width: 80px;
}
.sku-style .sku-list .edit .editbox
{
display: inline;
}
.sku-style .sku-color .editbox
{
width: 72px;
}
.sku-style .sku-list .editbox
{
margin-left: 5px;
padding: 2px;
width: 95px;
}
.sku-style .sku-wrapper
{
margin: 10px 10px 0 100px;
}
.sku-style table
{
background-color: #FFFFFF;
}
.sku-style th
{
background-color: #EDEDED;
border: 1px solid #D7D7D7;
font-weight: normal;
height: 25px;
text-align: center;
vertical-align: middle;
}
.sku-style .sku-group table span, .sku-style .sku-wrapper table span
{
display: inline;
}
.sku-style th .required
{
background-position: right center;
display: inline-block;
padding-right: 8px;
}
.sku-style td.tile
{
max-width: 100px;
padding-left: 20px;
text-align: left;
}
.sku-style td
{
border: 1px solid #D7D7D7;
height: 25px;
max-width: 200px;
min-width: 60px;
padding: 3px 5px;
text-align: center;
vertical-align: middle;
}
.sku-style table .color-lump
{
margin-right: 5px;
}
.sku-style td
{
border: 1px solid #D7D7D7;
height: 25px;
max-width: 200px;
min-width: 60px;
padding: 3px 5px;
text-align: center;
vertical-align: middle;
}
.sku-style td.price
{
width: 80px;
}
.sku-style td.price input
{
width: 78px;
}
.sku-style input.text
{
border: 1px solid #A7A6AA;
height: auto;
margin: 0;
}
.sku-style td.quantity
{
width: 60px;
}
.sku-style td.quantity input
{
width: 58px;
}
.sku-style td.tsc
{
width: 100px;
}
.sku-style td.tsc input
{
width: 98px;
}
.sku-style td.batch
{
min-width: 20px;
width: 16px;
}
.sku-style td .sku-batch
{
background: url("http://img02.taobaocdn.com/tps/i2/T1EytvXt4bXXXIZFfX-14-30.png") no-repeat scroll 1px -14px transparent;
cursor: not-allowed;
display: inline-block;
height: 16px;
width: 16px;
}
-------------------------------------------------------------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="QingdiaoWeb.test" %>
<%@ Register Src="Control/Menu.ascx" TagName="Menu" TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="/css/detail.css" />
<link rel="stylesheet" href="/css/admin.css" />
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript">
String.prototype.format = function (args) {
var result = this;
if (arguments.length > 0) {
if (arguments.length == 1 && typeof (args) == "object") {
for (var key in args) {
if (args[key] != undefined) {
var reg = new RegExp("({" + key + "})", "g");
result = result.replace(reg, args[key]);
}
}
}
else {
for (var i = 0; i < arguments.length; i++) {
if (arguments[i] != undefined) {
var reg = new RegExp("({[" + i + "]})", "g");
result = result.replace(reg, arguments[i]);
}
}
}
}
return result;
}
$(function () {
$(".sku-color li :checkbox").click(function () {
$(".sku-color input:checkbox[name='cp_1627207']:checked'").each(
function () {
//alert($(this).val());
var color = '<td class="tile" rowspan="1"><span >{0}</span></td>';
alert(color.format($(this).val()));
}
);
});
});
function makepro() {
var color = '<td class="tile" rowspan="1"><span >
更新
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>