首页 | 7706 | 529 | 264 | 添加收藏 上一个 下一个
jQuery色轮插件 Farbtastic v1.3

使用方法:



  1. 在HTML内引入js文件,顺序必须是 jquery 先 farbtastic 后:


<script src="jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="farbtastic-1.3.js"></script>


  1. 创建一个拾色器容器(必需),可选增加一个或多个回调元素以获取颜色值:


<div id="picker"></div>
<input type="text" id="callback" value="#000000" />


  1. 插件使用语法(container 为必需的容器,callback 为可选的回调元素,size 为可选的自定义容器大小(默认200px, 若不设置则参考容器的最小宽高)):


jQuery 方法:


	
$(container).farbtastic(callback, size)

对象方法:


$.farbtastic(container, callback, size)

内部函数:


.linkTo(callback)设置回调的元素。


.setColor(value)设置颜色参数(支持十六进制的颜色代码、HSL代码、RGB代码)


(示例:"#123456" || [1, 0.8, 0.4] || [0, 128, 255] )


属性值:


.color


.hsl


.rgb 获取颜色参数的值(分别为十六进制的颜色代码、HSL代码、RGB代码)


.linked


获取回调元素的ID或Class。



  1. 插件使用示例:


<script type="text/javascript">
    $(document).ready(function() {
        // 初始化插件:
        $("#picker").farbtastic("#callback", 400);    // jQuery 方法
        $.farbtastic("#picker", "#callback", 300);    // 对象方法
         
        // 设置参数:
          $.farbtastic("#picker").linkTo("#callback");    // 设置回调元素
          $.farbtastic("#picker").setColor([255, 128, 0]);    // 设置颜色参数
 
        // 获取属性值:
          var picker = $.farbtastic("#picker");
          var color = picker.color;
          var hsl = picker.hsl;
          var rgb = picker.rgb;
          var linked = picker.linked;
    });
</script>