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

投稿日: 2011年6月28日 作成者: alphasis

jQuery UI の Dialog プラグインのダイアログを使ったフォーム。フォームダイアログで入力したものを、ページで受け取り表示する。

実装例（サンプル）

名前 コメント
ALPHASIS Hellow!

名前とコメントを入力して追加ボタンを押してください。

実装例（サンプル）の動作について

  • 「追加」ボタンをクリックすると、ブラウザの中央に、追加フォームダイアログが出現する。
  • 「名前」と「コメント」を入力して、「追加」ボタンをクリックすると、実装例（サンプル）のテーブルに追加する。
  • ダイアログ内の「×」アイコンをクリックすると、ダイアログを閉じる。
  • ダイアログ内のタイトルをドラッグしながら、ダイアログを移動できる。
  • ダイアログのサイズを変更できる。

実装例（サンプル）のソースコード

読み込み

パスは、それぞれ、アップロードした場所を指定する。

まとめて読み込む場合
<link rel="stylesheet" href="themes/base/jquery.ui.all.css" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery-ui-1.8.12.custom.min.js"></script>
個別に読み込む場合
<link rel="stylesheet" href="themes/base/jquery.ui.all.css" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="ui/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="ui/jquery.ui.dialog.js"></script>
<script type="text/javascript" src="ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="ui/jquery.effects.core.js"></script>
<script type="text/javascript" src="ui/jquery.effects.explode.js"></script>

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( 'button', '.jquery-ui-button' ) . button();
    jQuery( '#jquery-ui-dialog-opener' ) . click( function() {
        jQuery( '#jquery-ui-dialog' ) . dialog( 'open' );
    } );
    var name = jQuery( '#jquery-ui-dialog-form-name' );
    var comment = jQuery( '#jquery-ui-dialog-form-comment' );
    jQuery( '#jquery-ui-dialog' ) . dialog( {
        autoOpen: false,
        width: 350,
        show: 'explode',
        hide: 'explode',
        modal: true,
        buttons: {
            '追加': function() {
                if ( name . val() || comment . val() ) {
                    jQuery( '#jquery-ui-dialog-table tbody' ) . append(
                        '<tr>' +
                        '<td>' + name . val() + '</td>' +
                        '<td>' + comment . val() + '</td>' +
                        '</tr>'
                    );
                    jQuery( this ).dialog( 'close' );
                }
                jQuery( this ) . dialog( 'close' );
            },
            'キャンセル': function() {
                jQuery( this ) . dialog( 'close' );
            },
        }
    } );
} );
// -->
</script>

CSS

<style>
<!--
#jquery-ui-dialog-table {
    font-size: 13px;
}
#jquery-ui-dialog-table th , #jquery-ui-dialog-table td {
    border: 1px solid gray;
}
-->
</style>

HTML

<table id="jquery-ui-dialog-table" class="ui-widget ui-widget-content">
    <thead>
        <tr class="ui-widget-header ">
            <th id="table-th-name">名前</th>
            <th id="table-th-comment">コメント</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>ALPHASIS</td>
            <td>Hellow!</td>
        </tr>
    </tbody>
</table>
<div class="jquery-ui-button">
    <button id="jquery-ui-dialog-opener">追加</button>
</div>
<div id="jquery-ui-dialog" title="追加">
    <form>
    <fieldset>
        <p>名前とコメントを入力して追加ボタンを押してください。</p>
            <label for="jquery-ui-dialog-form-name">名前</label>
            <input type="text" name="jquery-ui-dialog-form-name" id="jquery-ui-dialog-form-name" class="text ui-widget-content ui-corner-all" />
        </p>
        <p>
            <label for="jquery-ui-dialog-form-comment">コメント</label>
            <input type="text" name="jquery-ui-dialog-form-comment" id="jquery-ui-dialog-form-comment" class="text ui-widget-content ui-corner-all" />
        </p>
    </fieldset>
    </form>
</div>

スポンサード リンク

カテゴリー: Dialog, JavaScript, jQuery, jQuery UI, フォーム パーマリンク