这么多年的asp.net ajaxToolkit 总结

本文介绍了 ASP.NET AJAX 控件的使用方法,包括下滑和上拉窗口、时间选择器、输入框输入限制以及导航栏的实现。通过这些控件可以增强 Web 应用程序的交互性和用户体验。

1.下滑和上拉窗口
    <div class="tvcLabelFrame">
        <ajaxToolkit:CollapsiblePanelExtender ID="cpeDemo" runat="Server"         TargetControlID="tvcLabelContentP2"
        ExpandControlID="tvcLabelHeadP1"
        CollapseControlID="tvcLabelHeadP1"
        Collapsed="False"
        SuppressPostBack="true"
        SkinID="CollapsiblePanelDemo" />
        <asp:Panel ID="tvcLabelHeadP1" runat="server">
       
            <div id="tvcLabelHead1" class="tvcLabelHead">
                    共有标注<asp:Label ID="tvcLabelHeadlb" CssClass="tvcLabelColor" runat="server" Text="2"></asp:Label>条
            </div>
       
        </asp:Panel>
        <asp:Panel ID="tvcLabelContentP2" runat="server">
        <div class ="tvcLabelContent">
            <div class="tvcLabelTitle">
                <asp:Label ID="tvcLabelTitlelb" runat="server" Text="标注的表提为发明专利"></asp:Label>
            </div>
            <div class ="tvcLabelCon">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <asp:Label ID="tvcLabelConlb" runat="server" Text="叶轮出口直接为多少呢?想知道等有了具体数据后就可以很清楚的知道了,叶轮出口直接为多少呢?想        知道等有了具体数据后就可以很清楚的知道了。。。。。"></asp:Label>
            </div>
            <div class ="tvcLabelTime">
                <asp:Label ID="tvcLabelTimelb" runat="server" Text="时间:2009/9/1 18:55"></asp:Label>
            </div>
            <div class ="tvcLabelLine">
             
            </div>
            <div class="tvcLabelTitle">
                <asp:Label ID="Label1" runat="server" Text="标注的表提为发明专利"></asp:Label>
            </div>
            <div class ="tvcLabelCon">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <asp:Label ID="Label2" runat="server" Text="叶轮出口直接为多少呢?想知道等有了具体数据后就可以很清楚的知道了,叶轮出口直接为多少呢?想知道等        有了具体数据后就可以很清楚的知道了。。。。。"></asp:Label>
            </div>
            <div class ="tvcLabelTime">
                <asp:Label ID="Label3" runat="server" Text="时间:2009/9/1 18:55"></asp:Label>
            </div>
            <div class ="tvcLabelFengPage">
            </div>
         </div>
         </asp:Panel>
    </div>

2.时间
      <ajaxToolkit:CalendarExtender ID="PublishTime" runat="server" TargetControlID="tbPublishTime" Format="yyyy/MM/dd">
      </ajaxToolkit:CalendarExtender>
3.对输入框进行输入限制
    FilteredTextBoxExtender的一些属性:
    1, TargetControlID:用来设置要控制的文本框。
    2, FilterType:设置被过滤的类型,提供如下四种:
    Custom:如果选择这个选项,就可以在另外的一个属性中自定义不被过滤的字符
    Numbers:让关联的文本框只能输入数字。
    UppercaseLetters:让关联的文本框只能输入大写字母。
    LowercaseLetters:让关联的文本框只能输入小写字母。
    3,ValidChars:当FilterType设置为Custom时,用来设置有效的字符。
    如:只 想输入数字的时候,可以自己设置filterType的值为:1234567890
    比起自己过滤方便了很多,但是局限性很明显,太不自由,希望下个版本更强大 可以加如正则表达式验证的属性,可以更方便的验证更多的内容 ,看上去我 太懒了 ,很依赖别人写好的东西,
    具体使用方法就不写了:这里只贴出来点关键代码:
    <asp:TextBox ID="TextBox4" runat="server" Width="378px"></asp:TextBox><br />
    <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" TargetControlID="TextBox4"
    ValidChars="012345689."><!--我在这里设置了ValidChars的值,值能输入数字和点,目的是限制是能输入小数点和数字,回头自己加个数字验证,就很方便的实现了数字的验证-->
    </cc1:FilteredTextBoxExtender>
    有机会自己多多研究下,扩展点更多的属性,不过对于一个刚入门儿的程序员,路还长。。。
    希望这一天尽快到来。。加油~~
4.导航栏
  <div class="ncUserCenterBack">
    <div class="ncUserCenterHead"></div>
    <ajaxToolkit:Accordion ID="PatentAccordion" runat="Server" SelectedIndex="0"
    HeaderCssClass="ncAccordionHeaderDef" HeaderSelectedCssClass="ncAccordionHeaderSelected"
    AutoSize="None" FadeTransitions="true" TransitionDuration="250" FramesPerSecond="30" RequireOpenedPane="false" SuppressHeaderPostbacks="false">
    <Panes>
        <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
            <Header>个人信息</Header>
            <Content>
                <div id="DivContentList1" class="ncAccordionContentListDef1" style="margin-top:10px;" onclick="ContentListClick(1);document.getElementById('iframePContent').src='UserCenterModule/UserSelfModify.aspx';">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="ncAccordionContentListPTd1">
                                <div class="ncAccordionContentListIcon"></div>
                            </td>
                            <td class="ncAccordionContentListPTd2">编辑我的资料</td>
                        </tr>
                    </table>
                </div>
                <div id="DivContentList2" class="ncAccordionContentListDef1" onclick="ContentListClick(2);document.getElementById('iframePContent').src='UserCenterModule/PassportModify.aspx';">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="ncAccordionContentListPTd1">
                                <div class="ncAccordionContentListIcon"></div>
                            </td>
                            <td class="ncAccordionContentListPTd2">修改密码</td>
                        </tr>
                    </table>
                </div>
            </Content>
        </ajaxToolkit:AccordionPane> 
         <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
            <Header>用户管理</Header>
            <Content>
                <div id="DivContentList3" class="ncAccordionContentListDef2" style="margin-top:10px;" onclick="ContentListClick(3);document.getElementById('iframePContent').src='UserCenterModule/PrivilegeTemplateManage.aspx';">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="ncAccordionContentListPTd1">
                                <div class="ncAccordionContentListIcon"></div>
                            </td>
                            <td class="ncAccordionContentListPTd2">权限模板管理</td>
                        </tr>
                    </table>
                </div>
                <div id="DivContentList4" class="ncAccordionContentListDef2" onclick="ContentListClick(4);document.getElementById('iframePContent').src='UserCenterModule/UserList.aspx';">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="ncAccordionContentListPTd1">
                                <div class="ncAccordionContentListIcon"></div>
                            </td>
                            <td class="ncAccordionContentListPTd2">用户信息管理</td>
                        </tr>
                    </table>
                </div>
                <div id="DivContentList5" class="ncAccordionContentListDef2" onclick="ContentListClick(5);document.getElementById('iframePContent').src='UserCenterModule/GroupManage.aspx';">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="ncAccordionContentListPTd1">
                                <div class="ncAccordionContentListIcon"></div>
                            </td>
                            <td class="ncAccordionContentListPTd2">用户组管理</td>
                        </tr>
                    </table>
                </div>
                <div id="DivContentList6" class="ncAccordionContentListDef2" onclick="ContentListClick(6);document.getElementById('iframePContent').src='UserCenterModule/UserRecordList.aspx';">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="ncAccordionContentListPTd1">
                                <div class="ncAccordionContentListIcon"></div>
                            </td>
                            <td class="ncAccordionContentListPTd2">用户访问记录管理</td>
                        </tr>
                    </table>
                </div>
            </Content>
        </ajaxToolkit:AccordionPane>
        <ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server" >
            <Header><%--<div onclick="document.getElementById('iframePContent').src='UserCenterModule/StatisticsResult.aspx';">我的统计结果</div>--%>
                <div id="DivCollectionget"></div>
                <asp:Button ID="btSResult" runat="server" Text="我的统计结果" CssClass="ncBtSResult" OnClick="btSResult_OnClick" />
                <asp:Label ID="lblSResult" runat="server" style="display:none;">0</asp:Label>
            </Header>
        </ajaxToolkit:AccordionPane>
        <ajaxToolkit:AccordionPane ID="AccordionPane4" runat="server" >
            <Header><div onclick="document.getElementById('iframePContent').src='UserCenterModule/MyPSignList.aspx';">专利标注/翻译</div></Header>
        </ajaxToolkit:AccordionPane>    
         <ajaxToolkit:AccordionPane ID="AccordionPane5" runat="server" >
            <Header>我的文献信息</Header>
            <Content>
                <div id="DivContentList7" class="ncAccordionContentListDef1" style="margin-top:10px;" onclick="ContentListClick(7);document.getElementById('iframePContent').src='UserCenterModule/MonographInfo.aspx';">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="ncAccordionContentListPTd1">
                                <div class="ncAccordionContentListIcon"></div>
                            </td>
                            <td class="ncAccordionContentListPTd2">专著文献</td>
                        </tr>
                    </table>
                </div>
                <div id="DivContentList8" class="ncAccordionContentListDef1" onclick="ContentListClick(8);document.getElementById('iframePContent').src='UserCenterModule/PeriodicalInfo.aspx';">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="ncAccordionContentListPTd1">
                                <div class="ncAccordionContentListIcon"></div>
                            </td>
                            <td class="ncAccordionContentListPTd2">期刊文献</td>
                        </tr>
                    </table>
                </div>
                <div id="DivContentList9" class="ncAccordionContentListDef1" onclick="ContentListClick(9);document.getElementById('iframePContent').src='UserCenterModule/MeetingInfo.aspx';">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="ncAccordionContentListPTd1">
                                <div class="ncAccordionContentListIcon"></div>
                            </td>
                            <td class="ncAccordionContentListPTd2">会议文献</td>
                        </tr>
                    </table>
                </div>
                <div id="DivContentList10" class="ncAccordionContentListDef1" onclick="ContentListClick(10);document.getElementById('iframePContent').src='UserCenterModule/Topicsinfo.aspx';">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="ncAccordionContentListPTd1">
                                <div class="ncAccordionContentListIcon"></div>
                            </td>
                            <td class="ncAccordionContentListPTd2">课题组发表文献</td>
                        </tr>
                    </table>
                </div>
                <div id="DivContentList11" class="ncAccordionContentListDef1" onclick="ContentListClick(11);document.getElementById('iframePContent').src='UserCenterModule/ExpertInfo.aspx';">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="ncAccordionContentListPTd1">
                                <div class="ncAccordionContentListIcon"></div>
                            </td>
                            <td class="ncAccordionContentListPTd2">专家学者文献</td>
                        </tr>
                    </table>
                </div>
            </Content>
        </ajaxToolkit:AccordionPane>
        <ajaxToolkit:AccordionPane ID="AccordionPane6" runat="server" >
            <Header><div onclick="document.getElementById('iframePContent').src='UserCenterModule/MyDSignList.aspx';">我的文献标注</div></Header>
        </ajaxToolkit:AccordionPane>
        <ajaxToolkit:AccordionPane ID="AccordionPane7" runat="server" >
            <Header><div onclick="document.getElementById('iframePContent').src='UserCenterModule/PersonalTaskList.aspx';">任务管理</div></Header>
        </ajaxToolkit:AccordionPane>
    </Panes>           
    </ajaxToolkit:Accordion>
    </div>

5.  弹出层

    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" TargetControlID="lbtnRWZP" PopupControlID="plRWZP" CancelControlID="btnExCancel"           Drag="true"
            runat="server" DropShadow="false" RepositionMode="RepositionOnWindowResizeAndScroll" BackgroundCssClass="srcExtendermodalBackground"                      PopupDragHandleControlID="plRWZPHandle">
    </ajaxToolkit:ModalPopupExtender>

    <asp:Panel ID="plRWZP" runat="server"  CssClass="srcRWZPExtendermodalPopup" Style="display:none;">

    <div style="font-size:12px;">
        <asp:Panel ID="plRWZPHandle" runat="server">
            <div style="width:424; height:27px; cursor:move; background:url('../App_Themes/HgSysSite/PatentModule/Images/Default/srcExtenderHead.jpg') no-repeat; padding-right:30px; _padding-right:15px;" >
                <div style="width:40px; width:18px; float:right;">
                    <asp:Button ID="btnExCancel" runat="server" style="width:40px; height:18px; background:url('../App_Themes/HgSysSite/PatentModule/Images/Default/srcExCancelButton.jpg') no-repeat; border-style:none;"/>
                </div>
                <div style="clear:right; height:-1px;"></div>
            </div>
        </asp:Panel>
       
       
        <div style="width:372px; height:332px; border:solid 1px #cfcfcf; padding:12px 30px 0px 20px; _padding:12px 10px 0px 10px;">
            <div style="height:20px; line-height:20px;">
                <div style="float:left;">用 户 组:</div>
                <div style="width:302px; height:20px; margin-left:10px; float:left;">
                    <asp:DropDownList ID="ddlExUserGroup" runat="server" style="width:302px; height:20px;"></asp:DropDownList>
                </div>
                <div style="clear:left; height:-1px;"></div>
            </div>
            <div style="width:402px; height:182px; margin-top:10px;">
                <div style="height:182px; float:left;">用  户:</div>
                <div style="width:300px; height:180px; margin-left:10px; float:left; overflow-y:scroll; border:solid 1px #cfcfcf; background-color:#fff;">
                    <div style="width:265px; height:300px;"></div>
                </div>
                <div style="clear:left; height:-1px;"></div>
            </div>
            <div style="width:402px; height:64px; margin-top:10px;">
                <div style="height:64px; float:left; margin-right:10px;">要  求:</div>
                <div style="width:302px; height:64px; float:left;">
                    <asp:TextBox ID="tbExRequest" runat="server" style="width:296px; height:60px;"></asp:TextBox>
                </div>
                <div style="clear:left; height:-1px;"></div>
            </div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Button ID="btnExOK" runat="server" OnClick="btnExOK_OnClick" style="width:63px; height:25px; margin-left:75px; margin-top:12px; background:url('../App_Themes/HgSysSite/PatentModule/Images/Default/srcbtnExOK.jpg') no-repeat; border-style:none;" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
       
       
        <%--<asp:HiddenField ID="HiddenField1" runat="server" />--%>
        <%--<asp:Panel ID="Panel1" runat="server" CssClass="srcExtendermodalPopupbar">
        </asp:Panel>--%>
    </div>
   
</asp:Panel>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值