强大的jquery颜色选择器gradX.js

最新推荐文章于 2024-02-23 18:28:01 发布

vcxiaohan2

最新推荐文章于 2024-02-23 18:28:01 发布

阅读量2k

点赞数 1

分类专栏： jQuery插件

本文链接：https://blog.csdn.net/u011500781/article/details/52614053

版权

jQuery插件专栏收录该内容

29 篇文章 0 订阅

订阅专栏

官网：http://codologic.com/page/gradx-jquery-javascript-gradient-selector-library

考虑到颜色保存后需提交到后台并且需要回填，示例如下：

在这里查看示例 ☞ gradX示例

<!DOCTYPE html>  
<html>  
    <head>   
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
        <title>demo</title>  
        <script type="text/javascript" src="http://v3.faqrobot.org/hvb/com/js/jquery-1.11.3.min.js?dev=1"></script>    
        <link type="text/css" rel="stylesheet" href="css/gradX.css" />  
        <link type="text/css" rel="stylesheet" href="css/colorpicker.css" />  
        <script src="js/colorpicker.min.js"></script>  
        <script src="js/dom-drag.js"></script>  
        <script src="js/gradX.js"></script>  
        <style>  
            * {  
                margin: 0;  
                padding: 0;  
            }  
            .a, .b, .c {  
                width: 300px;  
                height: 80px;  
                outline: 1px dashed #ddd;
            }  
            #gradx_show_code {  
                display: none;  
            }  
        </style>  
    </head>  
    <body>  
        <div id="div1"></div>  
        <div class="a">点击这里</div>  
        <div class="b">点击这里</div>  
        <div class="c">点击这里</div>  
        <script>  
            var $cur = null;
            $('.a, .b, .c').on('click', function() {
                $cur = $(this);
                createGradX($(this).attr('pickercolor'));
            }); 

            // 创建pickercolor
            function createGradX(colorArr) {
                var This = this,
                    type = 'linear',
                    direction = 'left',
                    targets = [$cur],
                    sliders = [];
                if(colorArr) {
                    if(colorArr.indexOf('linear')+1) {
                        type = 'linear';
                    }
                    if(colorArr.indexOf('circle')+1) {
                        type = 'circle';
                    }
                    if(colorArr.indexOf('ellipse')+1) {
                        type = 'ellipse';
                    }
                    direction = colorArr.match(/-gradient\(([a-zA-Z\s]+)\s,/)[1];
                    direction = direction=='center' ? 'center center' : direction;
                    var copy = JSON.parse(colorArr)[0];
                    for(var i in copy) {
                        sliders[i] = {};
                        for(var j in copy[i]) {
                            sliders[i].color = copy[i][0];
                            sliders[i].position = copy[i][1];
                        }
                    }
                }

                gradX("#div1", {  
                    type: type,
                    direction: direction,
                    targets: [$cur],
                    sliders: sliders,
                    change: function(stops, styles) {  
                        $cur.attr('pickercolor', JSON.stringify([stops, styles]));
                        console.log(JSON.stringify([stops, styles]))
                    }  
                });
            }
        </script>  
    </body>  
</html>

vcxiaohan2

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
强大的jquery颜色选择器gradX.js

官网：http://codologic.com/page/gradx-jquery-javascript-gradient-selector-library demo #gradX {
复制链接

扫一扫