仿淘宝的发布页的颜色和尺寸功能，应该怎么写？

仿淘宝的发布页的颜色和尺寸功能，，js 或者是 jquery 应该怎么写，我有点迷茫！，假设这个功能没问题了，那么我的后台程序php应该怎么对应写入数据库，字段类型，请高手帮忙啊

解决方案 »

  1.   

    颜色和尺码可采用枚举 这个是固定不变的，根据颜色的选中情况动态生成上传图片控件，根据颜色和尺码动态生成颜色尺码列表 。保存时可以颜色为key的键值对形势保存 
      

  2.   

    在网上找了一个简单例子，希望能帮到你！
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    </head>
    <style type="text/css">
    .ibWrapper{font-size:0;letter-spacing:-1px;}
    .ib{font: 12px/18px arial;display:inline-block;}
    .selectedcolor span{display:block;width:10px;height:10px;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function (){//注意修改jquery的路径
    var sRGBToHex = function (str){
    if (str.search(/rgb/i) === -1){//兼容ie6-8，它们的颜色值本身就是16进制的
    return str;
    }
    var result = "#";
    str = str.replace(/rgba?\((.*)\)/gi,"$1");
    aStr = str.split(",");
    for (var i=0; i<3; i++){//这里直接写了3，是因为标准浏览器的色彩值可能包含透明度信息，例如RGBA(0,255,30,0.5)
    var iColorAlpha = +aStr[i];
    if (iColorAlpha < 16){
    result += "0" + iColorAlpha.toString(16);
    }else{
    result += iColorAlpha.toString(16);
    }
    }
    return result;
    }
    $("#colorList input").click(function (){
    var _this = $(this);
    if ($(this).is(":checked")){
    var oSelectedElement = $("<div class='selectedcolor ib' ></div>");
    oSelectedElement.text($(this).parent().text());
    $("<span>").appendTo(oSelectedElement).end().css("backgroundColor",function (){
    return _this.attr("value");
    });
    oSelectedElement.appendTo($("#selectedColorList"));
    }else{
    $(".selectedcolor span").each(function (i){
    if (sRGBToHex($(this).css("backgroundColor")) === _this.attr("value")){
    $(this).parent().remove();
    }
    })
    }
    })
    })
    </script>
    <body>
    <div id="colorList">
    <form action="#" method="post">
    <label ><input type="checkbox" name="temp_color" id="color1" value="#ff0000"/>红色</label>
    <label ><input type="checkbox" name="temp_color" id="color2" value="#ffff00"/>黄色</label>
    <label ><input type="checkbox" name="temp_color" id="color3" value="#00ff00"/>绿色</label>
    <label ><input type="checkbox" name="temp_color" id="color4" value="#0000ff"/>蓝色</label>
    </form>
    </div>
    <div id="selectedColorList" class="ibWrapper">
    </div>
    </body>
    </html>