jquery html 按钮库

Question

我们正在设计将显示为图库的自定义按钮数组。用户将从图库中选择并自定义按钮的不同部分，并且在更改时将显示不同的属性预览。

知道我们如何使用 jquery、html 和 jsp 来做到这一点。

Answer 1

这应该让你开始:

HTML

<div>
    <input type="button" id="sub_border_size" value="-"/>
    <input type="button" id="add_border_size" value="+"/>
</div>

<div id="preview">
    <center>
        <input type="button" id="preview_button" value="button"/>
    </center>
</div>

CSS

#preview{
    width:400px;
    height:250px;
    background:gray;
    display:table-cell;
    vertical-align:middle;
}

#preview_button{
    width:100px;
    height:20px;
}

JS

var border_size = 0;

$("#add_border_size").click(function(){
    border_size++;
    console.log(border_size);
    $("#preview_button").css("border",border_size+"px solid black");
});

$("#sub_border_size").click(function(){
    border_size--;
    console.log(border_size);
    $("#preview_button").css("border",border_size+"px solid black");
});

fiddle :http://jsfiddle.net/yPAM2/