jquery ui问题。。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 标签页（Tabs） - 简单的操作</title>
  <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
  <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="jqueryui/style.css">
  <style>
  #dialog label, #dialog input { display:block; }
  #dialog label { margin-top: 0.5em; }
  #dialog input, #dialog textarea { width: 95%; }
  #tabs { margin-top: 1em; }
  #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
  #add_tab { cursor: pointer; }
  </style>
  <script>
  $(function() {
    var tabTitle = $( "#tab_title" ),
      tabContent = $( "#tab_content" ),
      tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
      tabCounter = 2;
 
    var tabs = $( "#tabs" ).tabs();
 
 
 
    // 实际的 addTab 函数：使用上面表单的输入添加新的标签页
    function addTab() {
      var label = tabTitle.val() || "Tab " + tabCounter,
        id = "tabs-" + tabCounter,
        li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
        tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";
 
      tabs.find( ".ui-tabs-nav" ).append( li );
      tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
      tabs.tabs( "refresh" );
      tabCounter++;
    }
 
    // addTab 按钮：值打开对话框
    $( "#add_tab" )
      .button()
      .click(function() {
         addTab();
      });
 
    // 关闭图标：当点击时移除标签页
    tabs.delegate( "span.ui-icon-close", "click", function() {
      var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
      $( "#" + panelId ).remove();
      tabs.tabs( "refresh" );
    });
 
    tabs.bind( "keyup", function( event ) {
      if ( event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE ) {
        var panelId = tabs.find( ".ui-tabs-active" ).remove().attr( "aria-controls" );
        $( "#" + panelId ).remove();
        tabs.tabs( "refresh" );
      }
    });
  });
  </script>
</head>
<body>
 
<div id="dialog" title="Tab data">
  <form>
    <fieldset class="ui-helper-reset">
      <label for="tab_title">标题</label>
      <input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content ui-corner-all">
      <label for="tab_content">内容</label>
      <textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all"></textarea>
    </fieldset>
  </form>
</div>
 
<button id="add_tab">添加标签页</button>
 
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a> <span class="ui-icon ui-icon-close" role="presentation">移除标签页</span></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
</div>
 
 
</body>
</html>

解决方案 »

  1.   

       $( "#add_tab" )
          .button()
          .click(function() {
    //dialog.dialog("open");
             addTab();//直接添加就行了，不用打开
          });
      

  2.   


        // addTab 按钮：值打开对话框
        $( "#add_tab" )
          .button()
          .click(function() {
             addTab();
          });
      
    这里不一样
      

  3.   

    去掉表单把这段删掉就行了
    <div id="dialog" title="Tab data">
      <form>
        <fieldset class="ui-helper-reset">
          <label for="tab_title">标题</label>
          <input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content ui-corner-all">
          <label for="tab_content">内容</label>
          <textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all"></textarea>
        </fieldset>
      </form>
    </div>
      

  4.   

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI 标签页（Tabs） - 简单的操作</title>
      <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
      <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
      <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
      <link rel="stylesheet" href="jqueryui/style.css">
      <style>
      #dialog label, #dialog input { display:block; }
      #dialog label { margin-top: 0.5em; }
      #dialog input, #dialog textarea { width: 95%; }
      #tabs { margin-top: 1em; }
      #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
      #add_tab { cursor: pointer; }
      </style>
      <script>
      $(function() {
        var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
          tabCounter = 2;
     
        var tabs = $( "#tabs" ).tabs();
     
        // 模态对话框的初始化：自定义按钮和一个重置内部表单的 "close" 回调
        var dialog = $( "#dialog" ).dialog({
          autoOpen: false,
          modal: true,
          buttons: {
            Add: function() {addTab();$( this ).dialog( "close" );},
            Cancel: function() {$( this ).dialog( "close" );}
          },
          close: function() {form[ 0 ].reset();}
        });
     
        // addTab 表单：当提交时调用 addTab 函数，并关闭对话框
        var form = dialog.find( "form" ).submit(function( event ) {addTab();dialog.dialog( "close" );event.preventDefault();});
     
        // 实际的 addTab 函数：使用上面表单的输入添加新的标签页
        function addTab(a,b) {
          var label =a||("Tab " + tabCounter),
            id = "tabs-" + tabCounter,
            li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
            tabContentHtml =b||( "Tab " + tabCounter + " content.");
     
          tabs.find( ".ui-tabs-nav" ).append( li );
          tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
          tabs.tabs( "refresh" );
          tabCounter++;
        }
     
        // addTab 按钮：值打开对话框
        $( "#add_tab" ).button().click(function() {addTab('dfdsf地方sdfdsf','的发生值打开对话框大幅度')});
     
        // 关闭图标：当点击时移除标签页
        tabs.delegate( "span.ui-icon-close", "click", function() {
          var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
          $( "#" + panelId ).remove();
          tabs.tabs( "refresh" );
        });
     
        tabs.bind( "keyup", function( event ) {
          if ( event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE ) {
            var panelId = tabs.find( ".ui-tabs-active" ).remove().attr( "aria-controls" );
            $( "#" + panelId ).remove();
            tabs.tabs( "refresh" );
          }
        });
      });
      </script>
    </head>
    <body>
     
    <button id="add_tab">添加标签页</button>
     
    <div id="tabs">
      <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a> <span class="ui-icon ui-icon-close" role="presentation">移除标签页</span></li>
      </ul>
      <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
      </div>
    </div>
     
     
    </body>
    </html>