颜色拾取器插件bigcolorpicker——例

最新推荐文章于 2024-06-05 10:10:23 发布

Macdull2014

最新推荐文章于 2024-06-05 10:10:23 发布

阅读量503

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/linjiangxian/p/11535953.html

版权

参考：http://bigui4.sinaapp.com/picker/colorpicker.html

效果：

html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>取色</title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <link rel="stylesheet" href="http://bigui4.sinaapp.com/css/jquery.bigcolorpicker.css">
        <script src="http://bigui4.sinaapp.com/js/jquery.bigcolorpicker.js"></script>
        <style>
            input{
                background:none;  
                outline:none;  
                border:1px solid gray;
            }
        </style>
    </head>
    <body>
        <div>
            <input type="text" value="" id="demoText" />
            <input id="bn" type="button" value="选色" />
        </div>
        <script type="text/javascript">
            $("#bn").bigColorpicker(function(el, color) {
                $('#demoText').css('background', color);
                $('#demoText').val(color);
            });
        </script>
    </body>
</html>

注意：还需将big_bgcolor.jpg复制到项目中，图片放置的目录结构参考css：

.bigpicker-bgimage{
    background-image:url(../images/big_bgcolor.jpg);
}

big_bgcolor.jpg：

转载于:https://www.cnblogs.com/linjiangxian/p/11535953.html

Macdull2014

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
颜色拾取器插件bigcolorpicker——例

参考：http://bigui4.sinaapp.com/picker/colorpicker.html效果：html:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="vie...
复制链接

扫一扫