jquery colorpicker и CSS3 градиенты - PullRequest
Новая
       10

jquery colorpicker и CSS3 градиенты

2 голосов
/ 01 июня 2011

У меня есть вопрос относительно CSS3 Gradients и плагина для jQuery, называемого палитрой цветов,

Что я пытаюсь добиться, так это то, что пользователь может изменить фон изображения на выбранные градиенты;Я пробовал несколько решений, но не могу заставить работать градиентную часть.

Вот версия для разработки: http://prosperitymedia.co.uk/pm/logo.html

Вот палитра цветов: http://www.eyecon.ro/colorpicker/

Обратите внимание, что я тестировал только версию dev в FF4, поэтому я не уверен, будет ли она работать в других браузерах.

вот мой код: 

        // initial colour value
    var gradientHexOne = '333333';
    var gradientHexTwo = '666666';




    $('#logo_gradient_1_colorSelector').ColorPicker({
        color: "#" + gradientHexOne,
        onShow: function (colpkr) {
            $(colpkr).fadeIn(500);
            return false;
        },
        onHide: function (colpkr) {
            $(colpkr).fadeOut(500);
            return false;
        },
        onChange: function (hsb, hex, rgb) {
            // every time a new colour is selected, this function is called
            gradientHexOne = hex;
            $('#logo_gradient_1_colorSelector div').css('backgroundColor', '#' + hex);

        }
    });



    $('#logo_gradient_2_colorSelector').ColorPicker({
        color: "#" + gradientHexTwo,
        onShow: function (colpkr) {
            $(colpkr).fadeIn(500);
            return false;
        },
        onHide: function (colpkr) {
            $(colpkr).fadeOut(500);
            return false;
        },
        onChange: function (hsb, hex, rgb) {
            gradientHexTwo = hex;
            $('#logo_gradient_2_colorSelector div').css('backgroundColor', '#' + hex);          

        }
    });

    $('#gradients').click(function(){   
        $('#logo').css(
            '-moz-linear-gradient(100% 100% 90deg,' + '#' + gradientHexOne + ', #' + gradientHexTwo + ')'
        );
    });

1 Ответ

4 голосов
/ 01 июня 2011

-moz-linear-gradient является значением фонового изображения, например 

$('#logo').css({'background-image' : '-moz-linear-gradient(100% 100% 90deg,' + '#' + gradientHexOne + ', #' + gradientHexTwo + ')'});
...