MvcPager 分页示例 — 应用CSS样式


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

@model PagedList<string>

<h5>Digg style:</h5>

@Html.Pager(Model,new PagerOptions{PageIndexParameterName = "id",PagerItemsSeperator = "",CurrentPagerItemWrapperFormatString = "<span class=\"current\">{0}</span>"},new {id="diggpager"})

<h5>meneame style:</h5>

@Html.Pager(Model,new PagerOptions{PageIndexParameterName = "id",PagerItemsSeperator = "",CurrentPagerItemWrapperFormatString = "<span class=\"current\">{0}</span>"},new {id="menepager"})

<h5>Flickr style:</h5>

@Html.Pager(Model,new PagerOptions{PageIndexParameterName = "id",PagerItemsSeperator = "",CurrentPagerItemWrapperFormatString = "<span class=\"current\">{0}</span>"},new {id="flickrpager"})

<h5>Black style:</h5>

@Html.Pager(Model,new PagerOptions{PageIndexParameterName = "id",PagerItemsSeperator = "",CurrentPagerItemWrapperFormatString = "<span class=\"current\">{0}</span>"},new {id="blackpager"})

<h5>Gray style:</h5>

@Html.Pager(Model,new PagerOptions{PageIndexParameterName = "id",PagerItemsSeperator = "",CurrentPagerItemWrapperFormatString = "<span class=\"current\">{0}</span>"},new {id="graypager"})

<h5>badoo style:</h5>

@Html.Pager(Model,new PagerOptions{PageIndexParameterName = "id",PagerItemsSeperator = "",ShowPageIndexBox = true,CurrentPagerItemWrapperFormatString = "<span class=\"current\">{0}</span>"},new {id="badoopager"})

@section Scripts{@{Html.RegisterMvcPagerScriptResource();}}

 

/* digg style*/
div#diggpager {padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center}
div#diggpager a {border-right: #aaaadd 1px solid; padding-right: 5px; border-top: #aaaadd 1px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #aaaadd 1px solid; color: #000099; padding-top: 2px; border-bottom: #aaaadd 1px solid; text-decoration: none}
div#diggpager a:hover {border-right: #000099 1px solid; border-top: #000099 1px solid; border-left: #000099 1px solid; color: #000; border-bottom: #000099 1px solid}
div#diggpager a:active {border-right: #000099 1px solid; border-top: #000099 1px solid; border-left: #000099 1px solid; color: #000; border-bottom: #000099 1px solid}
div#diggpager span.current {border-right: #000099 1px solid; padding-right: 5px; border-top: #000099 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; margin: 2px; border-left: #000099 1px solid; color: #fff; padding-top: 2px; border-bottom: #000099 1px solid; background-color: #000099}
div#diggpager a.disabled {border-right: #eee 1px solid; padding-right: 5px; border-top: #eee 1px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #eee 1px solid; color: #ddd; padding-top: 2px; border-bottom: #eee 1px solid}
/* meneame style*/
div#menepager {padding-right: 3px; padding-left: 3px; font-size: 80%; padding-bottom: 3px; margin: 3px; color: #ff6500; padding-top: 3px;; text-align: center}
div#menepager a {border-right: #ff9600 1px solid; padding-right: 7px; background-position: 50% bottom; border-top: #ff9600 1px solid; padding-left: 7px; background-image: url(images/meneame.jpg); padding-bottom: 5px; border-left: #ff9600 1px solid; color: #ff6500; margin-right: 3px; padding-top: 5px; border-bottom: #ff9600 1px solid; text-decoration: none}
div#menepager a:hover {border-right: #ff9600 1px solid; border-top: #ff9600 1px solid; background-image: none; border-left: #ff9600 1px solid; color: #ff6500; border-bottom: #ff9600 1px solid; background-color: #ffc794}
div#menepager a:active {border-right: #ff9600 1px solid; border-top: #ff9600 1px solid; background-image: none; border-left: #ff9600 1px solid; color: #ff6500; border-bottom: #ff9600 1px solid; background-color: #ffc794}
div#menepager span.current {border-right: #ff6500 1px solid; padding-right: 7px; border-top: #ff6500 1px solid; padding-left: 7px; font-weight: bold; padding-bottom: 5px; border-left: #ff6500 1px solid; color: #ff6500; margin-right: 3px; padding-top: 5px; border-bottom: #ff6500 1px solid; background-color: #ffbe94}
div#menepager a.disabled {border-right: #ffe3c6 1px solid; padding-right: 7px; border-top: #ffe3c6 1px solid; padding-left: 7px; padding-bottom: 5px; border-left: #ffe3c6 1px solid; color: #ffe3c6; margin-right: 3px; padding-top: 5px; border-bottom: #ffe3c6 1px solid}
/*flickr style*/
div#flickrpager {padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px;; text-align: center}
div#flickrpager a {border: #dedfde 1px solid; padding-right: 6px; background-position: 50% bottom; padding-left: 6px; padding-bottom: 2px;  color: #0061de; margin-right: 3px; padding-top: 2px; text-decoration: none}
div#flickrpager a:hover {border: #000 1px solid;background-image: none; color: #fff;background-color: #0061de}
div#flickrpager a:active {border-right: #000 1px solid; border-top: #000 1px solid; background-image: none; border-left: #000 1px solid; color: #fff; border-bottom: #000 1px solid; background-color: #0061de}
div#flickrpager span.current {padding-right: 6px; padding-left: 6px; font-weight: bold; padding-bottom: 2px; color: #ff0084; margin-right: 3px; padding-top: 2px}
div#flickrpager a.disabled {padding-right: 6px; padding-left: 6px; padding-bottom: 2px; color: #adaaad; margin-right: 3px; padding-top: 2px}
/* black-red style*/
div#graypager{font-size: 11px; color: #fff; font-family: tahoma, arial, helvetica, sans-serif; background-color: #3e3e3e;text-align: center;padding:6px 0px}
div#graypager a {padding-right: 5px; padding-left: 5px; padding-bottom: 2px; margin: 2px; color: #fff; padding-top: 2px; background-color: #3e3e3e; text-decoration: none}
div#graypager a:hover {color: #fff; background-color: #ec5210}
div#graypager a:active {color: #fff; background-color: #ec5210}
div#graypager span.current {padding-right: 5px; padding-left: 5px; font-weight: bold; padding-bottom: 2px; margin: 2px; color: #fff; padding-top: 2px; background-color: #313131}
div#graypager a.disabled {padding-right: 5px; padding-left: 5px; padding-bottom: 2px; margin: 2px; color: #868686; padding-top: 2px; background-color: #3e3e3e}
/*black style*/
div#blackpager {padding-right: 3px; padding-left: 3px; font-size: 80%; padding-bottom: 10px; margin: 3px; color: #a0a0a0; padding-top: 10px; background-color: #000; text-align: center}
div#blackpager a {border-right: #909090 1px solid; padding-right: 5px; background-position: 50% bottom; border-top: #909090 1px solid; padding-left: 5px; background-image: url(images/bar.gif); padding-bottom: 2px; border-left: #909090 1px solid; color: #c0c0c0; margin-right: 3px; padding-top: 2px; border-bottom: #909090 1px solid; text-decoration: none}
div#blackpager a:hover {border-right: #f0f0f0 1px solid; border-top: #f0f0f0 1px solid; background-image: url(images/invbar.gif); border-left: #f0f0f0 1px solid; color: #ffffff; border-bottom: #f0f0f0 1px solid; background-color: #404040}
div#blackpager a:active {border-right: #f0f0f0 1px solid; border-top: #f0f0f0 1px solid; background-image: url(images/invbar.gif); border-left: #f0f0f0 1px solid; color: #ffffff; border-bottom: #f0f0f0 1px solid; background-color: #404040}
div#blackpager span.current {border-right: #ffffff 1px solid; padding-right: 5px; border-top: #ffffff 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; border-left: #ffffff 1px solid; color: #ffffff; margin-right: 3px; padding-top: 2px; border-bottom: #ffffff 1px solid; background-color: #606060}
div#blackpager a.disabled {border-right: #606060 1px solid; padding-right: 5px; border-top: #606060 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #606060 1px solid; color: #808080; margin-right: 3px; padding-top: 2px; border-bottom: #606060 1px solid}
/*badoo style*/
div#badoopager {padding-right: 0px; padding-left: 0px; font-size: 13px; padding-bottom: 10px; color: #48b9ef; padding-top: 10px; font-family: arial, helvetica, sans-serif; background-color: #fff; text-align: center}
div#badoopager a {border-right: #f0f0f0 2px solid; padding-right: 5px; border-top: #f0f0f0 2px solid; padding-left: 5px; padding-bottom: 2px; margin: 0px 2px; border-left: #f0f0f0 2px solid; color: #48b9ef; padding-top: 2px; border-bottom: #f0f0f0 2px solid; text-decoration: none}
div#badoopager a:hover {border-right: #ff5a00 2px solid; border-top: #ff5a00 2px solid; border-left: #ff5a00 2px solid; color: #ff5a00; border-bottom: #ff5a00 2px solid}
div#badoopager a:active {border-right: #ff5a00 2px solid; border-top: #ff5a00 2px solid; border-left: #ff5a00 2px solid; color: #ff5a00; border-bottom: #ff5a00 2px solid}
div#badoopager span.current {border-right: #ff5a00 2px solid; padding-right: 5px; border-top: #ff5a00 2px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; border-left: #ff5a00 2px solid; color: #fff; padding-top: 2px; border-bottom: #ff5a00 2px solid; background-color: #ff6c16}
div#badoopager a.disabled {display: none}
div#badoopager input[type=text]{width:30px}
时间： 2024-11-14 12:53:38

MvcPager 分页示例 — 应用CSS样式的相关文章

MvcPager 概述 MvcPager 分页示例 — 标准Ajax分页 对SEO进行优化的ajax分页 (支持asp.net mvc)

该示例演示如何使用MvcPager最基本的Ajax分页模式. 使用AjaxHelper的Pager扩展方法来实现Ajax分页,使用Ajax分页模式时,必须至少指定MvcAjaxOptions的UpdateTargetId属性,该属性值即是分页后要通过Ajax来更新的 DOM 元素的 ID. Ajax.Pager()方法返回AjaxPager对象,您可以通过Ajax.Pager()方法的重载来传递PagerOptions和MvcAjaxOptions参数,也可以通过新的AjaxPager的Opti

分页css样式 class引用

.page_nav{clear:both; padding:15px 0; color:#666; font:normal 12px/24px Arial; text-align:center;}.page_nav a{display:inline-block; height:22px; margin:0 2px; padding:0 8px; text-decoration:none; border:solid 1px #dbe5ee; -moz-border-radius:2px; -web

SenchaTouch2.3.1 中使用listpaging以及pullrefresh插件 做的分页示例

本实例其实也比较简单,自己定义一个PullRefreshFn插件继承Ext.plugin.PullRefresh. 主要给其添加了refreshFn下拉监听事件.listpaging插件未做任何修改.再将这两个插件添加到 list中. 本例未采用MVC模式. app.js代码如下: Ext.require(['Ext.form.Panel', 'Ext.data.Store', 'Ext.dataview.DataView']); //------------------------------

网站开发综合技术 第二部分 CSS样式表

第2部分 CSS样式表 CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/    注释语法 2.1.样式表的基本概念 2.1.1.样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里边. <style type= "

HTML+CSS样式设置——CSS一学就会

HTML+CSS样式设置 CSS:(Cascading Style Sheets)层叠样式设置表. 网页的展示效果跟其排版有很大的关系.排版则主要依靠CSS来设置.调节. 下面说CSS与HTML的联合使用的过程: (1)新建CSS文件(一般放在与HTML文件同一路径下的css文件夹中) (2)在HTML的<head>标签中,用<link />对CSS进行引用 <link rel="stylesheet" type="text/css" 

bootstrap 全局 CSS 样式

http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型.在你项目中的每个页面都要参照下面的格式进行设置. 复制 <!DOCTYPE html> <html lang="zh-CN"> ...

一个简陋的 CSS 样式

有些网友对 Smart Framewok 中的 Sample 示例的样式比较感兴趣.由于本人对前端不太精通,但为了满足网友们的需求,只好献丑了. 以下这个简陋的 CSS 样式: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

CSS 样式二

CSS文本样式 text-align:设置文本的对齐方式 取值: left 向左对齐 right:向右对齐 center:居中对齐 text-indent:设置文本的首行缩进 ????例如,字体设为12px,首行缩进另个字,24px. text-decoration:设置文本的装饰线 ????????取值: ????????none 不设置文本装饰线 ????????underline:设置下划线 ????????overline:上划线 ????????line-through:中划线 tex

css样式编写规范参考

第一章     HTML & CSS 1.1    样式种类 i.               浏览器默认样式 ii.               带有样式的标签 iii.               内联样式 iv.               style 标签 v.               link 引入样式文件 1.2    结构与表现分离 结构与表现分离, 即 html结构与 css 样式分离, 这样做的好处是: 当页面的样式需要改变时, 仅需要更改样式所在的 css文件, 而不用去