Ignite UI™ API ヘルプ

ui.igColorPicker

コードサンプル

<!DOCTYPE HTML>
<html>
<head>
    <title>Color Picker Demo</title>
     
    <!-- Infragistics Combined CSS -->   
    <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <!-- Infragistics Combined Scripts -->
    <script src="js/infragistics.core.js" type="text/javascript"></script>
    <script src="js/infragistics.lob.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#color-picker").igColorPicker();
        });
    </script>
</head>
<body>
    <div id="color-picker"></div>
</body>
</html>
    

依存関係

jquery-1.9.1.js

jquery.ui.core.js

jquery.ui.widget.js

infragistics.util.js

infragistics.util.jquery.js

infragistics.ui.shared.js

継承

jQuery.widget

詳細の表示

colors

タイプ:: string
デフォルト:: "[]"

デフォルト色を取得または設定します。デフォルト色は、カラーピッカーの上表に表示される色です。配列に、次の各行の色値を含む配列が含まれる必要があります。

コードサンプル

// Initialize
// Every array with color strings will be rendered on a new row.
$(".selector").igColorPicker({
    colors: [["#ffffff", "#000000", "#EEECE1", "#1F497D"], ["#92D050", "#00B050", "#00B0F0", "#0070C0"]]
})
// Get
var colors = $(".selector").igColorPicker("option", "colors")
// Set
var colors = [["#ffffff", "#000000", "#EEECE1", "#1F497D"], ["#92D050", "#00B050", "#00B0F0", "#0070C0"]]
$(".selector").igColorPicker("option", "colors", colors);

standardColors

タイプ:: array
デフォルト:: []
要素タイプ:: string

標準の色を取得または設定します。標準の色は、デフォルト色と視覚的に分割されるカラーピッカーの下に表示される色です。配列は色値を含みます。

コードサンプル

// Initialize
// Every array with color strings will be rendered on a new row.
$(".selector").igColorPicker({
    standardColors: ["red", "blue"]
})
// Get
var standardColors = $(".selector").igColorPicker("option", "standardColors")
// Set
var standardColors = ["rgb(238,130,238)", "rgb(240,255,255)", "rgb(152,251,152)"]
$(".selector").igColorPicker("option", "standardColors", standardColors);

Ignite UI コントロールイベントの詳細については、
Ignite UI でイベントを使用するを参照してください。

注: API メソッドの呼び出しは、API ヘルプに特に記述がない限り、操作に関連するイベントはプログラムによって発生されません。これらのイベントは各ユーザー操作によってのみ呼び出されます。

詳細の表示

colorSelected

キャンセル可能:: false

イベントは色が選択されたときに発生します。関数には引数 evt および ui が必要です。ui.color を使用して、色オブジェクトへの参照を取得します。

コードサンプル

// Initialize
$(".selector").igCombo({
    colorSelected: function(evt, ui) {...}
});
 
//Bind after initialization
$(document).on("igcolorpickercolorselected", ".selector", function (evt, ui) {
    // use to get a reference to the color object.
    ui.color;
});

詳細の表示

colorFromElement

.igColorPicker( "colorFromElement", $element:object );

返却型:

string

返却型の説明:

提供されている色要素の色を RGB 形式で返します。
カラーピッカーから要素の色を RGB 形式で取得します。
- $element
- タイプ:object
- 色が取得されるカラーピッカーの jQuery 要素。
コードサンプル

var elementColor = $(".selector").igColorPicker("colorFromElement", $element);
colorTable

.igColorPicker( "colorTable" );

返却型:

object

返却型の説明:

カラーテーブルを持つ div 要素を返します。
カラーテーブルの div 要素への参照を取得します。
コードサンプル

var colorTable = $(".selector").igColorPicker("colorTable");
customColorTable

.igColorPicker( "customColorTable" );

返却型:

object

返却型の説明:

デフォルトまたはカスタムカラーテーブルを持つ div 要素を返します。
デフォルトまたはカスタムカラーテーブルの div 要素への参照を取得します。
コードサンプル

var customColorTable = $(".selector").igColorPicker("customColorTable");
selectColor

.igColorPicker( "selectColor", color:string );

返却型:

object

返却型の説明:

igColorPicker への参照を返します。
ウィジェットで色を選択します。
- color
- タイプ:string
- 選択する色の #RGB 値。
コードサンプル

$(".selector").igColorPicker("selectColor", "#fac08f");
selectedColor

.igColorPicker( "selectedColor" );

返却型:

enumeration

返却型の説明:

'string|null' 利用可能な場合、選択した色を返します。色が選択されていない場合は null。
カラーピッカーの選択されている色の 16 進数文字列を返します。色が選択されていない場合は null を返します。
コードサンプル

var selectedColor = $(".selector").igColorPicker("selectedColor");
standardColorsTable

.igColorPicker( "standardColorsTable" );

返却型:

object

返却型の説明:

標準のカラーを持つ div 要素を返します。
標準のカラーテーブルを持つ div 要素を返します。
コードサンプル

var standardColorsTable = $(".selector").igColorPicker("standardColorsTable");

ui-igcolorpicker

ウィジェット基本クラス css。
igcolorpicker-color

ウィジェットのカラーピッカークラス css。
igcolorpicker-row

ウィジェットの色の行クラス css。
igcolorpicker-table

ウィジェットのカラーテーブルクラス css。
igcolorpicker-customcolors

ウィジェットのカスタムカラークラス css。
ui-colorpicker-standardcolors

ウィジェットのデフォルトカラークラス css。
ui-colorpicker-standardcolors

行クラスの css。

Ignite UI for jQuery | API リファレンス

ui.igColorPicker

コード サンプル

依存関係

継承

コードサンプル