ドットインストールのレッスンでJQuery UIの使い方を勉強してみました。とりあえず、ある要素をドラッグ可能にするDraggableの基本的な使い方についてのレッスンです。通常のHTMLで動作することを確認できたのでVisualforceページでも試してみました。
確認手順
最初に次のリンク先からJQueryUIのZipファイルをダウンロードします。
ThemeRoller | jQuery UI
http://jqueryui.com/themeroller/
ページの左側にあるGalleryから好きなテーマを選択してダウンロードします。
ダウンロードしたZipは静的リソースにアップして使用します。
次のコードでDraggableの動作確認ができます。
これで表示される画面はこんな感じです。
青色の四角部分をドラックして移動させることができます。
今回、CSSやJS部分は別ページに分けてapex:inculdeで読み込むようにしてあります。こうすると一つのページのコードが短くなって作業しやすくなると思っています。CSSはこれで問題なく動作することを確認していたのですがJS部分は試したことがありませんでした。JSも問題なく動作してくれるみたいで一安心です。
CSSやJSはどうしても長くなってしまうのでメインのコードを編集する際に少しジャマになると思っています。静的リソースで管理してしまうと編集が少し大変になってしまうと個人的には思っているのでページ側で管理する方法がいいかなと思ってます。このときページ名はできるかぎり同じ名前をつけてあげるとページ名で並べた時にバラバラにならなくていいんじゃないかと思いました。
とりあえずJQueryの読み込みが正常に実行されてDraggableの動作を確認することができました。これをベースにJQuery UIの勉強を進めていきたいと思います。
