またドットインストールのレッスンにお世話になってJQueryUIの勉強をしてみました。
以前、Draggableの機能でdiv要素を移動させる処理を試すことができたので、今回はWidgetsの機能を試してみました。
はじめに
以前作成したDraggableのコードをベースに進めていこうとしていたところ、Consoleに次のエラーが発生していることに気が付きました。
最初VisualforceでJQuery UIを使用すると発生するのかと思ったのですが、よくよく確認してみると静的リソースのCSSを読み込む際のURLが間違っていました。というわけでURLの指定を間違えてるとこんなエラーが発生します。
サンプルコード
少し長くなってしまいましたがサンプルコードです。
画面キャプチャ
上記サンプルコードで次のように表示されます。
全体のキャプチャ
Autocompleteのキャプチャ
Datepickerのキャプチャ
Dialogのキャプチャ
すごくいい感じに表示されました。
今回確認してみたWidgetsは次のとおりです。
- Accordion
- Autocomplete
- Button
- Datepicker
- Dialog
- Progressbar
- Slider
- Tabs
詳細についてはドットインストールのレッスンかJQuery UIの公式サイトなどで確認できます。
検証時にDialogの処理がうまく実行できなくて少しハマりました。実行するとDialogが一瞬表示されるのですがすぐにクローズされてしまうという感じでした。
いろいろ調べてみたところ原因はスクリプト側ではなくapex:formタグにありました。サンプルコードから除外していますが最初はapex:formタグで囲っていて、この状態だと表示後すぐにクローズされてしまう問題が発生し、除外してみると発生しなくなりました。apex:formタグ内にあることでクリックイベント後に画面のリフレッシュが実行されてしまっていると思われます。
今回は動作確認がしたかっただけなので除外して進めましたが、実際はapex:formタグ内で使用することになると思うので何かしらの対策が必要になると思います。
・・対策も少し探してみたのですがいい案が思いつきませんでした。
ということで今回はJQueryUIのWidgetsをVisualforceページで試してみました。JQuery UIすごく面白かったです。ただJQueryUIを使用する際には基本apexタグではなく通常のHTMLタグを使用することになるのだけちょっとさみしかったです(^ ^;
