侧边导航(高级搜索)应用到 $("xxxxx").click(function () {}点击某控件是触发的方法,

前台代码:

    <div id="advSearch">
        <div class="advSearch_cont">
            <a href="javascript:return false;" class="bar"></a>
            <table style="width: 240px;">
                <tr>
                    <td width="40%" class="t_r">
                        单位:
                    </td>
                    <td width="60%">
                        <asp:TextBox ID="txt_UNIT" Width="128" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td class="t_r">
                        单价:
                    </td>
                    <td>
                        <asp:TextBox ID="txt_minPRICE" Width="60" CssClass="validate[required,custom[onlyNumberWide]]"
                            runat="server"></asp:TextBox>-<asp:TextBox ID="txt_maxPRICE" Width="60" CssClass="validate[required,custom[onlyNumberWide]]"
                                runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td class="t_r">
                        所属费用类别:
                    </td>
                    <td>
                        <asp:TextBox ID="txt_CLASS_ID" Width="128" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <hr />
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align: center;">
                        <asp:Button ID="btn_advSearch" Text="高级搜索" runat="server" OnClick="btn_advSearch_Click" />
                    </td>
                </tr>
            </table>
        </div>
    </div>


样式:

/*高级搜索*/
#advSearch{position:absolute;top:70px;right:3px;border:1px solid #ccc; z-index:1000;}
#advSearch .advSearch_cont{padding:10px 0px;background-color:#B3DBF5;}
#advSearch table{border:0px;display:none;}
#advSearch table .t_r { text-align:right;}
#advSearch .bar{width:25px;height:105px;position:absolute;left:-25px;top:-1px;background:url(mini_bg.PNG) -25px 0px no-repeat;display:block;}


JS:

//高级搜索脚本
$(function () {
    var expanded = true;
    $("#advSearch .bar").click(function () {
        if (expanded) {
            $("#advSearch table").show();
            $("#advSearch .bar").css('background-position', '-0px 0px');
        } else {
            $("#advSearch table").fadeOut(300);   //fadeOut() 方法逐渐改变被选元素的不透明度,从可见到隐藏(褪色效果)。
            $("#advSearch .bar").css('background-position', '-25px 0px');
        }
        expanded = !expanded;
    });
});

阅读更多
个人分类: 常用小功能
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭