Asp.net Ajax Control Toolkit设计编程备忘录（色眼窥观版）——第6回(习惯专辑）

色即设——设计，从网页设计师的角度出发。因为自己的的特殊性（本身是软件工程师，但是对网页设计却有浓厚的兴趣），所以我的此系列文章不仅仅从编程角度出发，还将从设计的角度出发来细数AjaxControlToolkit系列控件，告诉你这些控件最终的结构表现形式、样式，还有如何修改他们的样式使之适合于你的网页整体规划。
窥，小视也——《说文》，此小视非必小视呀。此小视的意思是：水平有限，不能望其全貌，仅能管中窥豹。所以很多地方还请高人指点则个。

相关链接：
Asp.net Ajax Control Toolkit设计编程备忘录（色眼窥观版）——第1回(柿子专辑)
Asp.net Ajax Control Toolkit设计编程备忘录（色眼窥观版）——第2回(F4专辑)
Asp.net Ajax Control Toolkit设计编程备忘录（色眼窥观版）——第3回(UE专辑)
Asp.net Ajax Control Toolkit设计编程备忘录（色眼窥观版）——第4回(忍者专辑)
Asp.net Ajax Control Toolkit设计编程备忘录（色眼窥观版）——第5回(错不了专辑)
Asp.net Ajax Control Toolkit设计编程备忘录（色眼窥观版）——第6回(习惯专辑）

正文：

用户体验很重要的一部分就是符合用户的使用习惯，所谓“习惯即享受”，讲的就是这个意思。虽然B/S模式项目有很多方面优秀于C/S模式项目，但是我们不得不承认，C/S模式项目在响应、用户操作习惯等方面绝对是B/S模式项目不能及的。很多用户的操作习惯都是由电脑操作系统、应用程序软件培养出来的，例如：双击、拖动、快捷键。这些用户习惯就目前的B/S项目而言，基本没有被继承下来。老是有人抱怨某某网站操作起来很别扭，很不习惯。的确，因为B/S模式项目的特殊性，很多用户习惯很难被继承。但是随着ajax的出现已经网络速度的提升，一些由电脑操作系统、应用程序软件培养出来的用户操作习惯已经可以被实现或模拟。如何让浏览者更习惯地操作B/S模式项目将是我们今天的话题。

16：Accordion
如果你的网站的用户群体是极具网络消费能力和好奇心的青少年的话，那么你一定要注意一下这个控件。因为我们利用它可以实现QQ的那种折叠功能。这种折叠不仅仅是能够节省空间那么简单，更重要的是：新颖、而且完全符合QQ用户群体的操作习惯。能够让青少年感到操作的亲切和方便，从而提高用户的体验度。
好处就说到这里，下面先列出它的属性参数：

• SelectedIndex - The AccordionPane to be initially visible 【默认展开的Panes的索引】
• HeaderCssClass - Name of the CSS class to use for the headers. This can be either applied to the Accordion as a default for all AccordionPanes, or an individual AccordionPane.【Panes头部的样式表】
• ContentCssClass - Name of the CSS class to use for the content. This can be either applied to the Accordion as a default for all AccordionPanes, or an individual AccordionPane.【Panes内容的样式表】
• FadeTransitions - True to use the fading transition effect, false for standard transitions.【是否允许透明过渡效果】
• TransitionDuration - Number of milliseconds to animate the transitions【透明过渡动画的延时（单位毫秒）】
• FramesPerSecond - Number of frames per second used in the transition animations【Panes切换动画的延时】
• AutoSize - Restrict the growth of the Accordion. The values of the AutoSize enumeration are described above【自适用尺寸类型】.
• Panes - Collection of AccordionPane controls【AccordionPane里面包含的Panes】
• HeaderTemplate - The Header template contains the markup that should be used for an pane's header when databinding【头模板】
• ContentTemplate - The Content template contains the markup that should be used for a pane's content when databinding【内容模板】
• DataSource - The data source to use. DataBind() must be called.【如果绑定数据源的话，这里是数据源】
• DataSourceID - The ID of the data source to use.【数据源ID】
• DataMember - The member to bind to when using a DataSourceID【数据成员】

这个ajax控件有点特殊，它和其他的不同，它没有目标控件，它不依附于其他原有的服务器端控件，它更像是一种独立的全新的控件。但是Accordion必须配合AccordionPane使用，因为AccordionPane才是用来呈现内容的容器。一个最简单的结构如下：
 

< cc1:ToolkitScriptManager  ID ="ToolkitScriptManager1"  runat ="server" >
</ cc1:ToolkitScriptManager >

< cc1:Accordion  ID ="Accordion1"  runat ="server" >
     < Panes >         
     < cc1:AccordionPane  ID ="AccordionPane1"  runat ="server" >        
         < Header ></ Header >
         < Content ></ Content >                  
     </ cc1:AccordionPane >     
    
     < cc1:AccordionPane  ID ="AccordionPane2"  runat ="server" >                 
         < Header ></ Header >
         < Content ></ Content >
     </ cc1:AccordionPane >
     </ Panes >
</ cc1:Accordion >

Accordion里面是Panes，Panes里面放N个AccordionPane，每个AccordionPane里面包含Header部分和Content部分。提供的三个cssClass属性，通过设置就可以随心的达到效果。模拟一下QQ，见左图。

17：Tabs
在windows操作系统中tab标签可以说是随处可见，所以在你的网页中使用这个一般不会受到用户的反对，因为这个是符合他们的使用习惯的。这个控件和Accordion控件真的很像。它也是没有目标控件的独立控件，它也由多个部分组成的：一个是TabContainer，一个是TabPanel。关系如同Accordion和AccordionPane的关系。我们先来看属性。
它由两个部分构成，所以两部分分别拥有自己的属性：

TabContainer Properties

• ActiveTabChanged (Event) - Fired on the server side when a tab is changed after a postback【当tab变化发生回传后触发的服务器端事件】
• OnClientActiveTabChanged - The name of a javascript function to attach to the client-side tabChanged event【任何tab变化时触发的客户端脚本函数】
• CssClass - A css class override used to define a custom look and feel for the tabs【样式表】
• ActiveTabIndex - The first tab to show【默认展开的tab索引】
• Height - sets the height of the body of the tabs (does not include the TabPanel headers)【高】
• Width - sets the width of the body of the tabs【宽】
• ScrollBars - Whether to display scrollbars (None, Horizontal, Vertical, Both, Auto) in the body of the TabContainer【滚动条的展示方式】

TabPanel Properties

• Enabled - Whether to display the Tab for the TabPanel by default. This can be changed on the client.【此tab是否可用】
• OnClientClick - The name of a javascript function to attach to the client-side click event of the tab.【此tab发生变化时触发的客户端脚本函数】
• HeaderText - The text to display in the Tab【头文言】
• HeaderTemplate - A TemplateInstance.Single ITemplate to use to render the header【头模板】
• ContentTemplate - A TemplateInstance.Single ITemplate to use to render the body【内容模板】

 我想对TabContainer 的CssClass属性说明一下，如果没有必要就不要设置这个了，因为新设置的不会继承以前的样式，会把以前的样式冲掉。所以自己再重新设置cssClass的代价比较高。
我们这次的项目很多的地方用到了tab，当你的页面非常巨大的时候，你会发现tab会把它们整理的很清爽。但是因为客户拒绝使用所有的ajax，所以下面图片中tab的效果都是我通过javascript实现的(实现方法可以参考： css+javascript模拟OneNote2007Tab标签)。至于为什么客户会拒绝使用ajax，理由在这里说显的有点无奈——“不习惯!”（当时是对一个页面中使用了HoverMenu控件时的回答）


18：DragPanel
在B/S还没有盛行之前大家都在使用C/S模式的系统（现在也在使用，不过B/S模式的系统有了长足的长进而已），所以进入B/S模式盛行的时代以后，很多人仍然希望在B/S系统中继承C/S模式中的操作习惯。拖动，无疑就是C/S模式中最常使用的操作。如何在B/S模式中设计拖动？iGoogle给了我们启发和冲击。自由的安排和排版自己的个性页面。在这个个性张扬的时代，的确很具有吸引力。而ajax的DragPanel控件能够方便的实现此效果（不过，我在测试的过程中发现这个鬼东西好像比较容易出现拖动后定位不准的问题）。
先说属性，很少，而且明了：

• TargetControlID - The ID of a Panel to make draggable.【目标panel控件】
• DragHandleID - The ID of a control that will serve as the "drag handle" for the panel. When the user clicks and drags this control, the panel will move.【拖动句柄panel】

这个要稍微的说明一下，目标控件，必须是拖动句柄panel的父容器，也就是说目标panel包含句柄panel，用于存放内容的panel与句柄panel平级。一个最简单的示例结构如下：

< asp:Panel  ID ="Panel6"  runat ="server" >
     < asp:Panel  ID ="Panel7"  runat ="server" >
         < div  class ="dragMe" > Drag Me </ div >
     </ asp:Panel >
     < asp:Panel   ID ="Panel8"  runat ="server" >
         < div >
         < p > This panel will reset its position on a postback or page refresh. </ p >
         </ div >
     </ asp:Panel >
</ asp:Panel >             
            
< cc1:DragPanelExtender  ID ="DragPanelExtender1"  runat ="server"  TargetControlID ="Panel6"  DragHandleID ="Panel7" >  
</ cc1:DragPanelExtender >    

回答一个你最可能遇到的问题。“为什么拖是可以拖，但是拖后不能定住，却有跑回原位置了？”
解决办法：添加下段脚本在DragPanel控件之后即可。

< script  type ="text/javascript" >
         function  setOrientation()
        {
        document.body.style.height = Math.max(document.documentElement.scrollHeight,document.body.scrollHeight) + " px " ;
        }
        setOrientation();
        $addHandler(window, " resize " ,setOrientation);
</ script >

为了增加效果可以加点小图标一类的东西。效果图如下：
普通状态：

拖动时状态：

---

随便说两句:
上午，在原公司讲了《web标准设计》知识广播的最后一讲。下午刚才已经接到通知，下周一就要到上海新的公司报到了。马上就要离开这个待了将近两年的公司，马上就要和曾经一起分享喜、怒、哀、乐经历的同事好友话别，马上就要去那个陌生而充满希望的城市。心里竟然有点伤感。哎，难道，年龄，真的，大了？



keyword:ajax Accordion,ajax Tabs,ajax DragPanel,DragPanelasp拖动,DragPanel定位,DragPanel还原位置,DragPanel位置,.net ajax,ajax教程,ajax基础教程,ajax技术,ajax.net,asp ajax,ajax设计,ajax网页设计,ajax表现