（转）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>

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

拖动时状态：

---