<!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. form表单提交controller层接收到的值为乱码的问题

    今天遇到个中文乱码问题,大体情况是这样的:前台有一个form表单,其中有几个input的控件,值是带中文的,form表单只设置了id='form1' method='post'  action='xx ...

  2. MVC概念性的内容

    MVC:    是一个缩写(model + view + control),      Model:是一些类文件,  功能:负责增删改查, 负责跟数据库打交道 (把数据存入到数据库: 从数据库把数据读 ...

  3. 让dede运行php代码和mysql语句

    一.dede运行php代码 举例1: {dede:name runphp='yes'} $str = "hello ";@me = $str;@me .= "world& ...

  4. # 20145334赵文豪 《Java程序设计》第7周学习总结

    20145334赵文豪 <Java程序设计>第7周学习总结 教材学习内容总结 第十三章 时间与日期 13.1.1时间的度量 1.格林威治时间(GMT):参考太阳到达最高点,有时间误差. 2 ...

  5. 3G網絡容量和業務承載的壓力大大增加！

    在移動通信話音業務繼續保持發展的同時,對IP和高速數據業務的支持已經成為移動通信系統演進的方向.移動數據業務是推動目前移動通信技術發展的主要動力,TD-LTE作為準4G技術,以提高數據速率和頻譜利用率 ...

  6. IOS第18天(6,CAKeyframeAnimation关键帧动画）

    ******* #import "HMViewController.h" @interface HMViewController () @property (weak, nonat ...

  7. Apache Spark技术实战之4 -- 利用Spark将json文件导入Cassandra

    欢迎转载,转载请注明出处. 概要 本文简要介绍如何使用spark-cassandra-connector将json文件导入到cassandra数据库,这是一个使用spark的综合性示例. 前提条件 假 ...

  8. QTP功能点笔记

    1.QTP启动应用程序的几种方法 1)用SystemUtil.Run 1 SystemUtil.Run "C:\Program Files (x86)\HP\QuickTest Profes ...

  9. Apache按日切分日志

    apache按日切分日志,使用apache自带的rotatelogs切分 语法: rotatelogs [ -l ] logfile [ rotationtime [ offset ]] | [ fi ...

  10. android:layout_gravity 和 android:gravity 的区别

    gravity 这个英文单词是重心的意思,在这里就表示停靠位置的意思. android:layout_gravity 和 android:gravity 的区别 从名字上可以看到,android:gr ...