Ajax 学习 二 Accordion和AccordionPane 淡入淡出效果和AutoSize自动尺寸

Ajax 学习 二 Accordion和AccordionPane 淡入淡出效果和AutoSize自动尺寸

 源代码

View Code

<% @ Page Language = " C# " AutoEventWireup = " true " CodeBehind = " WebForm2.aspx.cs " Inherits = " AjaxExample.WebForm2 " %>

<% @ Register Assembly = " AjaxControlToolkit " Namespace = " AjaxControlToolkit " TagPrefix = " ajaxToolkit111 " %>
<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head runat = " server " >
< title ></ title >
< link href = " StyleSheet.css " rel = " stylesheet " type = " text/css " />
</ head >
< body >
< form id = " form1 " runat = " server " >
< div class = " demoarea " >
< ajaxToolkit111:ToolkitScriptManager ID = " s " runat = " server " >
</ ajaxToolkit111:ToolkitScriptManager >
< ajaxToolkit111:Accordion ID = " MyAccordion " runat = " server " SelectedIndex = " 0 " HeaderCssClass = " accordionHeader "
ContentCssClass = " accordionContent " FadeTransitions = " false " FramesPerSecond = " 40 "
TransitionDuration = " 250 " AutoSize = " None " RequireOpenedPane = " false " SuppressHeaderPostbacks = " true " >
< Panes >
< ajaxToolkit111:AccordionPane ID = " AccordionPane1 " runat = " server " >
< Header >
静夜思（老李） </ Header >
< Content >
窗前明月光
< p >
& nbsp; </ p >
疑是地上霜
< p >
& nbsp; </ p >
举头望明月
< p >
& nbsp; </ p >
低头思故乡
</ Content >
</ ajaxToolkit111:AccordionPane >
< ajaxToolkit111:AccordionPane ID = " AccordionPane2 " runat = " server " >
< Header >
< a href = "" class = " accordionLink " > 卜算子 </ a ></ Header >
< Content >
驿外断桥边
< p >
& nbsp; </ p >
寂寞开无主
< p >
& nbsp; </ p >
已是黄昏独自愁
< p >
& nbsp; </ p >
更著风和雨
< p >
& nbsp; </ p >
无意苦争春
< p >
& nbsp; </ p >
一任群芳妒
< p >
& nbsp; </ p >
零落成泥碾作尘
< p >
& nbsp; </ p >
只有香如故。
</ Content >
</ ajaxToolkit111:AccordionPane >
< ajaxToolkit111:AccordionPane ID = " p3 " runat = " server " >
< Header >
钗头凤——陆游
</ Header >
< Content >
红酥手，黄藤酒，满城春色宫墙柳。东风恶，欢情薄，一杯愁绪，几年离索。错！错！错！ 春如旧，人空瘦，泪痕红悒鲛绡透。桃花落，闲池阁，山盟虽在，锦书难托。莫，莫，莫！
</ Content >
</ ajaxToolkit111:AccordionPane >
</ Panes >
</ ajaxToolkit111:Accordion >
< br />
淡入淡出效果
</ div >
</ form >
</ body >
</ html >

 

客户端代码（查看源文件）

View Code

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >< title >

</ title >< link href ="StyleSheet.css" rel ="stylesheet" type ="text/css" /></ head >
< body >
< form name ="form1" method ="post" action ="WebForm2.aspx" id ="form1" >
< div >
< input type ="hidden" name ="s_HiddenField" id ="s_HiddenField" value ="" />
< input type ="hidden" name ="__EVENTTARGET" id ="__EVENTTARGET" value ="" />
< input type ="hidden" name ="__EVENTARGUMENT" id ="__EVENTARGUMENT" value ="" />
< input type ="hidden" name ="__VIEWSTATE" id ="__VIEWSTATE" value ="/wEPDwUJNTY4ODMzMzcyD2QWAgIDD2QWAgIDD2QWBgIBD2QWBGYPDxYEHghDc3NDbGFzcwUPYWNjb3JkaW9uSGVhZGVyHgRfIVNCAgJkZAIBDw8WBB8ABRBhY2NvcmRpb25Db250ZW50HwECAhYCHgVzdHlsZQUOZGlzcGxheTpibG9jaztkAgIPZBYEZg8PFgQfAAUPYWNjb3JkaW9uSGVhZGVyHwECAmRkAgEPDxYEHwAFEGFjY29yZGlvbkNvbnRlbnQfAQICFgIfAgUNZGlzcGxheTpub25lO2QCAw9kFgRmDw8WBB8ABQ9hY2NvcmRpb25IZWFkZXIfAQICZGQCAQ8PFgQfAAUQYWNjb3JkaW9uQ29udGVudB8BAgIWAh8CBQ1kaXNwbGF5Om5vbmU7ZGQ2YELe57yaLcdD2ZqehM7tOxmJOQ==" />
</ div >

< script type ="text/javascript" >
// <![CDATA[
var theForm = document.forms[ ' form1 ' ];
if ( ! theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if ( ! theForm.onsubmit || (theForm.onsubmit() != false )) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
// ]]>
</ script >


< script src ="/WebResource.axd?d=Lks_bXsd8y6xJuqvWKG0aQ2&amp;t=633802945995006876" type ="text/javascript" ></ script >


< script src ="/ScriptResource.axd?d=myf7fFSXsM1e7LDp80Yz_8DNj4T-rzHpPW30apU3pfV8D9G9eHDLeUvVWjXiTN120&amp;t=11e661zh-CHS.js" type ="text/javascript" ></ script >
< script type ="text/javascript" >
// <![CDATA[
if ( typeof (Sys) === ' undefined ' ) throw new Error( ' ASP.NET Ajax 客户端框架未能加载。 ' );
// ]]>
</ script >

< script src ="/ScriptResource.axd?d=myf7fFSXsM1e7LDp80Yz_8DNj4T-rzHpPW30apU3pfW3tRwdGBdQPwnrLxrMYRK1J31aXyj0LjtR0HUZhTeatw2&amp;t=11e661zh-CHS.js" type ="text/javascript" ></ script >
< script src ="/WebForm2.aspx?_TSM_HiddenField_=s_HiddenField&amp;_TSM_CombinedScripts_=%3b%3bAjaxControlToolkit%2c+Version%3d3.5.40412.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d28f01b0e84b6d53e%3azh-CN%3a1547e793-5b7e-48fe-8490-03a375b13a33%3af2c8e708%3ade1feab2%3a720a52bf%3af9cec9bc%3a7311d143" type ="text/javascript" ></ script >
< div >

< input type ="hidden" name ="__EVENTVALIDATION" id ="__EVENTVALIDATION" value ="/wEWAgL1kMT7BwKA6Of6Bau5l69lZlRuNAD6ZZAWUP6EO68X" />
</ div >
< div class ="demoarea" >
< script type ="text/javascript" >
// <![CDATA[
Sys.WebForms.PageRequestManager._initialize( ' s ' , document.getElementById( ' form1 ' ));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90 );
// ]]>
</ script >

< div id ="MyAccordion" >
< input type ="hidden" name ="MyAccordion_AccordionExtender_ClientState" id ="MyAccordion_AccordionExtender_ClientState" value ="0" />< div id ="AccordionPane1_header" class ="accordionHeader" >

静夜思（老李）
</ div >< div id ="AccordionPane1_content" class ="accordionContent" style ="display:block;" >

窗前明月光
< p >
&nbsp; </ p >
疑是地上霜
< p >
&nbsp; </ p >
举头望明月
< p >
&nbsp; </ p >
低头思故乡

</ div >< div id ="AccordionPane2_header" class ="accordionHeader" >

< a href ="" class ="accordionLink" > 卜算子 </ a >
</ div >< div id ="AccordionPane2_content" class ="accordionContent" style ="display:none;" >

驿外断桥边
< p >
&nbsp; </ p >
寂寞开无主
< p >
&nbsp; </ p >
已是黄昏独自愁
< p >
&nbsp; </ p >
更著风和雨
< p >
&nbsp; </ p >
无意苦争春
< p >
&nbsp; </ p >
一任群芳妒
< p >
&nbsp; </ p >
零落成泥碾作尘
< p >
&nbsp; </ p >
只有香如故。

</ div >< div id ="p3_header" class ="accordionHeader" >

钗头凤——陆游

</ div >< div id ="p3_content" class ="accordionContent" style ="display:none;" >

红酥手，黄藤酒，满城春色宫墙柳。东风恶，欢情薄，一杯愁绪，几年离索。错！错！错！ 春如旧，人空瘦，泪痕红悒鲛绡透。桃花落，闲池阁，山盟虽在，锦书难托。莫，莫，莫！

</ div >
</ div >
< br />
淡入淡出效果
</ div >


< script type ="text/javascript" >
// <![CDATA[
( function () { var fn = function () {$get( " s_HiddenField " ).value = '' ;Sys.Application.remove_init(fn);};Sys.Application.add_init(fn);})();Sys.Application.initialize();
Sys.Application.add_init( function () {
$create(Sys.Extended.UI.AccordionBehavior, { " ClientStateFieldID " : " MyAccordion_AccordionExtender_ClientState " , " FramesPerSecond " : 40 , " HeaderCssClass " : " accordionHeader " , " id " : " MyAccordion_AccordionExtender " , " requireOpenedPane " : false , " suppressHeaderPostbacks " : true }, null , null , $get( " MyAccordion " ));
});
// ]]>
</ script >
</ form >
</ body >
</ html >

来分析下客户端的代码和以往的客户端HTML有什么不同的地方？

posted on 2011-02-16 21:21  人的本质是什么？ 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/PirateCaptain/articles/1956436.html