ASP.NET Web Forms 4.0简介

作者佚名技术来源 NET编程浏览发布时间 2012-05-20

(withAnimation)　{
$("#ShopCartCollapsed").hide();
$("#ShopCartExpanded").show ("slow");
　　　　}
else　{
$("#ShopCartCollapsed").css("display", 　"none");
$("#ShopCartExpanded").css("display",　"block");
　　　　}

$("#ShoppingCartState").val("expanded");
}

c.将以下突出显示的代码添加到 $(document).ready 函数中：

$(document).ready(function()　{ //　Preload　expanded　Shopping　Cart　background　image $("<img>").attr("src", 　"Images/shopcart_bg.gif"); $("#ShopCartCollapsed").click(function()　{　 ExpandCart(true)　}); $("#ShopCartExpanded").click(function()　{　CollapseCart(true) 　}); if　($("#ShoppingCartState").val()　==　"expanded")　{ ExpandCart (false); 　　　　} else　{ CollapseCart(false); 　　　　} });

3.在 Default.aspx 中添加一个对 ShoppingCart.Effects.js 的引用。为此，在 Source 模式下打开 Default.aspx，将以下突出显示的代码添加到第一个 asp:Content 标记

内。

ASP.NET

... <%@　MasterType　 TypeName="WebFormsSampleApp.Master.UI"　%> <asp:Content　 ContentPlaceHolderID="HeadContentPlaceHolder"　runat="server"> <link　 type="text/css"　rel="Stylesheet"　media="screen"　href="/Styles/products.css"　/> 　　　　　　　　　　　　　　　　<script　type="text/javascript"　 src="/Scripts/shoppingCart.Effects.js"></script> </asp:Content> ...

下一步

练习 1：验证

为了验证是否正确执行了练习 1 中的所有步骤，执行以下步骤：

验证 1

在此验证中，您将了解如何从 CSS 和 Java Script 中定位 Static ClientID。您将看到如何将样式应用于购物车，如何通过美仑美焕的效果展开和折叠它。所有这些都需要通过在客户端代码中引用所呈现的控件静态 id 来实现。

1.启动 WebFormsSampleApp 项目的一个新实例。为此，在 Solution Explorer 中右键单击 WebSite 项目，指向 Debug 并选择 Start New Instance。

注意：如果出现 Debugging Not Enabled 对话框，选择 Modify the Web.config file to enable debugging 并单击 OK。

图 2

查看默认页面

2.查看页面的源代码，确定静态 ClientID 模式（已在练习 1 中完成）的 asp:Panels 使用与服务器控件相同的 ID 呈现。为此，在浏览器中右键单击页面，选择 View Source。

注意：此时将打开一个文字编辑器，其中显示了呈现的 Default.aspx 页面的源代码。

3.在页面的源代码中找到 Id 分别为　 Id ShopCartCollapsed 和 ShopCartExpanded 的 <div> 元素。这两个 <div> 元素代表购物车的展开或折叠视图。

注意：ASP.NET 已将 asp:Panel 服务器控件呈现给 <div> 元素，保留了唯一标识它们的 ID。

图 3

查看所呈现的使用静态 ClientID 的 <div> 元素

4.单击产品旁边的加号 ( ) 将它们添加到购物车中。请注意购物车的折叠视图如何更新新产品的信息。

图 4

向购物车添加产品

5.展开和折叠购物车。为此，单击页面右上方的绿色面板。

注意：由于您已经知道了调用这些 <div> 元素的方式，因此可以实现购物车的展开和折叠。在本例中，除了直接使用 ID 选择器应用 CSS 样式之外，您还从 Java Scri

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

上一页 1 2 3 4 5 6 7 8 9 10 11 12 13 14 下一页

分享到：更多

你可能对下面的文章感兴趣

上一篇: 三元运算符-条件(三元)运算符效率问题下一篇: 关于系列化和反序列化的一个问题

关于ASP.NET Web Forms 4.0简介的所有评论

随机推荐