如何添加多个实例的jquery颜色选择器与cookie

how to add multiple instances of jquery colour picker with cookie

本文关键字:jquery 颜色 选择器 cookie 实例 何添加 添加      更新时间:2023-09-26

我正在使用eyecon colorpicker.js来编辑网站前端的颜色。这个脚本工作完美,但我努力使它的多个实例,所以我可以改变多个元素也需要一种方法来重置颜色回默认值。

实现这一点的最佳方法是什么?

<label>Body</label>
<div id="colorSelector">
 <div></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
            var col = '000000';
            function updateCookieInfo(c){
                $("#colorSelector div").css("background-color", "#" + c);
                $("body").css("background-color", "#" + c);
            }
            if(typeof $.cookie('color') != 'undefined'){
                col = $.cookie('color');
                updateCookieInfo(col);
            }
            $('#colorSelector').ColorPicker({
                color: col,
                onShow: function (colpkr) {
                    $(colpkr).fadeIn(500);
                    return false;
                },
                onHide: function (colpkr) {
                    $(colpkr).fadeOut(500);
                    $.cookie('color', col, { expires: 7 });
                    updateCookieInfo(col);
                    return false;
                },
                onChange: function (hsb, hex, rgb) {
                    col = hex;
                    $('body').css('backgroundColor', '#' + hex);
                    $("#colorSelector div").css("background-color", "#" + c);
                }
            });
        });
</script>

我花了几个小时试图解决这个问题,最后我放弃了,决定使用jscolor

它不像eyeecon那样花哨,但它对我来说工作得很好-我需要在一个页面上使用15种不同的颜色选择器-至少在网站上有一个文档和一些示例。

所以我知道它并不能真正回答你的问题,但它应该能解决你想要解决的问题。