store-ui/scroll.js

store-ui

/**
 * @desc
 *
 * @使用场景
 *
 * @author  杨晓东[of1081]
 * @company qianmi.com
 * @Date    15/7/29
 **/

'use strict';

var React = require('react');
var Immutable = require('immutable');
var PureRenderMixin = require('react/addons').addons.PureRenderMixin;
var $S = require('scriptjs');

var Scroll = React.createClass({
   mixins: [PureRenderMixin],

  /**
   * 初始化属性
   */
   getDefaultProps(){
     return {}
   },
  /**
   * 初始化状态
   */
   getInitialState (){
       return  {};
   },


  /**
   * 绑定自定义事件
   */
  componentDidMount() {
	  //TODO dong js路径要换的．
	  $S('http://uelab.org/yunxiao/store/demo/commontheme/js/jcarousellite_1.0.1.js',()=>{
		  $(this.getDOMNode()).find(".new-proscoll").jCarouselLite({
			  btnNext: ".j-next",
			  btnPrev: ".j-prev",
			  auto: 3600,
			  speed: 500,
			  visible: 4,
			  onMouse: true,
			  scroll: 4
		  });
	  });
  },


  /**
   * remove自定义事件
   */
  componentWillUnmount() {
  },


  /**
   * virtualdom
   * @returns {XML}
   */
  render() {
    return ( <div className="his-srcoll">
		    <div className="new-proscoll" style={{visibility: 'visible', overflow: 'hidden', position: 'relative', zIndex: 2, left: 0, width: 948}}>
			    <ul style={{margin: 0, padding: 0, position: 'relative', listStyleType: 'none', zIndex: 1, width: 2844, left: '-1896px'}}>
				    {this.props.children}
			    </ul>
		    </div>
		    <a className="j-prev" href="javascript:;" />
		    <a className="j-next" href="javascript:;" />
	    </div>
    );
  }
});

 module.exports=Scroll;