AJAX¿Ø¼þʹÓý̳Ì
1. Accordion
¡¾¹¦ÄܸÅÊö¡¿Accordion¿ÉÒÔÈÃÄãÉè¼Æ¶à¸öpanel ²¢ÇÒÒ»´ÎÖ»ÏÔʾһ¸öPanel .ÔÚÒ³ÃæÉϵÄÏÔʾЧ¹û¾ÍÏñÊÇʹÓÃÁ˶à¸öCollapsiblePanelsÖ»²»¹ýÿһ´ÎÖ»Õ¹¿ªÆäÖÐÒ»¸ö CollapsiblePanel.Accordion¿Ø¼þÄÚ²¿°üº¬ÁËÈô¸É¸öAccordionPane£¬Ã¿Ò»¸öAccordionPaneµÄ templateÀï°üÀ¨ÁË¶ÔÆäHeaderºÍContentµÄ¶¨Òå¡£ÎÒÃÇ¿ÉÒÔÔÚºǫ́´úÂëÖÐͨ¹ýSelectedIndexÊôÐÔÈ¡µÃµ±Ç°Õ¹¿ªµÄÄÄÒ»¸ö Panel£¬»¹¿ÉÒÔ¿ØÖÆÄÄÒ»¸öPanelÕ¹¿ª¡£
¾³£¿ÉÒÔ¼ûµ½ÀàËÆµÄЧ¹û£¬±ÈÈçQQ¡¢MsnºÃÓÑ·ÖÀàµÄÕÛµþЧ¹û¡£
¡¾Ï¸½Ú¡¿
(1)²»Òª°ÑAccordion·ÅÔÚTableÖжøÓÖ°Ñ FadeTransitions ÉèÖÃΪTrue£¬Õ⽫ÒýÆð²¼¾Ö»ìÂÒ
(2) ÔÚAccordionPaneÄ£°åÖеÄContentÖпÉÒÔ¶¨ÒåÈκÎWebÔªËØ£¬±íÏֵľÍÏñÒ»¸öÈÝÆ÷
(3) AccordionPaneÄÚÈÝÄ£°å×Ô¶¯¸Ä±ä´óСÓÐÈýÖÖAutoSize modes £ºNone(ÍÆ¼ö) Limit Fill
(4) $find('ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender')ÕâÀïÕÒµ½µÄÊÇ Behavior.ʲôÊÇBehaviorÄØ£¿ÔÚAsp.net Ajax¿ò¼ÜÖаüº¬Ò»×鶯×÷²¢Íê³ÉÒ»¸ö¹¦ÄÜ. AccordionµÄÒ»¸öBehavior¾ÍÊǵÈëµ³ö.
ÕÒµ½BehaviorµÄÒýÓã¬behavior.set_FadeTransitions() behavior.get_FadeTransitions()µÄ·½Ê½À´ÊµÏÖ¾ßÌåijһ¸öBehaviorµÄ·ÃÎʺÍÐÞ¸Ä.
var behavior = $find('ctl00_SampleContent_MyAccordion_AccordionExtender');ÕâÖÖд·¨ÊDz»ºÃµÄ£¬ÎÒÃÇÔÚ×Ô¶¯²âÊÔµÄÒ³ÃæÖз¢ÏÖÁ˸üºÃµÄд·¨£º var behavior=$find("<%= MyAccordion.ClientID %>_AccordionExtender");
¡¾´úÂëʾÒâ¡¿
<mce:script language="javascript" type="text/javascript"><!--
function toggleFade()
{
var behavior = $find('ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender');
if (behavior)
{
behavior.set_FadeTransitions(!behavior.get_FadeTransitions());
}
}
function changeAutoSize()
{
var behavior = $find('ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender');
var ctrl = $get('autosize'); //ÕâÀïÕÒµÄÊÇÏÂÀÁÐ±í¿Ø¼þ,²»ÊÇBehavior
if (behavior)
{
var size = 'None'; // ÕâÀï˳±ã¿´¿´ÔõôʹÓÃSelect
switch (ctrl.selectedIndex) {
case 0 :
behavior.get_element().style.height = 'auto';
size = AjaxControlToolkit.AutoSize.None;
break;
case 1
Ïà¹ØÎĵµ£º
Ò».ÕªÒª
±¾ÏµÁÐÎÄÕ½«´øÄú½øÈëjQueryµÄ¾«²ÊÊÀ½ç, ÆäÖÐÓкܶà×÷Õß¾ßÌåµÄʹÓþÑéºÍ½â¾ö·½°¸,
¼´Ê¹Äã»áʹÓÃjQueryÒ²ÄÜÔÚÔĶÁÖз¢ÏÖЩÐíÃØ¼®.
±¾ÆªÎÄÕ½²½âÈçºÎʹÓÃjQuery·½±ã¿ì½ÝµÄʵÏÖAjax¹¦ÄÜ.ͳһËùÓпª·¢ÈËÔ±
ʹÓÃAjaxµÄ·½Ê½.
¶þ.ǰÑÔ
AjaxÈÃÓû§Ò³Ãæ·á¸»ÆðÀ´, ÔöÇ¿ÁËÓû§ÌåÑé.
ʹÓÃAjaxÊÇËùÓÐWeb¿ª·¢µÄ±Ø ......
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<mce:style type="text/css"><!--
.n{TEXT-DECORATION:none;cursor:pointer} a{color:black} a:hover{color:blue}
.m{TEXT-DECORATION:none;c ......
ÈçºÎÔÚ¿Í»§¶ËÖ±½Óµ÷ÓÃWebServiceÖеķ½·¨£¿
ÕâÀï½áºÏ¾Ñé×Ô¼ºÐ´Ò»Ð´
1.Ê×ÏÈн¨Ò»¸ö ASP.NET AJAX-Enabled Web Site,ÕâÑùϵͳΪÎÒÃÇ×Ô¶¯ÅäÖúÃÁË»·¾³£¬ÕâÖ÷ÒªÌåÏÖÔÚWeb.configÕâ¸öÎļþÉÏ£¬Èç¹ûÒÑÓÐÍøÕ¾²»ÊÇASP.NET AJAX-Enabled Web SiteÒ²¿ÉÒÔ¶ÔÕÕÐÞ¸ÄÏÂWeb.config£¬Ò²¿ÉÒÔ´ïµ½ÏàͬµÄЧ¹û¡£
2.н¨Ò»¸öweb·þÎñ£¬WebSer ......
jQuery µ×²ã AJAX ʵÏÖ¡£¼òµ¥Ò×Óõĸ߲ãʵÏÖ¼û $.get, $.post µÈ¡£$.ajax() ·µ»ØÆä´´½¨µÄ XMLHttpRequest ¶ÔÏó¡£´ó¶àÊýÇé¿öÏÂÄãÎÞÐèÖ±½Ó²Ù×÷¸Ã¶ÔÏ󣬵«ÌØÊâÇé¿öÏ¿ÉÓÃÓÚÊÖ¶¯ÖÕÖ¹ÇëÇó¡£
×¢Ò⣺ Èç¹ûÄãÖ¸¶¨ÁË dataType Ñ¡ÏÇëÈ·±£·þÎñÆ÷·µ»ØÕýÈ·µÄ MIME ÐÅÏ¢£¬(Èç xml ·µ»Ø "text/xml")¡£´íÎóµÄ MIME ÀàÐÍ¿ÉÄܵ¼Ö²»¿ÉÔ¤Ö ......
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/ ......