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}

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

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

    该示例演示如何使用MvcPager最基本的Ajax分页模式. 使用AjaxHelper的Pager扩展方法来实现Ajax分页,使用Ajax分页模式时,必须至少指定MvcAjaxOptions的Upda ...

  2. CSS样式表、JS脚本加载顺序与SpringMVC在URL路径中传参数与SpringMVC 拦截器

    CSS样式表和JS脚本加载顺序 Css样式表文件要在<head>中先加载,这样网页显示时可以第一次就渲染出正确的布局和样式,网页就不会闪烁,或跳变 JS脚本尽可能放在<body> ...

  3. css样式加载顺序及覆盖顺序深入理解

    注:内容转载 很多的新手朋友们对css样式加载顺序和覆盖顺序的理解有所偏差,下面用示例为大家详细的介绍下,感兴趣的朋友不要错过 { height: 100%; width: 200; position ...

  4. CSS样式常用属性整理

    web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...

  5. 权重和层叠规则决定了CSS样式优先级

    一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级别的优先级如下: important > 内联 > ID > 类 > 标签 | ...

  6. Chrome开发工具Elements面板(编辑DOM和CSS样式)详解

    Element 译为“元素”,Element 面板可以让我们动态查看和编辑DOM节点和CSS样式表,并且立即生效,避免了频繁切换浏览器和编辑器的麻烦. 我们可以使用Element面板来查看源代码,它不 ...

  7. HTML静态网页 css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...

  8. css 样式表

    CSS(cascading style sheets,层叠样式表),作用是美化HTML网页. /*注释*/   注释语法 2.1 样式表的基本概念 2.1.1样式表的分类 1.内联样式表 和HTML联 ...

  9. HTML前端——CSS样式

    使用CSS样式的方式: HTML<!DOCTYPE> 声明标签 内链样式表<body style="background: green; margin: 0; paddin ...

随机推荐

  1. poj 2002(好题 链式hash+已知正方形两点求另外两点)

    Squares Time Limit: 3500MS   Memory Limit: 65536K Total Submissions: 18493   Accepted: 7124 Descript ...

  2. HTML+JavaScript制作表白特效，表白不成功，小编现场吃雪

    今年的雪特别美,长沙自从08年后的最大的一场学了,今天小编给大家制作一个表白特效,希望大家喜欢,如果你是程序员希望对你有帮助,追到你喜欢的女孩,哈哈~追不到对象,小编现场吃学给你大家看 下图是爱心飘落 ...

  3. VS2010安装包制作

    最近对软件安装包制作研究了一下,下面记录了一种比较简单,不用写代码的方法. 1.New Project---->Other Project Types ---->Visual Studio ...

  4. docker环境准备及理论

    1.预热 内核运行在内核空间,进程运行在用户空间,linux进程特性:父进程负责子进程的创建和回收,白发人送黑发人.容器就是为了保护它里面的内容物,不受其他容器干扰,也不去干扰其他容器.容器让进程认为 ...

  5. Spring bean初始化以及管理

    在完成bean实例化后,spring会根据配置文件的设定情况对bean 的属性进行初始化, 1.autowire方式 (可查找自动装配对象 但bean中要有相应属性的set方法)这是一个自动装配的机制 ...

  6. Codeforces 908 D New Year and Arbitrary Arrangement

    Discription You are given three integers k, pa and pb. You will construct a sequence with the follow ...

  7. POJ 2987 Firing（最大权闭合图）

    [题目链接] http://poj.org/problem?id=2987 [题目大意] 为了使得公司效率最高,因此需要进行裁员, 裁去不同的人员有不同的效率提升效果,当然也有可能是负的效果, 如果裁 ...

  8. linux coreseek-4.1安装

    1.假设已经有coreseek-4.1-beta.tar.gz源文件 [root@qp232 ~]# cd /usr/local [root@qp232 local]# tar -zxvf /yd/l ...

  9. VisualStudio Shell简介 — 界面定制

    项目组成 首先我们来看一下模板自动生成的工程文件:      它包括两个C++工程和两个C#工程,首先我们来看两个C++的工程: VSShellStub1, 这个是系统的启动项,它是最终的exe文件的 ...

  10. Proxy server got bad address from remote server

    在ArcMap中,在GIS Servrvers中,打开已经设置好的服务器时,出现下面的弹窗问题. Proxy server got bad address from remote server(ver ...