編集画面を作る。

　スライドの編集画面として最低限必要なものを挙げてみる。

スライドウィンドウ
次のスライドと前のスライドへの移動ボタン
スライド挿入
スライド削除
テキストボックス挿入
テキストボックス削除
テキストボックス本文の入力エリア
テキストボックスの文字寄せ選択
変更を適用するボタン

以上の要素をシンプルにまとめたのが以下のHTMLです。CSSは別ファイルに分けました。まだそれぞれのボタンにはイベントを割り当ててないので押しても無意味です。と、それではあんまりなので、テキストボックス挿入ボタンでテキストボックスもどきを新規作成し編集画面に表示させるのに挑戦しました。

<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
  <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="../jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="edit.css" />
    <script type="text/javascript">
      $(document).ready(function() {
          $("#addTextBox").click(function() {
            $("<div/>").css({"position": "relative", "top": "20px", "left": "30px", "width": "200px", "height": "50px", "background-color": "lime"}).appendTo("#editWindow");
            });
          });
    </script>
  </head>
  <body>
    <div id="editWindow"></div>
    <form>
      <input type="button" id="prevSlide" value="<">
      <input type="button" id="nextSlide" value=">">
    </form>
    <div id="sideBar">
      <form>
        <input type="button" id="addSlide" value="Add Slide">
        <br>
        <input type="button" id="deleteSlide" value="Delete Slide">
        <br>
        <input type="button" id="addTextBox" value="Add TextBox">
        <br>
        <input type="button" id="deleteTextBox" value="Delete TextBox">
        <br>
        <textarea rows=4 cols=30></textarea>
        <br>
        <input type="radio" name="yose" checked>左寄せ
        <input type="radio" name="yose">中央
        <input type="radio" name="yose">右寄せ
        <br>
        <input type="button" id="Commit" value="Commit">
      </form>
    </div>
  </body>
</html>

Add TextBoxボタンを押したときの動作を設定します。まずクリックしたときにどうさせるかを

$("#addTextBox").click(function() {
  // やりたい処理
  });

のように指定します。この関数の中で今回は新たにdiv要素を作成しeditWindowに追加します。

$("<div/>")

これでdiv要素を作り、そのjQueryオブジェクトが返ってきます。

.css({"background-color": "yellow"})

こんな感じでハッシュでstyleを指定します。

.appendTo("#editWindow")

最後にappendToで要素を追加します。appendとappendToを間違えないように。これらをjQueryお得意のメソッドチェーンで繋げると、

$("#addTextBox").click(function() {
  $("<div/>").css({"position": "relative", "top": "20px", "left": "30px", "width": "200px", "height": "50px", "background-color": "lime"}).appendTo("#editWindow");
  });

となります。実際にAdd TextBoxボタンを押してもらうと緑色のdiv要素が表示されると思います。次はこれを改良していこうと考えてます。