下面将演示如何将上述控件改为如下样式:
修改如下:
找到PagerOptions.cs文件,
AutoHide = true; PageIndexParameterName = "pageIndex"; NumericPagerItemCount = 2; AlwaysShowFirstLastPageNumber = false; ShowPrevNext = true; PrevPageText = " ";// LangHelper.WordGet("上一页");//"上一页"; NextPageText = " ";//LangHelper.WordGet("下一页");// "下一页"; ShowNumericPagerItems = true; ShowFirstLast = false; //FirstPageText = LangHelper.WordGet("首页");//"首页"; //LastPageText = LangHelper.WordGet("尾页");//"尾页"; ShowMorePagerItems = true; MorePageText = "..."; ShowDisabledPagerItems = true; SeparatorHtml = " "; UseJqueryAjax = false; ShowPageIndexBox = false; ShowGoButton = true; PageIndexBoxType = PageIndexBoxType.TextBox; MaximumPageIndexItems = 1; GoButtonText = LangHelper.WordGet("跳转");//"跳转"; ContainerTagName = "div"; InvalidPageIndexErrorMessage = LangHelper.WordGet("页索引无效");//"页索引无效"; PageIndexOutOfRangeErrorMessage = LangHelper.WordGet("页索引超出范围");//"页索引超出范围"; MaxPageIndex = 0;
找到PagerBuilder.cs文件中将原方法GenerateAnchor追加以下代码:
tag.MergeAttribute("href", url);//原来代码位置开始 switch (item.Type) { case PagerItemType.PrevPage: tag.MergeAttribute("class", "enablePreClass"); break; case PagerItemType.NextPage: tag.MergeAttribute("class", "enableNextClass"); break; case PagerItemType.NumericPage: tag.MergeAttribute("class", "enableNumClass"); break; case PagerItemType.MorePage: tag.MergeAttribute("class", "enableNumClass"); break; } tag.MergeAttributes(_ajaxOptions.ToUnobtrusiveHtmlAttributes());//原来代码位置结束
再这个文件相应方法做如下修改:
private MvcHtmlString GenerateJqAjaxPagerElement(PagerItem item) { if (item.Disabled) { string str = ""; switch (item.Type) { case PagerItemType.PrevPage: str = String.Format("<a class=\"disabledPreClass\" disabled=\"disabled\">{0}</a>", item.Text); break; case PagerItemType.NextPage: str = String.Format("<a class=\"disabledNextClass\" disabled=\"disabled\">{0}</a>", item.Text); break; case PagerItemType.NumericPage: str = String.Format("<a class=\"disabledNumClass\" disabled=\"disabled\">{0}</a>", item.Text); break; case PagerItemType.MorePage: str = String.Format("<a class=\"disabledNumClass\" disabled=\"disabled\">{0}</a>", item.Text); break; } return CreateWrappedPagerElement(item, str); } else { return CreateWrappedPagerElement(item, GenerateAnchor(item)); } }
前台Css样式:
.enableNumOrClass{margin-top:20px;} .enableNumOrClass a{display:inline-block;padding:0 8px;height:18px;line-height:18px;text-decoration:none;color:#000000;} .disabledPreClass{background:url(../images/next_Icon0.png) no-repeat center 1px;} .enablePreClass{background:url(../images/next_Icon0.png) no-repeat center -19px;} .enableNextClass{background:url(../images/next_Icon0.png) no-repeat center -59px;} .disabledNextClass{background:url(../images/next_Icon0.png) no-repeat center -40px;} .enableNumClass{border:1px solid #cecece;background:#f9f9f9;}
那个向上向下的箭头图片: