<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>用react写表单验证</title>

    <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>

    <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>

    <script src="http://static.runoob.com/assets/react/browser.min.js"></script>

    <style>

    .fl{float: left;}

    .fr{float: right;}

    .ui-pagnation {display: block; margin-top: 50px; color: #535353; line-height: 29px; text-align: center }

    .ui-pagnation a {float: left; min-width: 30px; height: 30px; padding: 0 7px; vertical-align: middle; text-decoration: none; cursor: pointer;}

    .ui-pagnation .next,.ui-pagnation .prev {margin: 0 9px; background-color: #f3f4f8; border: 1px solid #00a0e9 }

    .ui-pagnation .next:before,.ui-pagnation .prev:before {content: '<'; color: #00a0e9; font-size: 14px }

    .ui-pagnation .next:hover,.ui-pagnation .prev:hover {border-color: #50c8ff }

    .ui-pagnation .next:hover:before,.ui-pagnation .prev:hover:before {color: #50c8ff }

    .ui-pagnation .disable.next,.ui-pagnation .prev.disable {background-color: #f3f4f8; border-color: #a0a0a0; cursor: no-drop;}

    .ui-pagnation .disable.next:before,.ui-pagnation .prev.disable:before {color: #a0a0a0 }

    .ui-pagnation .next:before {content: '>'}

    .ui-pagnation .num {margin-left: -1px; padding: 0 7px; border: 1px solid #e5e5e5; color: #707070 }

    .ui-pagnation .num.current,.ui-pagnation .num:hover {background-color: #a7bbcb; border-color: #a7bbcb; color: #fff }

    .ui-pagnation .ellipsis {width: 42px; height: 30px; color: #707070; line-height: 30px }

    .ui-pagnation input {width: 44px; height: 24px; border: 1px solid #eee; text-align: center }

    .ui-pagnation .page-go {min-width: 60px; margin-left: 10px; margin-right: 10px; background-color: #a7bbcb; border: 1px solid #879cac; color: #fff }

    .ui-pagnation .page-go:hover {background-color: #87a2b8; border-color: #698397 }

    </style>

</head>

<body>

<div id="demo"></div>

<script type="text/babel">

var Page = React.createClass({

    getInitialState: function() {

        return {current: 1, value : ''};

    },

    handClick : function(e){

        let sel = this;

        return function(){

            sel.setState({current : e});

        }

    },

    handChange : function(e){

        this.setState({value : e.target.value})

    },

    goNext : function(){

        let cur = this.state.current;

        if(cur < this.props.total){

            this.setState({current : cur + 1});

        }

    },

    goPrev : function(){

        let cur = this.state.current;

        if(cur > 1){

            this.setState({current : cur - 1});

        }

    },

    goPage : function(){

        var val = this.state.value;

        if(!/^[1-9]\d*$/.test(val)){

            alert('页码只能输入大于1的正整数');

        }else if(parseInt(val) > parseInt(this.props.total)){

            alert('没有这么多页');

        }else{

            this.setState({current : val});

        }

    },

    render : function(){

        let self = this;

        let total = this.props.total;

        let cur = this.state.current;

        let items = [];

        let begin;

        let len;

        if(total > 5){

            len = 5;

            if(cur >= (total-2)){

                begin = total - 4;

            }else if(cur <= 3){

                begin = 1;

            }else{

                begin = cur - 2;

            }

        }else{

            len = total;

            begin = 1;

        }

        for(let i = 0; i < len; i ++){

            let cur = this.state.current;

            let showI = begin + i;

            if(cur == showI){

                items.push({num : showI, cur : true});

            }else{

                items.push({num : showI, cur : false});

            }

        }

        return  <div className="ui-pagnation">

                    <a className={this.state.current == 1? 'prev disable' : 'prev'} onClick={this.goPrev}></a>

                    <span className="pagnation-cols">

                        {

                            items.map(function(item){

                                return <a onClick={self.handClick(item.num)} className={item.cur? 'num current' : 'num'}>{item.num}</a>

                            })

                        }

                    </span>

                    <a className={this.state.current == this.props.total? 'next disable' : 'next'} onClick={this.goNext}></a>

                    <div className="fl">

                        共

                        <span className="num-total">{total}</span>

                        页，到第

                        <input type="text" value={self.state.value} onChange={this.handChange} />

                        页

                    </div>

                    <a onClick={this.goPage} className="page-go">确定</a>

                </div>

    }

});

ReactDOM.render(

    <div>

        <Page total="20" />

    </div>,

    document.getElementById('demo')

);

</script>

</body>

</html>

React,js实现分页的案列的更多相关文章

  1. react 的安装和案列Todolist

    react 的安装和案列Todolist 1.react的安装和环境的配置 首先检查有没有安装node.js和npm node -v npm -v 查看相关版本 2.安装脚手架工具 2.构建:crea ...

  2. js闭包的作用域以及闭包案列的介绍：

    转载▼ 标签: it   js闭包的作用域以及闭包案列的介绍:   首先我们根据前面的介绍来分析js闭包有什么作用,他会给我们编程带来什么好处? 闭包是为了更方便我们在处理js函数的时候会遇到以下的几 ...

  3. Spring MVC的配置文件(XML)的几个经典案列

    1.既然是配置文件版的,那配置文件自然是必不可少,且应该会很复杂,那我们就以一个一个的来慢慢分析这些个经典案列吧! 01.实现Controller /* * 控制器 */ public class M ...

  4. js前端分页之jQuery

    锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比 ...

  5. Spring Data Jpa+SpringMVC+Jquery.pagination.js实现分页

    本博客介绍基于Spring Data这款orm框架加上Jquery.pagination插件实现的分页功能. 介绍一下Spring Data框架 spring Data : Spring 的一个子项目 ...

  6. 大数据技术之_14_Oozie学习_Oozie 的简介+Oozie 的功能模块介绍+Oozie 的部署+Oozie 的使用案列

    第1章 Oozie 的简介第2章 Oozie 的功能模块介绍2.1 模块2.2 常用节点第3章 Oozie 的部署3.1 部署 Hadoop(CDH版本的)3.1.1 解压缩 CDH 版本的 hado ...

  7. React.js 小书 Lesson22 - props.children 和容器类组件

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson22 转载请注明出处,保留原文链接和作者信息. 有一类组件,充当了容器的作用,它定义了一种外层 ...

  8. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  9. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

随机推荐

  1. ASP.NET发布后,功能不响应

    题记:稀奇古怪的错误,往往是由低级脑残错误产生的 ASP.NET网站,本地调试一切正常.部署到服务器后,结果登陆按钮就卡住了,点击就是没反应. 浏览器显示Internal Server Error 5 ...

  2. 利用background-attachment做视差滚动效果

    视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 不明白的可以先看 ...

  3. iPhone6分辨率与适配

    iPhone6分辨率与适配 分辨率和像素 经新xcode6模拟器验证(分辨率为pt,像素为真实pixel): iPhone5分辨率320x568,像素640x1136,@2x iPhone6分辨率37 ...

  4. xshell连接本地虚拟机

    打开虚拟机输出命令ifconfig 然后使用xshell,连接这个地址即可 如果没有ip地址的话,这可以用“ifconfig eth0 ip地址 比如ifconfig eth0 192.3168.16 ...

  5. PHP filesystem attack vectors

    http://www.ush.it/2009/02/08/php-filesystem-attack-vectors/ On Apr 07, 2008 I spoke with Kuza55 and ...

  6. JAVA6开发WebService （二）——JAX-WS例子

    转载自http://wuhongyu.iteye.com/blog/807836 上一篇写了个最简单的小例子,只是为了说明JAVA6开发Web Service很方便,这一篇稍微深入一点,写个稍微有点代 ...

  7. SQL Server 触发器（转）

    触发器是一种特殊类型的存储过程,它不同于之前的我们介绍的存储过程.触发器主要是通过事件进行触发被自动调用执行的.而存储过程可以通过存储过程的名称被调用. Ø 什么是触发器 触发器对表进行插入.更新.删 ...

  8. A Great Alchemist

    Time limit : 2sec / Stack limit : 256MB / Memory limit : 256MB ProblemCarol is a great alchemist. In ...

  9. profile

    项目开发中,使用git最为版本控制工具,往往会建立开发分支.测试分支和生产分支. 各个分支的数据库url,所依赖的接口url可能不同,直接配置的话,在合并分支时往往出现冲突.使用profile可以有效 ...

  10. 使用 readfile() 下载文件

    下载图片 <?php $file = 'monkey.gif'; if (file_exists($file)) { header('Content-Description: File Tran ...