Class jQuery.fn.imuiColorPicker

Constructor

imuiColorPicker ( [Object settings], [function(color/context) commitCallback], [function(color/context/input) liveCallback], [function(color/context) cancelCallback] ) Static
色を選択する小窓を表示します。
色を選択するとバインドされたテキストボックスに選択した色番号が表示されます。
バインドするテキストボックスに直接カラーコードを入力することも可能です。
   - 入力可能な文字は、0-9, a-f, A-F のみです。
   - 入力が6桁未満の場合、0 が先頭に補完されます。(例:999 → 000999)
jPicker (http://www.digitalmagicpro.com/jPicker/) を修正したうえで利用しています。
注意事項
    imuiColorPickerを利用する場合は以下のようにjPickerを読み込んでください。
  • <link type="text/css" rel="stylesheet" href="ui/libs/jpicker-1.1.6/css/jPicker-1.1.6.min.css" />
    <script src="ui/libs/jpicker-1.1.6/jpicker-1.1.6.min.js"></script>
Parameters
settings : Object
Optional
オプション
commitCallback : function(color/context)
Optional
色を選択し決定ボタン押下時に呼ばれるCallback関数です。以下の引数が渡ります。
  • color:jPicker.Color クラスです。詳細はjPickerの(http://www.digitalmagicpro.com/jPicker/)のjPicker Color Class を参照してください。
  • context:決定ボタン要素です。
liveCallback : function(color/context/input)
Optional
色を選択したときに呼ばれるCallback関数です。以下の引数が渡ります。
  • color:jPicker.Color クラスです。詳細はjPicker(http://www.digitalmagicpro.com/jPicker/)のjPicker Color Class を参照してください。
  • context:色の変更を行った要素です。
  • input:カラーピッカーのセレクターが input 要素の場合にセレクターの要素が渡ります。
cancelCallback : function(color/context)
Optional
キャンセルボタン押下時に呼ばれるCallback関数です。以下の引数が渡ります。
  • color:jPicker.Color クラスです。詳細はjPicker(http://www.digitalmagicpro.com/jPicker/)のjPicker Color Class を参照してください。
  • context:キャンセルボタン要素です。

<!-- jPickerを読み込みます。-->
<imart type="head">
  <link type="text/css" rel="stylesheet" href="ui/libs/jpicker-1.1.6/css/jPicker-1.1.6.min.css" /> 
  <script src="ui/libs/jpicker-1.1.6/jpicker-1.1.6.min.js"></script>
</imart>
<!-- targetをinput type="text"にすると選択した色番号が表示されます。-->
<input type="text" id="target">
<script type="text/javascript">
  //カラーピッカーの使用例。すべてのパラメータは省略可能
  $("#target").imuiColorPicker();
</script>
<!-- jPickerを読み込みます。-->
<imart type="head">
  <link type="text/css" rel="stylesheet" href="ui/libs/jpicker-1.1.6/css/jPicker-1.1.6.min.css" /> 
  <script src="ui/libs/jpicker-1.1.6/jpicker-1.1.6.min.js"></script>
</imart>
<input type="text" id="target">
<script type="text/javascript">
  //パラメータを指定する例
  $("#target").imuiColorPicker({
    window:{
      title:"imuiColorPickerTest",
      zIndex:1005, //デフォルト値は20
      position:{
        x:'0px',  // 指定可能な値は"left", "center", "right", "screenCenter"とピクセルでの指定ができます
        y:'0px' // 指定可能な値は"top", "bottom", "center"とピクセルでの指定ができます
      },
      effects:{
        type:'fade' //デフォルトはslideになります。他にfadeとshowを指定することができます
      }
    },
    localization:{
      text: {
        ok: 'testOK',
        cancel: 'testCancel'
      },
      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)'
        }
      }
    }
  });
</script>
<!-- jPickerを読み込みます。-->
<imart type="head">
  <link type="text/css" rel="stylesheet" href="ui/libs/jpicker-1.1.6/css/jPicker-1.1.6.min.css" /> 
  <script src="ui/libs/jpicker-1.1.6/jpicker-1.1.6.min.js"></script>
</imart>
<!-- divをtargetにすると、カラーピッカーは常に開いた状態になります。-->
<div id="target" />
<script type="text/javascript"> 
  //コールバック関数を指定する例
  function commitCallback(color, context){
    alert('決定ボタンを押下しました');
  };
  function liveCallback(color, context, input){ //セレクターの要素が div なので、input は undefined になります。
    if(color.val() == null){
      return false;
    }
    alert('選択したカラーコード:' + color.val().hex); //カラーコードが取得できます。
  };
  function cancelCallback(color, context){
    alert('取り消しボタンを押下しました');
  };
  $("#target").imuiColorPicker({},commitCallback,liveCallback,cancelCallback);
</script>

Events

EventDefined By

oncomplete ( EventObject event, String data ) jQuery.fn.imuiColorPicker
カラーコードが補完されて、フォーカスが外れたときに発生します。
Parameters
event : EventObject
イベント
data : String
補完されたカラーコード。先頭に「#」が付いて返却されます。例)「fff」→「#000fff」
//カラーコードが補完された場合に呼び出される関数
//#target は、imuiColorPicker のセレクタを指定してください。
$('#target').bind('imuicolorpicker.oncomplete', function(event, data) {
  }
);