使用jquery easyui，如何通过选项卡中的链接创建选项卡？

时间：2012-04-03 14:39:54

标签： javascript jquery jquery-easyui

Tabs document

我想从标签中的链接创建一个新标签

例如，在标签a中，有一个链接“打开标签b”，它应该添加一个标签b，

当链接不在标签中时（我正在运行）

，我尝试了创建标签的方式

然而，在这种情况下，当我按下它时，它没有响应。谢谢

<a href='#' onclick="addTab('Manage List','list/view.php')" class='btn'>Manage List</a>

addtab功能

function addTab(title, url){  
    if ($('#tt').tabs('exists', title)){  
        $('#tt').tabs('select', title);  
    } else {  
        var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';  
        $('#tt').tabs('add',{  
            title:title,  
            content:content,  
            closable:true  
        });  
    }  
}

整页

<?
include("../connection/conn.php");
session_start();?>
<!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">
<head>

<style type="text/css">
      @import "../plugin/easyui/themes/default/easyui.css";
      @import "../plugin/easyui/themes/icon.css";
      @import "../plugin/bootstrap/css/bootstrap.css";
      @import "../plugin/bootstrap/css/bootstrap-responsive.css";
      @import "../style/form.css";
</style>
<script src="../plugin/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../plugin/easyui/jquery.easyui.min.js"></script>
<script src="../plugin/jquery.validate.min.js"></script>

<script>  
$(document).ready(function(){   
$("#addlist").validate();
});

function addTab(title, url){  
    if ($('#tt').tabs('exists', title)){  
        $('#tt').tabs('select', title);  
    } else {  
        var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';  
        $('#tt').tabs('add',{  
            title:title,  
            content:content,  
            closable:true  
        });  
    }  
}  

$(function(){
  $("#closeTab").click(function() {
            $.post("clear.php",function(data){
             window.parent.$('#tt').tabs('close','Create List'); 
             location.reload();     
      });
  });
});

</script>


</head>
<body style="background:#7C96A8;">

<div id="stylized" class="myform">
<form id="addlist" method="post" action="addNext.php" >
<h1>Create your new subscriber list</h1> 
<p>Create a new list before adding subscriber <label class="right"><span class="label label-warning"><em class="dot">*</em>   Indicates required</span></p>

<label><em class="dot">*</em> <strong>List name:</strong>
<span class="small">Add your list name</span>
</label>
<input id="lname" name="lname" class="required" <?if (isset($_SESSION['lname'])) { echo "value=".$_SESSION['lname'];}?> />

<div class="spacer"></div>

<label><strong>Reminder:</strong>
<span class="small">Remind the details of your list</span>
</label>
<textarea id="creminder" style="width:300px" name="creminder" cols="15" rows="10"><?if (isset($_SESSION['creminder'])) {echo $_SESSION['creminder'];}?></textarea>

<div class="spacer"></div>

<p>Email me when ...</p> 
<label>People subscribe:</label> <input type="checkbox" class="checkbox" name="subscribe" value="1" <? if (isset($_SESSION['subscribe']) && $_SESSION['subscribe']==1){echo "checked='yes'";}?> >
<label>People unsubscribe:</label> <input type="checkbox" class="checkbox" name="unsubscribe" value="1" <? if (isset($_SESSION['unsubscribe']) && $_SESSION['unsubscribe']==1){echo "checked='yes'";}?> >


<div class="spacer"></div>
<input type="button" id="closeTab" value="Cancel" class="btn" style="width:100px"/> 
<input type="submit" value="Next" class="btn btn-primary" style="width:100px"/>

<div class="spacer"></div>
</form>
<div class="spacer"></div>
</div>



<br><br><br>
<div id="stylized" class="myform">

<?
// list out the pervious create list
try{
$sql = '
    SELECT   *
    FROM     list,user_list
    WHERE    user_list.UserID=?
    AND list.ListID=user_list.ListID
';
$stmt = $conn->prepare($sql);
$stmt->execute(array($_SESSION['username']));
$result= $stmt->fetchAll();
$numRows= $stmt->rowCount();
}
catch(PDOException $e)
    {
    die ($e->getMessage().'<a href="add.php"> Back</a>'); 
    }


if ($numRows == 0) {
    echo '<div style="text-align:center;font-weight:bold;">You have not created any list yet.</div>';}
else {
    echo '<h1>Your Subscriber List</h1> <p>You have created '.$numRows.' list(s).</p>';
foreach ($result as $set) 
{
    try{
$sql = '
    SELECT   ls.SubID
    FROM     list_sub ls,user_list ul
    WHERE    ul.UserID=?
    AND ls.ListID='.$set['ListID'].'
    AND ls.ListID=ul.ListID
';
$stmt = $conn->prepare($sql);
$stmt->execute(array($_SESSION['username']));
$numSubs= $stmt->rowCount();
}
catch(PDOException $e)
    {
    die ($e->getMessage().'<a href="add.php"> Back</a>'); 
    }

echo '<span class="label">List Name</span> : <strong>'.$set['ListName'].'</strong><br><br>';
echo '<span class="label">Number of subscriber</span> : <strong>'.$numSubs.'</strong><br><br>';
echo '<span class="label">Create Date</span> : <strong>'.$set['CreateDate'].'</strong><br><br>';
?><a href='#' onclick="addTab('Manage List','list/view.php')" class='btn'>Manage List</a><?
echo '<p></p>';
}}
    ?>
<div class="spacer"></div>
</div>


<br><br><br>
<div id="stylized" class="myform">

<?
// list out the public list
try{
$query = '
    SELECT *
    FROM     list
    Where IsPublic=1
';
$stmt = $conn->prepare($query);
$stmt->execute();
$result= $stmt->fetchAll();
$num_rows= $stmt->rowCount();
}
catch(PDOException $e)
    {
    die ($e->getMessage().'<a href="add.php"> Back</a>'); 
    }
$conn = null;
if ($num_rows == 0) {
    echo '<div style="text-align:center;font-weight:bold;">There are no public list.</div>';}
else {
    echo '<h1>Public Subscriber List</h1> <p>There are '.$num_rows.' list(s).</p>';
foreach ($result as $set) 
{
    try{
$sql = '
    SELECT   ls.SubID
    FROM     list_sub ls,user_list ul
    WHERE    ul.UserID=?
    AND ls.ListID='.$set['ListID'].'
    AND ls.ListID=ul.ListID
';
$stmt = $conn->prepare($sql);
$stmt->execute(array($_SESSION['username']));
$numSubs= $stmt->rowCount();
}
catch(PDOException $e)
    {
    die ($e->getMessage().'<a href="add.php"> Back</a>'); 
    }

echo '<span class="label">List Name</span> : <strong>'.$set['ListName'].'</strong><br><br>';
echo '<span class="label">Number of subscriber</span> : <strong>'.$numSubs.'</strong><br><br>';
echo '<span class="label">Create Date</span> : <strong>'.$set['CreateDate'].'</strong><br><br>';
echo "<a href='#' onclick='addTab('Manage List','list/view.php')' class='btn'>Manage List</a>"; // **********************the add tag link is here***************************//
echo '<p></p>';

}}
    ?>
<div class="spacer"></div>
</div>


</div>
</body>
</html>

更新：

添加代码后仍然没有响应？                    

<style type="text/css">
      @import "../plugin/easyui/themes/default/easyui.css";
      @import "../plugin/easyui/themes/icon.css";
      @import "../plugin/bootstrap/css/bootstrap.css";
      @import "../plugin/bootstrap/css/bootstrap-responsive.css";
      @import "../style/form.css";
</style>
<script src="../plugin/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../plugin/easyui/jquery.easyui.min.js"></script>
<script src="../plugin/jquery.validate.min.js"></script>

<script>  
$(document).ready(function(){   
$("#addlist").validate();
});

$(function(){
  $("#closeTab").click(function() {
            $.post("clear.php",function(data){
             window.parent.$('#tt').tabs('close','Create List'); 
             location.reload();     
      });
  });
});



function addTab(title, url){  
    if ($('#tt').tabs('exists', title)){  
        $('#tt').tabs('select', title);  
    } else {  
        var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';  
        $('#tt').tabs('add',{  
            title:title, 
            content:content, 
            closable:true,
             tools:[{
                    iconCls:'icon-mini-refresh',
                    handler:function(){
              var tab = $('#tt').tabs('getSelected');
            $('#tt').tabs('update', {
                tab: tab,
                options:{
                    title:title,
                    content:content, 
                    closable:true
                }
            });
        }                       

                }]
        });  
    }  
}    

        function init() {
            $("#addtab1").on("click",function() {
                addTab("slashdot","http://www.slashdot.org/");
            });
            $("#addtab2").on("click",function() {
                addTab("slashdot","http://www.slashdot.org/");
            });
        }
        $(init);


</script>


</head>
<body style="background:#7C96A8;padding:10px;">

<div id="stylized" class="myform">
<form id="addlist" method="post" action="addNext.php" >
<h1>Create your new subscriber list</h1> 
<p>Create a new list before adding subscriber <label class="right"><span class="label label-warning"><em class="dot">*</em>   Indicates required</span></p>

<label><em class="dot">*</em> <strong>List name:</strong>
<span class="small">Add your list name</span>
</label>
<input id="lname" name="lname" class="required" <?if (isset($_SESSION['lname'])) { echo "value=".$_SESSION['lname'];}?> />

<div class="spacer"></div>

<label><strong>Reminder:</strong>
<span class="small">Remind the details of your list</span>
</label>
<textarea id="creminder" style="width:300px" name="creminder" cols="15" rows="10"><?if (isset($_SESSION['creminder'])) {echo $_SESSION['creminder'];}?></textarea>

<div class="spacer"></div>

<p>Email me when ...</p> 
<label>People subscribe:</label> <input type="checkbox" class="checkbox" name="subscribe" value="1" <? if (isset($_SESSION['subscribe']) && $_SESSION['subscribe']==1){echo "checked='yes'";}?> >
<label>People unsubscribe:</label> <input type="checkbox" class="checkbox" name="unsubscribe" value="1" <? if (isset($_SESSION['unsubscribe']) && $_SESSION['unsubscribe']==1){echo "checked='yes'";}?> >


<div class="spacer"></div>
<input type="button" id="closeTab" value="Cancel" class="btn" style="width:100px"/> 
<input type="submit" value="Next" class="btn btn-primary" style="width:100px"/>

<div class="spacer"></div>
</form>
<div class="spacer"></div>
</div>


<br><br><br>
<div id="stylized" class="myform">

<?
// list out the pervious create list
try{
$sql = '
    SELECT   *
    FROM     list,user_list
    WHERE    user_list.UserID=?
    AND list.ListID=user_list.ListID
';
$stmt = $conn->prepare($sql);
$stmt->execute(array($_SESSION['username']));
$result= $stmt->fetchAll();
$numRows= $stmt->rowCount();
}
catch(PDOException $e)
    {
    die ($e->getMessage().'<a href="add.php"> Back</a>'); 
    }


if ($numRows == 0) {
    echo '<div style="text-align:center;font-weight:bold;">You have not created any list yet.</div>';}
else {
    echo '<h1>Your Subscriber List</h1> <p>You have created '.$numRows.' list(s).</p>';
foreach ($result as $set) 
{
    try{
$sql = '
    SELECT   ls.SubID
    FROM     list_sub ls,user_list ul
    WHERE    ul.UserID=?
    AND ls.ListID='.$set['ListID'].'
    AND ls.ListID=ul.ListID
';
$stmt = $conn->prepare($sql);
$stmt->execute(array($_SESSION['username']));
$numSubs= $stmt->rowCount();
}
catch(PDOException $e)
    {
    die ($e->getMessage().'<a href="add.php"> Back</a>'); 
    }

echo '<span class="label">List Name</span> : <strong>'.$set['ListName'].'</strong><br><br>';
echo '<span class="label">Number of subscriber</span> : <strong>'.$numSubs.'</strong><br><br>';
echo '<span class="label">Create Date</span> : <strong>'.$set['CreateDate'].'</strong><br><br>';
?><button id='addtab1' class='btn'>Manage List</button><?
echo '<p></p>';
}}
    ?>
<div class="spacer"></div>
</div>


<br><br><br>
<div id="stylized" class="myform">

<?
// list out the public list
try{
$query = '
    SELECT *
    FROM     list
    Where IsPublic=1
';
$stmt = $conn->prepare($query);
$stmt->execute();
$result= $stmt->fetchAll();
$num_rows= $stmt->rowCount();
}
catch(PDOException $e)
    {
    die ($e->getMessage().'<a href="add.php"> Back</a>'); 
    }
$conn = null;
if ($num_rows == 0) {
    echo '<div style="text-align:center;font-weight:bold;">There are no public list.</div>';}
else {
    echo '<h1>Public Subscriber List</h1> <p>There are '.$num_rows.' list(s).</p>';
foreach ($result as $set) 
{
    try{
$sql = '
    SELECT   ls.SubID
    FROM     list_sub ls,user_list ul
    WHERE    ul.UserID=?
    AND ls.ListID='.$set['ListID'].'
    AND ls.ListID=ul.ListID
';
$stmt = $conn->prepare($sql);
$stmt->execute(array($_SESSION['username']));
$numSubs= $stmt->rowCount();
}
catch(PDOException $e)
    {
    die ($e->getMessage().'<a href="add.php"> Back</a>'); 
    }

echo '<span class="label">List Name</span> : <strong>'.$set['ListName'].'</strong><br><br>';
echo '<span class="label">Number of subscriber</span> : <strong>'.$numSubs.'</strong><br><br>';
echo '<span class="label">Create Date</span> : <strong>'.$set['CreateDate'].'</strong><br><br>';
echo "<button id='addtab1' class='btn'>Manage List</button>";
echo '<p></p>';

}}
    ?>
<div class="spacer"></div>
</div>


</div>
</body>
</html>

2 个答案:

答案 0 :(得分：1)

这是你想要的吗？

  $("# tags div id ").tabs({
          add: function(event, ui) { 
               $(this).append(ui.panel)
          }
     })

这只是纯粹而简单的标签添加，我认为这就是你所要求的。

祝你好运。

答案 1 :(得分：0)

我已经创建了您正在描述的问题here的最小实现，并且它没有任何问题。它使用了addTab()函数的经过修改的版本。

我建议您使用古老的Firebug或Chrome内置的开发者工具来查看正在发生的javascript或其他错误。

另外，尝试简单地升级到最新的jQuery和jQuery-easui库，看看是否有帮助。

相关问题
最新问题