使用jQuery UI的主题与ASP.Net控件 [英] Using jQuery UI Themes with ASP.Net Controls
本文介绍了使用jQuery UI的主题与ASP.Net控件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在考虑使用jQuery UI主题，以我的ASP.NET网站的可行性。
我发现了以下问题。我们如何改正？
- 的Internet Explorer（IE 8） - >网格线是不是在底部可见
（当不存在多页） - Mozilla的 - >网格线不适用于头
- 浏览器 - >做工精细
时将其与asp.net控制兼容？
你可以请直接给我一些例子，说明正确使用这些jQuery的班级，asp.net对照组（没有副作用）的？
＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml＆GT;＆LT;头=服务器＆GT;＆LT;标题＆GT;＆LT; /标题＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js＆GT;＆LT; / SCRIPT＆GT;＆LT;脚本类型=文/ JavaScript的SRC =http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.6/jquery-ui.js＆GT;＆LT; / SCRIPT＆GT;＆LT;链接HREF =http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/themes/sunny/jquery-ui.css
相对=样式类型=文/ CSS/＆GT;＆LT; /头＆GT;
＆LT;身体GT;
＆LT;表ID =form1的=服务器＆GT;
＆LT; DIV＆GT;
＆LT; ASP：GridView控件ID =GridView1=服务器的AutoGenerateColumns =FALSE
AllowPaging =真每页=4＆GT;
＆LT;柱体和GT;
＆LT; ASP：BoundField的数据字段=产品名称的HeaderText =产品名称只读=真
SORTEX pression =产品名称/＆GT;
＆LT; ASP：BoundField的数据字段=单位数量的HeaderText =数量只读=真SORTEX pression =单位数量/＆GT;
＆LT; ASP：BoundField的数据字段=类别名称的HeaderText =类别只读=真SORTEX pression =类别名称/＆GT;
＆LT; /专栏＆GT;
＆LT; / ASP：GridView的＆GT;
＆LT; / DIV＆GT;
＆LT; BR /＆GT;
＆LT; /表及GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
- code背后
使用系统;
使用System.Web.UI.WebControls;
使用System.Data这;公共部分类MyGridTest：System.Web.UI.Page
{
保护无效的Page_Load（对象发件人，EventArgs的发送）
{
DataTable的DT =新的DataTable（）;
dt.Columns.AddRange（新的DataColumn [3] {新的DataColumn（产品名称），新的DataColumn（单位数量），新的DataColumn（类别名称）}）;
dt.Rows.Add（战袍，200）;
dt.Rows.Add（足球，30）;
dt.Rows.Add（蝙蝠，22.5）;
//dt.Rows.Add(\"Football，30）;
//dt.Rows.Add(\"Bat，22.5）;
//dt.Rows.Add(\"Football，30）;
//dt.Rows.Add(\"Bat，22.5）;
GridView1.DataSource = DT;
GridView1.DataBind（）;
}保护覆盖无效在preRender（EventArgs的发送）
{
base.On preRender（E）;
GridView1.CssClass =UI小部件内容; 如果（GridView1.Rows.Count大于0）
{
//渲染无障碍格式头
GridView1.UseAccessibleHeader = TRUE; //添加的＆lt;＆THEAD GT;元件
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
GridView1.HeaderRow.CssClass =UI小部件头; //添加的＆lt;＆TFOOT GT;元件
GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
如果（GridView1.TopPagerRow！= NULL）
{
GridView1.TopPagerRow.TableSection = TableRowSection.TableHeader;
}
如果（GridView1.BottomPagerRow！= NULL）
{
GridView1.BottomPagerRow.TableSection = TableRowSection.TableFooter;
}
}
}
}
解决方案
只是出于兴趣。当您添加此meta标签上会发生什么。
＆LT; META HTTP-EQUIV =X-UA-Compatible的内容=IE = 8/＆GT;
I am considering the feasibility of using jQuery UI themes to my ASP.NET website.
I found following issues. How do we correct them?
- Internet Explorer (IE 8) --> The gridline is not visible at the bottom (when there is no multiple pages)
- Mozilla --> Gridline is not available for header
- Chrome --> Working fine
Is it compatible with asp.net controls? Can you please direct me to some examples that shows correct use of these jQuery classes with asp.net controls (without side effects)?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.6/jquery-ui.js"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/themes/sunny/jquery-ui.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
AllowPaging="True" PageSize="4">
<Columns>
<asp:BoundField DataField="ProductName" HeaderText="ProductName" ReadOnly="true"
SortExpression="ProductName" />
<asp:BoundField DataField="QuantityPerUnit" HeaderText="Qty" ReadOnly="true" SortExpression="QuantityPerUnit" />
<asp:BoundField DataField="CategoryName" HeaderText="Category" ReadOnly="true" SortExpression="CategoryName" />
</Columns>
</asp:GridView>
</div>
<br />
</form>
</body>
</html>
--Code Behind
using System;
using System.Web.UI.WebControls;
using System.Data;
public partial class MyGridTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] { new DataColumn("ProductName"), new DataColumn("QuantityPerUnit"), new DataColumn("CategoryName") });
dt.Rows.Add("Shirt", 200);
dt.Rows.Add("Football", 30);
dt.Rows.Add("Bat", 22.5);
//dt.Rows.Add("Football", 30);
//dt.Rows.Add("Bat", 22.5);
//dt.Rows.Add("Football", 30);
//dt.Rows.Add("Bat", 22.5);
GridView1.DataSource = dt;
GridView1.DataBind();
}
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
GridView1.CssClass = "ui-widget-content";
if (GridView1.Rows.Count > 0)
{
//To render header in accessible format
GridView1.UseAccessibleHeader = true;
//Add the <thead> element
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
GridView1.HeaderRow.CssClass = "ui-widget-header";
//Add the <tfoot> element
GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
if (GridView1.TopPagerRow != null)
{
GridView1.TopPagerRow.TableSection = TableRowSection.TableHeader;
}
if (GridView1.BottomPagerRow != null)
{
GridView1.BottomPagerRow.TableSection = TableRowSection.TableFooter;
}
}
}
}
解决方案
Just out of interest. What happens on when you add this meta tag.
<meta http-equiv="x-ua-compatible" content="IE=8" />
这篇关于使用jQuery UI的主题与ASP.Net控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
