0

我正在建立一个网站，管理员可以在其中为网站进行设置。我希望管理设置页面与网站的其他部分有类似的“感觉”，它有一些漂亮的 jQuery 功能。

在管理站点上有一个隐藏的 div，当单击六个链接之一时会显示该 div。我希望隐藏 div 的内容在显示之前更改内容。我不知道该怎么做。我可以为页面上的每个链接设置一个 div 框。但这变得非常麻烦，因为我需要为每个链接重复我的 css 和 jquery。我想这可以通过一些 javascript/jquery 代码来完成，该代码确定哪个链接被点击，然后决定在隐藏的 div 中调用哪个 php 函数。然后 php 可以“回显”出 div 的内容，然后可以显示出来。

怎么可能做到这一点？

我的 HTML/jQuery 代码如下：

--- html 链接 ---

<table id="settings">
<tr>    
<td>
<a href="#" class="action"><img src="images/folder.gif" alt="" height="100"/></a>
</td>

<td>
<a href="#" class="action"><img src="images/folder.gif" alt="" height="100"/></a>
</td>
<td>
<a href="#" class="action"><img src="images/folder.gif" alt="" height="100"/></a>
</td>

----- 隐藏的 div -----

<div id="dashboard_box">
<div class="dashboard_inside">
    <form action="#" method="post">
        <p style="font-size:20px; font-weight: bold;">Change color</p>
        </br>
        <fieldset>

            <? load_content1();?>

        </fieldset>
    </form>
</div>
</div>

---- jquery代码（工作）----

var mouse_is_inside = false;

$(document).ready(function() {
$(".action").click(function() {
    var loginBox = $("#dashboard_box");
    if (loginBox.is(":visible"))
        loginBox.fadeOut("fast");
    else
        loginBox.fadeIn("fast");
    return false;
});

$("#dashboard_box").hover(function(){ 
    mouse_is_inside=true; 
}, function(){ 
    mouse_is_inside=false; 
});

$("body").click(function(){
    if(! mouse_is_inside) $("#dashboard_box").fadeOut("fast");
});


});
4

3 回答 3

1

您可能想使用 ajax 从服务器加载内容。看看 jquery 的 .load() 方法：http ://api.jquery.com/load/

您可以在每个链接中包含一个数据属性：

<a class="action" data-content="content.php?method=load_content1"></a>
<a class="action" data-content="content.php?method=load_content2"></a>

js 看起来像这样：

$(".action").on('click', function() {    
    $("#dashboard_box fieldset").load($(this).data('content'), function() {
      var loginBox = $("#dashboard_box");
      if (loginBox.is(":visible"))
        loginBox.fadeOut("fast");
      else
        loginBox.fadeIn("fast");
    }
    return false;

});

然后，在您的 content.php 文件中，您可以检查 url 中的方法参数以确定要返回的内容。

我的 php 有点生锈了，但是是这样的：

<?
  call_user_func($_GET['method']); // i'm not sure how safe this is. you may want to be more explicit
?>
于 2013-04-10T23:45:44.680 回答
0

您可以在每个链接中添加数据属性

<a href="#" data-url="content1.php" ..

然后单击任何一个，a您都可以获得要调用的 php。

$('a').on('click',function(){
    var phpFunctionToCall = $(this).data('url');
});

您可能需要进行 ajax 调用以将内容加载到您的字段集中，因为此<? load_content1();?>运行在服务器上并且 javascript 无法控制它。

于 2013-04-10T23:34:16.917 回答
0

感谢所有的帮助。这就是我最终要做的。

--- HTML ---

<a class="action" data-content="content.php?method=load_content2"></a>

---jQuery---

var mouse_is_inside = false;

$(document).ready(function() {

$(".action").click(function() {

    var phpFunctionToCall = $(this).data('content');
    $('#indhold').load(phpFunctionToCall);

    var loginBox = $("#dashboard_box");
    if (loginBox.is(":visible"))
        loginBox.fadeOut("fast");
    else
        loginBox.fadeIn("fast");
    return false;



});

$("#dashboard_box").hover(function(){ 
    mouse_is_inside=true; 
}, function(){ 
    mouse_is_inside=false; 
});

$("body").click(function(){
    if(! mouse_is_inside) $("#dashboard_box").fadeOut("fast");
});

});

--- PHP（缩短）---

function load_settings_panel($settingOnRequest) {

return $settingOnRequest;

}

$result = call_user_func('load_settings_panel', $_GET['method']);
echo($result);
于 2013-04-11T08:41:24.257 回答