手順 3：プロジェクトの実行

この手順では、アプリケーションを実行し、新しいデータやグラフ要素（Y 軸のタイトル、グラフヘッダー、グラフラベルなど）を観察します。

[F5] を押して、アプリケーションを実行します。

以下を観察します。

コンボボックスのドロップダウン矢印をクリックします。コンボボックスの項目が下方向に移動するとアニメーションが表示されることに注意してください。

アニメーションは次のコードを使用したときに表示されます。

ソースビュー	コードのコピー
showingAnimation: { effect: "blind", duration: 2500}, hidingAnimation: { effect: "blind" },

〈元の選択要素の表示〉ボタンをクリックします。別のコンボボックスが次のように表示されることに注意してください。

次のコードを使用すると、データがコンボボックスの項目に表示されることに注意してください。

ソースビュー	コードのコピー
$(document).ready(function () { $("#tagsinput").wijcombobox( { data: [ { label: 'c++', value: 'c++' }, { label: 'java', value: 'java' }, { label: 'php', value: 'php' }, { label: 'coldfusion', value: 'coldfusion' }, { label: 'javascript', value: 'javascript' }, { label: 'asp', value: 'asp' }, { label: 'ruby', value: 'ruby' }, { label: 'python', value: 'python' }, { label: 'c', value: 'c' }, { label: 'scala', value: 'scala' }, { label: 'groovy', value: 'groovy' }, { label: 'haskell', value: 'haskell' }, { label: 'perl', value: 'perl' } ] } );

ソースビュー

コードのコピー

$(document).ready(function () {
               $("#tagsinput").wijcombobox(
            {
                               data: [
                        {
                            label: 'c++',
                            value: 'c++'
                        },
                        {
                            label: 'java',
                            value: 'java'
                        },
                        {
                            label: 'php',
                            value: 'php'
                        },
                        {
                            label: 'coldfusion',
                            value: 'coldfusion'
                        }, {
                            label: 'javascript',
                            value: 'javascript'
                        },
                        {
                            label: 'asp',
                            value: 'asp'
                        },
                        {
                            label: 'ruby',
                            value: 'ruby'
                        },
                        {
                            label: 'python',
                            value: 'python'
                        },
                        {
                            label: 'c',
                            value: 'c'
                        },
                        {
                            label: 'scala',
                            value: 'scala'
                        },
                        {
                            label: 'groovy',
                            value: 'groovy'
                        },
                        {
                            label: 'haskell',
                            value: 'haskell'
                        },
                        {
                            label: 'perl',
                            value: 'perl'
                        }
                    ]
            }
            );