益吾库源码下载jQuery颜色选择器插件jPicker

jQuery颜色选择器插件jPicker

jQuery颜色选择器插件jPicker
2020年04月01日 07:46:41益点益滴源码下载1323

资源介绍

jPicker是一个快速,轻量级的jQuery插件,是一个比较先进的拾色器,既可以固定到某处作为取色面板使用,也可以做为浮层小窗当作颜色选择器。jPicker支持目前所有的浏览器,并已得到了广泛的测试,在Chrome,火狐,IE 5.5+,Safari和Opera。

20200328220543.jpg

使用步骤:

1.首先从网站上下载最新版jPicker,目前最新版是1.1.6,备用下载地址https://code.google.com/p/jpicker

2.解压压缩包:里面除了js文件、css文件等,还有一个Example.html,即使实例也是新手使用手册。

3.在工程根目录建一个文件夹,把解压的文件都放进去

4.在要用到的页面引用对应的js、css、image

5.以下是最基本的固定面板应用实例代码:

<script type="text/javascript">        
  $(document).ready(
    function()
    {
      $('#Inline').jPicker();
  });
</script>
<div id="Inline"></div>

6.浮层小窗颜色选择器用法:

<script type="text/javascript">        
  $(document).ready(
    function()
    {
      $('#Alpha').jPicker(
        {
          window:
          {
            expandable: true
          },
          color:
          {
            alphaSupport: true,
            active: new $.jPicker.Color({ ahex: '99330099' })
          }
        });
    });
</script>
<span id="Alpha"></span>

插件设置参数

{
  window: // used to define the position of the popup window only useful in binded mode
  {
    title: null, // any title for the jPicker window itself - displays "Drag Markers To Pick A Color" if left null
    effects:
    {
      type: 'slide', // effect used to show/hide an expandable picker. Acceptable values "slide", "show", "fade"
      speed:
      {
        show: 'slow', // duration of "show" effect. Acceptable values are "fast", "slow", or time in ms
        hide: 'fast' // duration of "hide" effect. Acceptable value are "fast", "slow", or time in ms
      }
    },
    position:
    {
      x: 'screenCenter', // acceptable values "left", "center", "right", "screenCenter", or relative px value
      y: 'top', // acceptable values "top", "bottom", "center", or relative px value
    },
    expandable: false, // default to large static picker - set to true to make an expandable picker (small icon with popup) - set
                       // automatically when binded to input element
    liveUpdate: true, // set false if you want the user to click "OK" before the binded input box updates values (always "true"
                      // for expandable picker)
    alphaSupport: false, // set to true to enable alpha picking
    alphaPrecision: 0, // set decimal precision for alpha percentage display - hex codes do not map directly to percentage
                       // integers - range 0-2
    updateInputColor: true // set to false to prevent binded input colors from changing
  },
  color:
  {
    mode: 'h', // acceptable values "h" (hue), "s" (saturation), "v" (brightness), "r" (red), "g" (green), "b" (blue), "a" (alpha)
    active: new $.jPicker.Color({ hex: 'ffc000' }), // accepts any declared jPicker.Color object or hex string WITH OR WITHOUT '#'
    quickList: // this list of quick pick colors - override for a different list
      [
        new $.jPicker.Color({ h: 360, s: 33, v: 100}), // accepts any declared jPicker.Color object or hex string WITH OR
                                                       // WITHOUT '#'
        new $.jPicker.Color({ h: 360, s: 66, v: 100}),
        (...) // removed for brevity
        new $.jPicker.Color({ h: 330, s: 100, v: 50}),
        new $.jPicker.Color()
      ]
  },
  images
  {
    clientPath: '/jPicker/images/', // Path to image files
    colorMap: // colorMap size and arrow icon
    {
      width: 256, // Map width - don't override unless using a smaller image set
      height: 256, // Map height - don't override unles using a smaller image set
      arrow:
      {
        file: 'mappoint.gif', // Arrow icon image file
        width: 15, // Arrow icon width
        height: 15 // Arrow icon height
      }
    },
    colorBar: // colorBar size and arrow icon
    {
      width: 20, // Bar width - don't override unless using a smaller image set
      height: 256, // Bar height - don't override unless using a smaller image set
      arrow:
      {
        file: 'rangearrows.gif', // Arrow icon image file
        width: 40, // Arrow icon width
        height: 9 // Arrow icon height
      }
    },
    picker: // picker icon and size
    {
      file: 'picker.gif', // Picker icon image file
      width: 25, // Picker width - don't override unless using a smaller image set
      height: 24 // Picker height - don't override unless using a smaller image set
    }
  },
  localization: // alter these to change the text presented by the picker (e.g. different language)
  {
    text:
    {
      title: 'Drag Markers To Pick A Color',
      newColor: 'new',
      currentColor: 'current',
      ok: 'OK',
      cancel: 'Cancel'
    },
    tooltips:
    {
      colors:
      {
        newColor: 'New Color - Press “OK” To Commit',
        currentColor: 'Click To Revert To Original Color'
      },
      buttons:
      {
        ok: 'Commit To This Color Selection',
        cancel: 'Cancel And Revert To Original Color'
      },
      hue:
      {
        radio: 'Set To “Hue” Color Mode',
        textbox: 'Enter A “Hue” Value (0-360°)'
      },
      saturation:
      {
        radio: 'Set To “Saturation” Color Mode',
        textbox: 'Enter A “Saturation” Value (0-100%)'
      },
      value:
      {
        radio: 'Set To “Value” Color Mode',
        textbox: 'Enter A “Value” Value (0-100%)'
      },
      red:
      {
        radio: 'Set To “Red” Color Mode',
        textbox: 'Enter A “Red” Value (0-255)'
      },
      green:
      {
        radio: 'Set To “Green” Color Mode',
        textbox: 'Enter A “Green” Value (0-255)'
      },
      blue:
      {
        radio: 'Set To “Blue” Color Mode',
        textbox: 'Enter A “Blue” Value (0-255)'
      },
      alpha:
      {
        radio: 'Set To “Alpha” Color Mode',
        textbox: 'Enter A “Alpha” Value (0-100)'
      },
      hex:
      {
        textbox: 'Enter A “Hex” Color Value (#000000-#ffffff)',
        alpha: 'Enter A “Alpha” Value (#00-#ff)'
      }
    }
  }
}


超赞,真给力!嗯,必须鼓励~

打赏 0

欢迎点评!或反馈疑问...

支持Ctrl+Enter提交
暂无留言,快抢沙发!
账号:mxy310@163.com[复制]
账号:77940140[复制]