jQuery UI

jQuery UIによる画面コンポーネント(1)
●見出しのクリックで項目を開いて表示(アコーディオン)

jQuery UI設定

$('div#ex1').dialog({width:280,height:200,resizable:false,
   buttons:{
      '登録する':function(ev) {
      var message='ほんとに登録してもいいんですか?'
      var text=this.text();
      if(text !=message) {
        this.text(message);
        $(ev.target).text('だから登録するの!');
      } else {
        this.text('登録されました');
        $('button',$(ev.target).parent())
                 .attr('disabled','disabled');
        setTimeout("$('div#ex1').dialog('close')",1000);
      }
    },
    '取り消し':function(ev) {
    this.dialog('close');
   }
}});

CSS設定



実行例 見出しのマウスカーソルを合わせたら開くようにする

html
<div id="ex1" title="データ登録の確認">データを登録しますか?</div>