管理面板中的动态内容

Dynamic content in admin panel

本文关键字:动态 管理      更新时间:2023-09-26

我目前正在为一个网站建立一个管理控制面板,我和一些朋友正在启动。我想为面板包含在左边的菜单,只是切换出什么内容显示在中间的右边的主页上。基本上菜单是由按钮组成的,当一个按钮被点击时,我希望它改变什么内容是可见的。这是可能的javascript吗?如果有,有人知道怎么把它链接到html吗?我给标签某种类型的标识符,javascript函数调用?我知道我的问题可能看起来很模糊,但对这件事的任何帮助都会非常感激。

可以使用jQuery。它应该是这样的:

<head>
    <script type="text/javascript">
        function loadPage(thePage) 
        {
            $.ajax({
                type: 'GET',
                url: thePage,
                success: function(response) {
                     $('#main_content').html(response);
                },
                dataType: 'html'
            });
        }
        $(document).ready(function() {
            // I just imagine you have some php pages here
            $('#add_employee').click = loadPage('AddEmployee.php');
            $('#show_employee').click = loadPage('ShowEmployees.php');
        });
    </script>
</head>
<body>
    <div id="left_panel">
        <a href="#" id="add_employee">Add employee</a>
        <a href="#" id="show_employee">Show employees</a>
    </div>
    <div id="main_content">
        // This is your main content on the right of the admin panel
    </div>
</body>

您可以使用simpleTabs和Jquery之类的东西。我在这里创建了一个演示,http://jsfiddle.net/6kN5M/

如果你愿意,基本上忽略CSS布局。从标记中要理解的主要事情是,第一个选项卡/按钮被突出显示,它显示了第一个内容。当你点击另一个选项卡/按钮时,就会显示另一段内容。