首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > asp.net >

怎的使页面刷新后保存保持Ul菜单展开

2013-10-23 
怎样使页面刷新后保存保持Ul菜单展开我把左边的菜单写成了用户自定义控件,然后放到母版页里面去,当点击子

怎样使页面刷新后保存保持Ul菜单展开
我把左边的菜单写成了用户自定义控件,然后放到母版页里面去,
当点击子节点,显示相关数据在右边,同时页面会刷新(整个母版页都刷新了)  
刷新后,子菜单收起来了,我需要它还是展开的。我用什么方法可以使得菜单在刷新后,仍然保持展开状态?
我不是使用的treeview,而是使用的Repeater。而子菜单连接到右边的数据,是通过
<ahref="<%=Dir %>default.aspx?id=<%#Eval("ItemCategoryID") %>">XXX</a>


[解决办法]
我记得treeview有一个属性ExpandAll();  可以展开所有子节点,你反编译下,看看如何实现的
[解决办法]
帮顶一下!!
[解决办法]
通过JS传递参数!
分别设置菜单的ID, 保存在Url里 然后通过js取得当前url的ID,通过js控制对应菜单展开..
[解决办法]
下面是一个自定义用户控件:导航菜单。 你自己建立一个用户自定义控件,然后把下面的代码贴到ascx 文件中就行

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="_menu.ascx.cs" Inherits="admin_usercontrols_menu" %>
<style type="text/css">
    #webframe #master-left
    {
        position: relative;
        float: left;
        width: 15%;
        height: auto;
    }
    #webframe #master-right
    {
        position: relative;
        float: right;
        width: 84%;
        height: auto;
    }
    #accor-nav
    {
        width: 180px;
    }
    #accor-nav .accor-title
    {
        text-align: center;
    }
    #accor-nav .accor-title a:hover
    {
        color:Green;
        font-weight:bold;
    }
    #accor-nav ul
    {
        margin: 0px;
        padding: 0px;
        list-style-type: none;
    }
    #accor-nav ul li
    {
        text-align: center;
        margin: 2px 15px 2px 15px;
        border-bottom:1px  solid Gray;
        height:20px;
       
    }
    #accor-nav ul li:hover{ background:url('../../images/accor-liselected.gif') no-repeat -18px ;} 
    
    #accor-nav ul li a
    {
        text-decoration: none;
    }
    #accor-nav ul li a:hover
    {
        color: Red;
    }
</style>
<style type="text/css" id="by-ui-theme">
    .ui-accordion
    {
        width: 180px;
    }
    .ui-accordion .ui-accordion-header
    {
        cursor: pointer;
        position: relative;
        text-align: center; 
        background: url('../../images/accor-header.gif')repeat-x left center;
        
        margin: 5px;
        margin-left: 0px;
         margin-right: 0px;
        height: 28px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .ui-accordion .ui-accordion-header a
    {
        display: block;
        font-size: 14px;
        text-align: center;
        color: Black;
        text-decoration: none;


    }
    .ui-accordion-icons .ui-accordion-header a
    {
        padding-top: 5px;
        padding-bottom: 6px;
    }
    .ui-accordion a.selected
    {
        color: Highlight;
        font-size: 16px;
        font-weight: bolder;
    }
    .ui-accordion .ui-accordion-content
    {
        position: relative;
        display: none;
        height: auto;
    }
    .ui-accordion .ui-accordion-content-active
    {
        display: block;
    }
    .ui-icon
    {
        float: left;
        position: relative;
        margin-left: 15px;
        height: 25px;
        width: 25px;
    }
    .ui-icon-triangle-1-s
    {
        background: url('../../images/accor-open.gif');
    }
    .ui-icon-triangle-1-e
    {
        background: url('../../images/accor-close.gif'); 
    }
</style>
<script src="../../scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../../scripts/jquery.ui.core.js" type="text/javascript"></script>
<script src="../../scripts/jquery.ui.widget.js" type="text/javascript"></script>
<script src="../../scripts/jquery.ui.accordion.js" type="text/javascript"></script>
<script src="../../scripts/jquery-corner.js" type="text/javascript"></script>
<script type="text/javascript">

    var SelectChange = function (e, ui) {
        var id = "#" + $(ui.newContent).attr("id");
        var height = $(id).children("ul").children("li").length * 22;
        $("#" + $(ui.newContent).attr("id")).height(height);
    }

    $().ready(function () {
        $(".accor-title").corner();
        $("#accor-nav ul li").corner();
        $("#accor-nav").accordion({ change: SelectChange });

    });


    $().ready(function () {
        var url = location.href.toString();
    

        var pos = url.search(/item/);

        var num = 0;
        if (pos != -1)
        { num = url.slice(pos + 5); }


        $("#accor-nav").accordion("activate", num - 1);

    });
      
</script>
 
    <div id="webframe">
        <div id="master-left">
            <div id="accor-nav">
                <div id="accor-header1" class="accor-title">
                   
                    <a href="#">商品信息管理</a></div>
                <div id="accor-panel1" style="height:132px">
                    <ul  style="height:132px">
                        <li id="calcheight"><a href="../products/add_product.aspx">添加商品</a></li>
                        <li><a href="../products/all_products.aspx">所有商品</a></li>


                        <li><a href="../products/shortage_products.aspx?item=1">缺货商品</a></li>
                        <li><a href="../products/invertory_products.aspx?item=1">库存商品</a></li>
                        <li><a href="../products/sale_record.aspx?item=1">销售统计</a></li>
                        <li><a href="../products/all_suppliers.aspx?item=1">供应商信息</a></li>
                    </ul>
                </div>
                <div id="accor-header2" class="accor-title">
                    <a href="#">订单信息管理</a></div>
                <div id="accor-panel2">
                    <ul  >
                        <li><a href="../orders/untreated_orders.aspx?item=2">未发货订单</a></li>
                        <li><a href="../orders/shipped_orders.aspx?item=2">已发货订单</a></li>
                        <li><a href="../orders/completed_orders.aspx?item=2">已完成订单</a></li>
                    </ul>
                </div>
                <div id="accor-header3" class="accor-title">
                    <a href="#">注册用户管理</a></div>
                <div id="accor-panel3">
                    <ul  >
                        <li><a href="../users/user_list.aspx?item=3">会员管理</a></li>
                        <li><a href="../users/message_list.aspx?item=3">留言管理</a></li>
                        <li><a href="../users/previews_list.aspx?item=3">评论管理</a></li>
                    </ul>
                </div>
                <div id="accor-header4" class="accor-title">
                    <a href="#">消息管理</a></div>
                <div id="accor-panel4">
                    <ul  >
                        <li><a href="../notice/add_notice.aspx?item=4">添加新消息</a></li>
                        <li><a href="../notice/notice_management.aspx?item=4">管理消息</a></li>
                    </ul>
                </div>
                 <div id="Div1" class="accor-title">
                    <a href="#">其他</a></div>


                <div id="Div2">
                    <ul  >
                        <li><a href="../home/set.aspx?item=5">首页设置</a></li>
                        <li><a href="../other/admin_management.aspx?item=5">管理员管理</a></li>
                    </ul>
                </div>
            </div>
        </div>
       
    </div>
 

热点排行