タグ

ブックマーク / alphasis.info (5)

  • ドラッグ&ドロップで新たな項目を並び替えられるリストへ追加

    jQuery UI の Draggable プラグインを使った、ドラッグして移動できるボックスと、jQuery UI の Sortable プラグインを使った、並び替えられるリストとの併用。併用することにより、ドラッグ&ドロップで、新たな項目を、並び替えられるリストへ、追加できる。 実装例(サンプル) 実装例の動作について 「この項目を追加」と書いてあるリスト項目を、ドラッグして、破線で囲んだリストの「項目 2」の上へ移動すると、「項目 2」が下へ移動し、「項目 1」と「項目 2」の間にスペースができる。そのスペースへドロップすると、破線で囲んだリストへ追加することができる。破線で囲んだリスト項目は、並べ替えることもできる。 実装例のソースコード 読み込み 読み込み方は、2種類ある。パスは、それぞれ、アップロードした場所を指定する。 まとめて読み込む場合 <link rel="styles

  • jQuery UI の Dialog プラグインを使った送信確認ダイアログ

    実装例(サンプル)の動作について 「送信」ボタンをクリックすると、ブラウザの中央に、確認ダイアログが出現する。 ダイアログ内に「送信」と「キャンセル」の2つのボタンが表示される。 サンプルなので、実際には送信しない。 ダイアログ内の「×」アイコンをクリックすると、ダイアログを閉じる。 ダイアログ内のタイトルをドラッグしながら、ダイアログを移動できる。 ダイアログのサイズを変更できる。 実装例(サンプル)のソースコード 読み込み パスは、それぞれ、アップロードした場所を指定する。 まとめて読み込む場合 <link rel="stylesheet" href="themes/base/jquery.ui.all.css" /> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/ja

  • jQuery UI の Dialog プラグインのダイアログを使ったフォーム

    実装例(サンプル)の動作について 「追加」ボタンをクリックすると、ブラウザの中央に、追加フォームダイアログが出現する。 「名前」と「コメント」を入力して、「追加」ボタンをクリックすると、実装例(サンプル)のテーブルに追加する。 ダイアログ内の「×」アイコンをクリックすると、ダイアログを閉じる。 ダイアログ内のタイトルをドラッグしながら、ダイアログを移動できる。 ダイアログのサイズを変更できる。 実装例(サンプル)のソースコード 読み込み パスは、それぞれ、アップロードした場所を指定する。 まとめて読み込む場合 <link rel="stylesheet" href="themes/base/jquery.ui.all.css" /> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="te

  • アルファシス – alphasis.info -

    カテゴリー別アーカイブ JavaScript (2,265) リファレンス (1,050) Hello World (3) 基構文 (8) 変数 (13) 定数 (2) データ型 (5) リテラル (13) 文字列リテラル (4) 配列リテラル (3) オブジェクトリテラル (3) 演算子 (52) 制御構造 (65) if (5) switch (4) while (6) do-while (6) for (10) for-in (8) for each-in (6) break (6) continue (5) debugger (1) function (1) return (1) var (1) with (1) try-catch-finally (3) throw (1) ユーザー定義関数 (21) ユーザー定義オブジェクト (10) 組み込み関数 (10) 組み込み定数 (

  • jQuery UI の Sortable を使いドラッグ&ドロップで並べ替え

    jQuery UI の Sortable プラグインを使い、ドラッグ&ドロップで並べ替えを行えるようにする方法。 実装例(サンプル) 項目 1 項目 2 項目 3 項目 4 項目 5 項目 6 項目 7 実装例の動作について 「項目 1」をドラッグして、下へ動かし、「項目 2」の上に持ってくると、「項目 2」が上へ移動し、「項目 2」と「項目 3」の間にスペースができる。そのスペースへドロップすると、「項目 1」と「項目 2」が入れ替わり、「項目 2」「項目 1」「項目 3」…の順番になる。 同様に、「項目 1」から「項目 7」の項目全て、ドラッグ&ドロップによる並べ替えが行える。 実装例のソースコード 読み込み 読み込み方は、2種類ある。パスは、それぞれ、アップロードした場所を指定する。 まとめて読み込む場合 <link rel="stylesheet" href="themes/bas

  • 1