| eFile="Default.aspx.cs" Inherits="_Default" ClientIdMode="Static"%>
- At Web Config level:
还可以在机器或应用程序级别在 config 部分设置 ClientIdMode。 例如，这将为应用程序中所有页面中的所有控件定义默认 ClientIdMode：
<system.web>
<pages clientIdMode="Predictable"></pages>
</system.web>
任务 4 - 通过 CSS 和 Java 脚本定 位静态 ClientID
在本任务中，您将利用静态 ClientID 模式，通过 Java Script 使用 ClientID 来操作所呈现的控件，并将 CSS 样式直接应用于 Id，而不是创建不必要的 CssClass。
1.通过静 态 ClientID 向控件应用样式。为此，打开 Styles 文件夹下的 main.css 文件，并添加以下突出显示 的代码：注意：ShopCartCollapsed 和 ShopCartExpanded ID 属性将通过应用 ID 选择器而不是类选择 器来引用。基本差异在于，类选择器适用于页面上的一个或多个元素，而 ID 选择器仅处理一个元素。有 关更多信息，请访问 http://www.w3.org/TR/CSS21/selector.html#id-selectors。
CSS
#ShopCartCollapsed {
display:none;
background-color:#00FF80;
padding:10px 15px;
height:10px;
background:url(../Images/shopcart_collapsed_bg.png) no-repeat top left;
}
#ShopCartCollapsed p.summary span {
position:relative; top:-4px;
}
#ShopCartCollapsed a.checkoutLink {
position:absolute; top:6px; right:8px;
}
#ShopCartExpanded {
display:none;
padding:10px 15px;
height:90px;
background:url (../Images/shopcart_bg.gif) no-repeat top left;
}
#ShopCartExpanded p.items {
font-size:11px;
color: #666;
}
#ShopCartExpanded ul.items {
height:60px;overflow:auto;
margin:0; padding:0; list- style:none;
}
#ShopCartExpanded ul.items li {
display:inline; margin:0; padding: 0;
}
#ShopCartExpanded div.ShoppingCartItem {
display:block;
}
#ShopCartExpanded div.productColumn {
float:left;
width:150px;
}
#ShopCartExpanded div.priceColumn {
float:right;
width:auto;
}
#ShopCartExpanded p.summary span {
position:relative; top:+6px;
}
#ShopCartExpanded p.empty {
text-align:center;
font-weight:bold; color:#50d48f;
padding-top:15px;
}
#ShopCartExpanded a.checkoutLink {
position:absolute; top:89px; right:8px;
}
2.使用 JQuery 实现必要的 Java Script 代码，为购物车创建效果。为此，打开 Scripts 文件夹下 的 shoppingCart.Effects.js 文件，并执行以下步骤：
a.将以下突出显示的代码添加到 CollapseCart 函数中：
JS
function CollapseCart(withAnimation) {
if (withAnimation) {
$("#ShopCartExpanded").hide();
$("#ShopCartCollapsed").show ("slow");
}
else {
$("#ShopCartExpanded").css("display", "none");
$("#ShopCartCollapsed").css("display", "block");
}
$("#ShoppingCartState").val("collapsed");
}
b.将以下突出显示的代码添加到 ExpandCart 函数中：
JS
function ExpandCart(withAnimation) {
if
|
