Ajax控件的使用

最新推荐文章于 2016-06-04 18:55:00 发布

幸福的小木鱼

最新推荐文章于 2016-06-04 18:55:00 发布

阅读量705

点赞数 2

分类专栏： Ajax 文章标签： ajax server textbox hyperlink asp div

本文链接：https://blog.csdn.net/lin_lujian/article/details/6954398

版权

Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<head runat="server">
 <title>静态菜单效果</title>
 <style>
  .headerBg{
   cursor:hand;
   width:160px;
   height:30px;
   color:#fffffff;
   font-weight:bold;
   background-image:url(../images/ajaxmenubg.gif);
   line-height:30px;
  }
 </style>
</head>
<body style="background-color:#E7F7DE">
 <form id="form1" runat="server">
   <div style="text-align:center;width:18%">
       <asp:ScriptManager ID="ScriptManager1" runat="server"> 
       </asp:ScriptManager>
       <ccl:Accordion ID="Accordion1" runat="server" HeaderCssClass="headerBg">
         <Panes>
	  <ccl:AccordionPane ID="AccordionPane" runat="server">
            <Header>
	    人事管理
	    </Header>
	    <Content><br>
	     <b>机构信息</b><br>
	     <b>用户信息</b><br>
	    </Content>
	  </ccl:AccordionPane>
	  <ccl:AccordionPane ID="AccordionPane2" runat="server">
            <Header>
	     日程管理
	    </Header>
	    <Content>
              <b>我的日程</b><br>
	      <b>部门日程</b><br>
	    </Content>
	  </ccl:AccordionPane>
	 </Panes>
       </ccl:Accordion>
   </div>
 </form>
</body>
<!--
 SelectedIndex:表示默认选择的面板索引
 HeaderCssClass:表示整个菜单标题样式
 ContentCssClass:表是菜单内容样式
 AutoSize:表示Accordion内容显示方式，著有有None，Limit，Fill三种
 Panes:Panes是Accordion控件的内容所在，
 HeaderTemplate:Accordion的标题模板
 ContentTemplate:Accordion的内容模板
-->

protected void DisplayHotBooks()
{
 IList<category> list=CategoryManager.GetAllCategories();
 foreach(category item in list)
 {
  AccordionPane ap=new AccordionPane();
  Lable lblCategoryMenu=new Lable();
  lblCategoryMenu.Text=item.Name;
  ap.ID="ap"+item.Id;
  ap.HeaderContainer.Controls.Add(lblCategoryMenu);
  IList<book> bookList=BookManager.GetBooksByCategoryId(item.Id);
  foreach(book bitem in bookList)
  {
    HyperLink hl=new HyperLink();
    hl.Text=bitem.Title+"<br>";
    ap.ContentContainer.Controls.Add(hl);
  }
  this.Accordion1.Panes.Add(ap);
 }
}


<asp:ScriptManager ID="scriptManager1" runat="server">
</asp:ScriptManager>
<div id="div1" style="float:left">
  <asp:Panel ID="pnlHidden" runat="server">
     <img src="../images/users.jpg" alt=""/>
  </asp:Panel>
</div>
<asp:Panle ID="pnlShow" runat="server">
 <div id="div2" style="float:left;width:20px;height:37%;padding-top:110px;text-align:center;">
  <asp:ImageButton ID="imgbtnHoideShow" ImageUrl="~/images/toleft.gif" runat="server">
 </div>
 <div id="div3" style="float:left">
  <img src="../images/Content.jpg" alt="">
 </div>
</asp:Panel>
<ccl:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" TargetControlID="PnlHiddel"
CollapsibleSize="0" ExpandeSize="342" Collapsed="false" ExpandControlID="imgbtnHoideShow" 
CollapseControlID="imgbtnHoideShow" AutoCollapse="false" AutoExpand="false" ScrollContents="false" 
CollapsedText="显示..." ExpandedText="隐藏.." ImageControlID="imgbtnHideShow"
ExpandedImage="~/images/toleft.gif" CollapsedImage="~/images/toright.gif" ExpandDirection="horizontal"  >
</ccl:CollapsiblePanelExtender>

<!--
 TargetControlID:被显示或隐藏的Panel的ID
 CollapsedSize:折叠后的尺寸
 ExpandedSize:展开后的尺寸
 Collapsed:默认Panel是否处于折叠状态
 ExpandControlID:激发伸展效果的控件ID
 CollapseControlID:激发折叠效果的控件ID
 AutoCollapse:失去焦点是是否自动折叠
 AutoExpand:失去焦点是是否自动展开
 ScrollContents:Panel内是否显示滚动条
 CollapsedText:折叠后显示的文字信息
 ExpandedText:展开后显示的文字信息
 ImageControlID:使用图片实现折叠和展开时时图片的ID
 ExpandedImage:实现展开时使用的图片路径
 CollapsedImage:实现折叠式使用的图片路径
 ExpandDirection:展开方向，有水平和垂直两种
-->

<style type="text/css">
  .ratingStar{
   width:28px;
   height:28px;
   cursor:pointer;
   background-repeat:no-repeat;
  }
  .filledRating{
   background-image:url(images/filled.gif);
  }
  .emptyRating{
   background-image:url(images/empty.gif);
  }
  .waitingRating{
   background-image:url(images/waiting.gif);
  }
</style>
<ccl:Rating ID="Rating1" runat="server" CurrentRating="3" MaxRating="5" StarCssClass="ratingStar" 
EmptyStarCssClass="emptyRating" FilledStarCssClass="filledRating" WaitingStarCssClass="waitingRating" 
AutoPostBack="true" Onchanged="Rating1_Changed" Height="22px">
</ccl:Rating>
<!--
 CurrentRating:当前默认等级
 MaxRating:最大等级
 StarCssClass:等级星样式
 EmptyStarCssClass:未被选中的等级星的显示样式
 FilledStarCssClass:选中等级星的显示样式
 WaitingStarCssClass:更改等级星选中状态时的显示样式
 OnChanged:等级变化时触发的事件
-->


<asp:TextBox ID="txtPublishDate" runat="server">
</asp:TextBox>
<ccl:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtPublisgDate" 
Format="yyyy-MM-dd" CssClass="cssCdar" PopupButtonID="imgbtnSelectDate">
</ccl:CalendarExtender>
<!--
 TargetControlID:与日历绑定的TextBox控件ID
 Format:日历显示的日期格式
 CssClass:日历的样式
 PopupButtonID:通过选择按钮弹出日期是的按钮ID
-->

<asp:Panel ID="pnlPopup" runat="server" Width="380px" Height="200px" BackImageUrl="images/ModalPopupBg.jpg">
  <p style="font-size:18px; font-family:华文新魏;font-weight:bold;color:#ff0000;">
  想购买商品，请先从这里登录
  </p>
  用户名<asp:TextBox ID="txtLoginId" runat="server" Width="141px" ></asp:TextBox><br/>
  密码：<asp:TextBox ID="txtLoginPwd" runat="server" Width="141px"></asp:TextBox><br/>
  <asp:ImageButton ID="imgbtnLogin" style="cursor:hand" ImageUrl="images/ModalPopupLogin.jpg" onClick="imgbtnLogin
  _Click"/>
  <asp:ImageButton ID="imgbtnCancel" style="cursor:hand" ImageUrl="images/ModalPopupCancel.jpg"/>
</asp:Panel>
<ccl:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="hid" PopupControlID="pnlPopup"
DropShadow="true" CancelControlID="imgbtnCancel" Drag="true" PopupDragHandleControlID="pnlPopup"
BackgroundCssClass="otherBgCss">
</ccl:ModalPopupExtender>
<!--
 TargetControlID:用来控制弹出窗口的控件ID
 PopupControlID:要弹出的控件ID
 DropShadow:弹出的控件是否有阴影效果
 OkControlID: 确定按钮的ID
 CancelControlID：取消按钮的ID
 Drag:是否允许拖拽
 PopupDragHandleControlID:允许拖拽控件的ID
 BackgroundCssClass:弹出控件后其他部分的样式
 Show():在需要时用来控制模式窗口的显示效果
 Hide():在需要时用来控制模式窗口的隐藏效果
-->

<ccl:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="2" Width="500px">
 <ccl:TabPanel ID="TabPanel1" runat="server" HeaderText="注册用户">
 </ccl:TabPanel>
 <ccl:TabPanel ID="TabPanel2" runat="server" HeaderText="用户管理">
 </ccl:TabPanel>
</ccl:TabContainer>

<!--
HeaderText:表示选项卡的标题
HeaderTemplate:选项卡的标题模板
ContentTemplate:选项卡的内容模板
-->

幸福的小木鱼

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax控件的使用

静态菜单效果 .headerBg{ cursor:hand; width:160px; height:30px; color:#fffffff; font-weight:bold; background-image:url(../images/ajaxmenubg.gif); line-height:30px; }
复制链接

扫一扫

专栏目录