一.添加空标记
最早最开始学CSS的时候我们用到的方法应该就是类似这样的:
HTML:
<div class="a"></div>
<div class="b"></div>
<div class="clearfix"></div>
</div>
CSS:
.a{float:left;}
.b{float:right;}
.clearfix{clear:both;}
.clearfix 如果有必要的时候可以写成这种方法:
.clearfix{clear:both;height:0;line-height:0;font-size:0;}
--------------------------------------------------------
优点:简单,方便,代码易理解.
缺点:多余的HTML代码和多余的元素.
二.overflow:hidden;
后来进阶到稍微高级一点的时候,我们开始讨厌多余的HTML代码了,于是我们开始追求更简洁,最好是只通过CSS就能实现的办法.overflow这个方法是只能通过父模块对子模块来使用.overflow:hidden;
HTML:
<div class="a"></div>
<div class="b"></div>
</div>
CSS:
.a{float:left;}
.b{float:right;}
--------------------------------------------------------
优点:容易控制,比较好理解,代码简洁.
缺点:当你父模块内的子模块使用到overflow的时候就不能使用了,因为会彼此冲突或者抵消.而且为了IE6的兼容父模块必须加上宽度.
三.:after伪元素
个人觉得这种方法是最高级的,当然每个人的看法不一样.但是这种方法对于不是专门做前端开发的人员或者刚开始接触CSS的人来说有点难以理解.:after是一个CSS提供的伪元素.意思就是字面意思,在该元素后的样式效果.
HTML:
<div class="a"></div>
<div class="b"></div>
</div>
CSS:
*html .container{zoom:1;} /* for IE6 IE6不支持:after伪元素*/
*:first-child+html .container{zoom:1;}/* for IE7 IE7不支持:after伪元素*/
.a{float:left;}
.b{float:right;}
--------------------------------------------------------
优点:暂时没看出来,欢迎大家补充.
缺点:代码不易理解,CSS代码太多.
http://www.qianduan.net/new-clearfix.html
在网上搜集资料的时候看到前端观察里还有一个稍微简化一点点的办法:
.clearfix{*zoom:1;}
谢谢阅读,若有不正确的地方请提出来纠正.
“Uncaught ReferenceError: xl_chrome_menu is not defined”
后来查看是不是浏览器本身的问题,于是把插件什么的找了一下,全删掉,发现是迅雷的Chrome插件的问题.
因为Maxthon3双核浏览器的内核被他们团队做了修改,所以可以进行如下判断.
(注意:仅仅在Mathon3+下做过测试.)
若发现问题,或者有更好的做法,请告诉我,谢谢.
<HEAD>
<TITLE>isMaxthon maxthonVersion</TITLE>
</HEAD>
<BODY>
<script type="text/javascript">
function isMaxthon(){
try{
if(window.external && window.external.max_version){
if(window.external.max_version.substr(0,1).length>0){
return true;
}
}
return false;
}
catch (e){
return false;
}
}
alert(isMaxthon());
</script>
</BODY>
</HTML>
(LIVE WRITER有点问题,发布的顺序都乱了)
之前有朋友在他公司要用到JQ的插件JQGRID合并asp.net,但是他遇到问题,载入不了数据,于是我在网上到处找没找到一个可以用的asp.net例子,于是参考了几个PHP和几个JAVA的实现,给大家简单的介绍下如何在asp.net里使用这个插件:
因为我不会PHP,官方的demo其实介绍的还是比较详细的.
所以PHP高手们可以不要看这篇文章了.
参考了很多文章和JAVA的应用,找到零星的asp.net的例子,要么就是用不了,要么就是非常复杂,让人不知道从哪里下手,的确,走了很多弯路了,实在是麻烦,都想放弃这个插件了,不过还是努力坚持,决定了一旦例子成功就要贴上来给大家,方便别人就是方便自己.废话不多说了,下面正式开始介绍:
因为一个完整的项目全部拿来解释,还是过于繁琐了,所以就拆出其中的部分,其中不清楚的类会稍作解释,大家不明白的地方可以留言,总共就是三个文件:
Default.aspx (前端文件)
Handler.ashx (处理文件)
SQLComment.cs(操作SQL里comment表的类)
这里的主要目的还是为了能够实现数据导入进JQGRID,更复杂的操作今后会谈到.
1.客户端的准备
因为JQGrid是基于JQuery的,所以当然要引用到JQ啦.
<script type="text/javascript" src="../scripts/jQuery/jquery-1.4.2.min.js"></script>
JQGRID现在已经完美的和JQ的另一个界面插件JQUI合并了,所以可以用更丰富的界面.下面是引入JQUI:
<script type="text/javascript" src="../scripts/jQuery/plugins/jquery-ui-1.8.4.custom.min.js"></script>
当然,最重要的是一定要引入JQGRID的文件咯,呵呵,但是这里要注意到的是,你去jqgrid的官网里下载的时候,里面还会有一个本地化的扩展包,当然我选中文的,而且一定要让这个js包在JQGRID的前面,这是官网提到的:
<script type="text/javascript" src="../scripts/jQuery/plugins/grid.locale-cn.js"></script>
<script type="text/javascript" src="../scripts/jQuery/plugins/jquery.jqGrid.min.js"></script>
还有UI和JQGRID的css文件也要导入:
<link rel="stylesheet" type="text/css" media="screen" href="../themes/redmond/jquery-ui-1.8.4.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../themes/ui.jqgrid.css" />
完整的导入图如下:
2.客户端的配置
客户端的配置很重要,不仅是post到接下来的handler.ashx里面,还是从handler.ashx里get到的数据,都是很重要的.
大家可以参考一下 耿炜 大师的博客里也有介绍到JQGRID的配置参数,不详细介绍了,我主要是快速能调通为主.嘻嘻~偷懒ing~这里的东西很重要哦~官网的维基帮助是E文的,这里是全中文的!
代码
<script type="text/javascript">
$(document).ready(function () {
jQuery("#list").jqGrid({
url: 'asynchronous/GridData.ashx?p=Comment',
datatype: "json",
height: 'auto',
colNames: ['评论ID', '类别ID', '文章ID', '留言人', '留言内容', '发布日期', '留言IP'],
colModel: [
{ name: 'CommentID', index: 'CommentID', sorttype: "int", width: 60 },
{ name: 'TypeID', index: 'TypeID', sorttype: "int", width: 60 },
{ name: 'FromID', index: 'FromID', sorttype: "int", width: 60 },
{ name: 'Name', index: 'Name', editable: true, width: 60 },
{ name: 'Contents', index: 'Contents', sortable: false, width: 300 },
{ name: 'PublishDate', index: 'PublishDate', sorttype: "date", width: 190 },
{ name: 'IP', index: 'IP', align: "right", sorttype: "float", editable: true, width: 130 }
],
viewrecords: true,
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'CommentID',
jsonReader: {
root: "griddata",
total: "totalpages",
page: "currpage",
records: "totalrecords",
repeatitems: false
},
pager: "#pager",
caption: "评论管理",
sortorder: "desc",
hidegrid: false
});
jQuery("#list").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false });
});
</script>
小小说明一下,这里的配置必须是数据库里的字段,我临时做了一个小小的数据库,里面有这么一个tb_comment表,仔细观察可以看出,是数据库的字段配置到了前台.
每次访问其实都带有很多参数:
然后JSONREADER是读取JSON的方式,告诉大家,成功的JSON应该是这个样子的:
代码
{"totalpages":"5","currpage":"1","totalrecords":"41","griddata":[{"CommentID":10041,"TypeID":10009,"FromID":10018,"Name":"木头","Contents":"恭喜啊~","PublishDate":"2010-08-15 10:42:54 507000","IP":"127.0.0.1"},{"CommentID":10040,"TypeID":10009,"FromID":10018,"Name":"我","Contents":"我","PublishDate":"2010-07-27 10:55:06 390000","IP":"127.0.0.1"},{"CommentID":10039,"TypeID":10009,"FromID":10014,"Name":"我","Contents":"我","PublishDate":"2010-04-18 11:25:21 640000","IP":"127.0.0.1"},{"CommentID":10038,"TypeID":10009,"FromID":10016,"Name":"w","Contents":"w","PublishDate":"2010-04-18 11:24:37 070000","IP":"127.0.0.1"},{"CommentID":10037,"TypeID":10009,"FromID":10018,"Name":"as","Contents":"test","PublishDate":"2010-04-18 10:57:19 517000","IP":"127.0.0.1"},{"CommentID":10036,"TypeID":10009,"FromID":10000,"Name":"小东","Contents":"恭喜啊...","PublishDate":"2010-04-16 08:41:19 633000","IP":"127.0.0.1"},{"CommentID":10035,"TypeID":10009,"FromID":10000,"Name":"发","Contents":"34的多5的 ","PublishDate":"2010-04-16 08:37:57 080000","IP":"127.0.0.1"},{"CommentID":10034,"TypeID":10009,"FromID":10000,"Name":"345","Contents":"345","PublishDate":"2010-04-16 08:31:40 893000","IP":"127.0.0.1"},{"CommentID":10033,"TypeID":10009,"FromID":10000,"Name":"123","Contents":"13","PublishDate":"2010-04-16 08:31:01 003000","IP":"127.0.0.1"},{"CommentID":10032,"TypeID":10009,"FromID":10000,"Name":"这些是","Contents":"这些 是","PublishDate":"2010-04-16 08:27:37 723000","IP":"127.0.0.1"}]}
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>评论管理</title>
<!-- 引入主题文件 -->
<link rel="stylesheet" type="text/css" media="screen" href="../themes/redmond/jquery-ui-1.8.4.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../themes/ui.jqgrid.css" />
<!-- 引入脚本文件 -->
<script type="text/javascript" src="../scripts/jQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../scripts/jQuery/plugins/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript" src="../scripts/jQuery/plugins/grid.locale-cn.js"></script>
<script type="text/javascript" src="../scripts/jQuery/plugins/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
jQuery("#list").jqGrid({
url: 'asynchronous/GridData.ashx?p=Comment',
datatype: "json",
height: 'auto',
colNames: ['评论ID', '类别ID', '文章ID', '留言人', '留言内容', '发布日期', '留言IP'],
colModel: [
{ name: 'CommentID', index: 'CommentID', sorttype: "int", width: 60 },
{ name: 'TypeID', index: 'TypeID', sorttype: "int", width: 60 },
{ name: 'FromID', index: 'FromID', sorttype: "int", width: 60 },
{ name: 'Name', index: 'Name', editable: true, width: 60 },
{ name: 'Contents', index: 'Contents', sortable: false, width: 300 },
{ name: 'PublishDate', index: 'PublishDate', sorttype: "date", width: 190 },
{ name: 'IP', index: 'IP', align: "right", sorttype: "float", editable: true, width: 130 }
],
viewrecords: true,
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'CommentID',
jsonReader: {
root: "griddata",
total: "totalpages",
page: "currpage",
records: "totalrecords",
repeatitems: false
},
pager: "#pager",
caption: "评论管理",
sortorder: "desc",
hidegrid: false
});
jQuery("#list").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false });
});
</script>
</head>
<body>
<form id="frmMComment" runat="server">
<div>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"><!--用于数据显示-->
</table>
<div id="pager" class="scroll" style="text-align: center;"><!--用于分页的层-->
</div>
</div>
</form>
</body>
</html>
客户端的完整代码是这样的,注意,在下面的body部分有两个层,分别是绑定GRID和绑定PAGER用的哦!
3.handler.ashx的处理
关键应该就是这个东西了,我直接贴重要代码,大家直接粘贴进去就好了,这里的算法是根据官网的PHP改过来的,可能不是很严谨,或者有什么bug,欢迎大家指正或者帮忙想出更好的算法.
代码
<%@ WebHandler Language="C#" Class="GridData" %>
using System;
using System.Web;
using System.Data;
using Wood8.Common;
using Wood8.DataAccess.SQLServer;
using Newtonsoft.Json;
using Newtonsoft.Json.Converters;
using System.Web.Services;
using System.Collections;
using System.Collections.Generic;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class GridData : IHttpHandler {
public void ProcessRequest(HttpContext context)
{
context.Response.Buffer = true;
context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);
context.Response.AddHeader("pragma", "no-cache");
context.Response.AddHeader("cache-control", "");
context.Response.CacheControl = "no-cache";
context.Response.ContentType = "text/plain";
DataTable dt;
string jsonData=string.Empty;
string sPage = HttpContext.Current.Request.Params["page"].ToString(); //当前请求第几页
int iPage = int.Parse(sPage);
string sLimit = HttpContext.Current.Request.Params["rows"].ToString(); //grid需要显示几行
int iLimit = int.Parse(sLimit);
string sSidx = HttpContext.Current.Request.Params["sidx"].ToString(); //按什么排序
string sSord = HttpContext.Current.Request.Params["sord"].ToString(); //排序方式('desc'/'asc')
if(sSidx=="")
{
sSidx ="1";
}
int iTotalpages;
SQLComment sc = new SQLComment();
DataSet sResult = sc.getAllComments();
int iCount = sResult.Tables[0].Rows.Count;
if( iCount >0 )
{
int iR = iCount/iLimit;
iTotalpages = iR + 1;
}
else
{
iTotalpages = 0;
}
if (iPage > iTotalpages)
{
iPage = iTotalpages;
}
int iStart = iLimit * iPage - iLimit + 1; // do not put iLimit*(iPage - 1)
iLimit = iLimit * iPage;
sResult = sc.getCommentsFromTo(iStart, iLimit, sSidx, sSord, iPage);
dt = sResult.Tables[0];
string totalpages = iTotalpages.ToString();
string currpage = iPage.ToString();
string totalrecords = iCount.ToString();
IsoDateTimeConverter idtc = new IsoDateTimeConverter();
idtc.DateTimeFormat = "yyyy-MM-dd hh:mm:ss ffffff";
jsonData = JsonConvert.SerializeObject(dt, idtc).ToString();
string returnData = string.Empty;
returnData = "{";
//总共多少页
returnData += "\"totalpages\"";
returnData += ":";
returnData += "\"";
returnData += totalpages;
returnData += "\"";
returnData += ",";
//当前第几页
returnData += "\"currpage\"";
returnData += ":";
returnData += "\"";
returnData += currpage;
returnData += "\"";
returnData += ",";
//总共多少记录
returnData += "\"totalrecords\"";
returnData += ":";
returnData += "\"";
returnData += totalrecords;
returnData += "\"";
returnData += ",";
//datable转换得到的JSON字符串
returnData += "\"griddata\"";
returnData += ":";
returnData += jsonData;
returnData += "}";
context.Response.Write(returnData);
}
public bool IsReusable {
get {
return false;
}
}
}
OK,这里重点又来了,我这里使用到了JSON.net来将查询出来的datatable转换成JSON的格式newtonsoft的JSON.net也是开源的,所以不用担心,官网的更新速度也还比较快,文档也比较充裕,大家可以去官网找找:
http://james.newtonking.com/default.aspx
我这里就只用到了简单的将datatable转换成JSON.
(p.s.这里很多引用都没用的,因为我是个完整的项目,只截取了部分,大家看到引用没有用的就删掉就OK啦~)
最后是SQLCOMMENT这个类的操作了,这里公布两个方法的源码,算法不是很好,大家有更好的算法记得告诉我哦!
代码 public DataSet getAllComments()
{
string strSql = string.Empty;
strSql = "select CommentID,TypeID,FromID,[Name],Contents,PublishDate,IP from tb_Comment ";
return BasicSQLHelper.Query(strSql, null);
}
/// <summary>
/// 根据指定条件输送数据
/// </summary>
/// <param name="start">开始位置</param>
/// <param name="end">结束位置</param>
/// <param name="orderid">按什么排序</param>
/// <param name="orderway">排序方式:asc/desc</param>
/// <returns></returns>
public DataSet getCommentsFromTo(int start, int end, string orderid, string orderway, int page)
{
string strSql = string.Empty;
//保证end要比start大
if (start > end)
{
int temp = start;
start = end;
end = temp;
}
strSql = "SELECT TOP " + (end - start + 1) + " * FROM tb_Comment ";
strSql += "WHERE ";
strSql += "( ";
strSql += orderid + " NOT IN ";
strSql += "( ";
if (page == 1)
{
strSql += "SELECT TOP " + (start - 1) + " " + orderid + " FROM tb_Comment ";
}
else
{
strSql += "SELECT TOP " + (start - 2) + " " + orderid + " FROM tb_Comment ";
}
strSql += "order by " + orderid + " " + orderway + " ";
strSql += ") ";
strSql += ") ";
strSql += "order by " + orderid + " " + orderway + " ";
return BasicSQLHelper.Query(strSql, null);
}
最后再贴一个分页的SQL的代码,以供大家参考~
所以，一并整理出来。
SQL Server 2005
PageCount：一页需要的数据条数
PageIndex：页索引
select top PageCount * from (
select top PageCount * from (
select top PageCount*PageIndex * from tableName order by ID) as tmp1 order by ID DESC
) as tmp2 order by ID
)
解释一下，比如在论坛中，有100条帖子，每一页显示20条帖子，如果显示第2页。则，先按照时间排序，取出前40条记录，然后40条记录按照时间反过来排序，取出前20条记录，再按照时间排序一次，按照正常的顺序读出来。所以，这个分页是三重top组合排序。
Oracle 10i：
SQL：普通的Select语句
FromIndex:从…条
ToIndex:到…条
通用的方式：
select * from (
select row_.*, rownum rownum_ from (
SQL
) row_ where rownum <= toIndex
) where rownum_ > fromIndex
解释一下，还是上面的例子，先按照时间顺序查询出来，rownum是查询结果的序号，如果是第2页的话，取出第0到40（<=toIndex）条帖子。然后取出>20的帖子。
有唯一标识符（ID字段）的情况排序
select * from tableName where ID in(
select ID from (
select rownum rownum_,ID from (
select ID from tableName order by Code
) where rownum <= toIndex
) where rownum_ > fromIndex
)
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Mysql的分页
通用的情况是这样的：
SELECT * FROM message ORDER BY id DESC LIMIT 10000, 20
文中提到一种”clue”的做法，给翻页提供一些”线索”，比如还是SELECT * FROM message ORDER BY id DESC，按id降序分页，每页20条，当前是第10页，当前页条目id最大的是9527，最小的是9500，如果我们只提供”上一页”、”下一页”这样 的跳转（不提供到第N页的跳转），那么在处理”上一页”的时候SQL语句可以是：
SELECT * FROM message WHERE id > 9527 ORDER BY id ASC LIMIT 20;
处理”下一页”的时候SQL语句可以是：
SELECT * FROM message WHERE id < 9500 ORDER BY id DESC LIMIT 20;
不管翻多少页，每次查询只扫描20行。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝MySql这段来自超群博客
我认为这是在原有的分页基础上的一个突破。对于SqlServer和Oracle的分页也很借鉴意义。有条件的可以改写SqlServer和Oracle的翻页Sql，加上Where条件。
如果不加条件限制，可以看到越向后翻，性能是越低的，最后一页就是全表扫描了。如果加上限制，时间几乎是常数了。
分页中，索引也非常重要，在索引列上一定需要建索引，避免全表扫描。
总结起来就几句话：
SqlServer用top，
Oracle用rownum，
MySql用Limit，
排序列建Index，
加上Where条件，
分页高性能。
OK了,如果大家还有不明白的或者调试不成功,留言吧~
事情沉淀了几天,在整理CSS的时候居然有 MARGIN:-100PX; 才发现原来为了定位,之前设定了一个负的值,然后删掉,一切都正常了,没想到CSS居然影响到了JS的定位...