动态创建选项卡并使用jquery加载选项卡内容

时间:2015-03-14 19:30:04

标签: jquery ajax jquery-ui tabs

我正在播放Jqueryui Tab Manipulation,但我无法按照我想要的方式修改它。我有像

这样的菜单
<li onclick="createTab('Title','home.php')">Home</li>
<li onclick="createTab('Title','edit.php')">Edit</li>
<li onclick="createTab('Title','view.php')">View</li>
<div id="tabs">    
<div id="#tabs-1">
<ul>
   <li><a href="#tabs-1">Tab Title here</a>
    <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span>
  </li>
</ul>
</div>
<div id="tabs-1">tab content will be here</div>
</div>

到目前为止我正在使用的Jqueryui函数:

function creatTab(Title, url, e=null) {
       e.preventDefault();
            var label = Title.val() || "Tab " + tabCounter,
                id = "tabs-" + tabCounter,
                li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
                var tabContentHtml = load(url) || "Tab " + tabCounter + " content.";

            tabs.find( ".ui-tabs-nav" ).append( li );
            tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
            tabs.tabs( "refresh" );
            tabCounter++;
        }

我希望在用户点击“编辑”菜单等时动态创建标签并在新创建的标签内容区域中加载edit.php。在标签操作演示中,它使用对话而不是加载内容。我在谷歌寻找解决方案已经很长时间了,但除了像jquery easyui提供simple solution之类的图书馆之外找不到它。这没有用,因为我已经决定将jqueryui用于我的项目。请帮帮我。

1 个答案:

答案 0 :(得分:1)

以下功能名称缺少&#39; e&#39;

function creatTab