This commit is contained in:
再飞
2015-10-15 11:43:54 +08:00
parent 69b3bfb555
commit 0fe07f26f4
7 changed files with 67 additions and 50 deletions
+1 -1
View File
@@ -1 +1 @@
{"version":3,"sources":["webpack:///webpack/bootstrap f73b527d6d8fc277bef8"],"names":[],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAQ,oBAAoB;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,uBAAe;AACf;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,wEAAgE,aAAa;AAC7E;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA","file":"common.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, callbacks = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId])\n \t\t\t\tcallbacks.push.apply(callbacks, installedChunks[chunkId]);\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);\n \t\twhile(callbacks.length)\n \t\t\tcallbacks.shift().call(null, __webpack_require__);\n \t\tif(moreModules[0]) {\n \t\t\tinstalledModules[0] = 0;\n \t\t\treturn __webpack_require__(0);\n \t\t}\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// \"0\" means \"already loaded\"\n \t// Array means \"loading\", array contains callbacks\n \tvar installedChunks = {\n \t\t1:0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n \t// This file contains only the entry chunk.\n \t// The chunk loading function for additional chunks\n \t__webpack_require__.e = function requireEnsure(chunkId, callback) {\n \t\t// \"0\" is the signal for \"already loaded\"\n \t\tif(installedChunks[chunkId] === 0)\n \t\t\treturn callback.call(null, __webpack_require__);\n\n \t\t// an array means \"currently loading\".\n \t\tif(installedChunks[chunkId] !== undefined) {\n \t\t\tinstalledChunks[chunkId].push(callback);\n \t\t} else {\n \t\t\t// start chunk loading\n \t\t\tinstalledChunks[chunkId] = [callback];\n \t\t\tvar head = document.getElementsByTagName('head')[0];\n \t\t\tvar script = document.createElement('script');\n \t\t\tscript.type = 'text/javascript';\n \t\t\tscript.charset = 'utf-8';\n \t\t\tscript.async = true;\n\n \t\t\tscript.src = __webpack_require__.p + \"\" + chunkId + \".\" + ({\"0\":\"simple\"}[chunkId]||chunkId) + \".js\";\n \t\t\thead.appendChild(script);\n \t\t}\n \t};\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap f73b527d6d8fc277bef8\n **/"],"sourceRoot":""}
{"version":3,"sources":["webpack:///webpack/bootstrap 9f2ab6b87963b1c0ffdc"],"names":[],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAQ,oBAAoB;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,uBAAe;AACf;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,wEAAgE,aAAa;AAC7E;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA","file":"common.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, callbacks = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId])\n \t\t\t\tcallbacks.push.apply(callbacks, installedChunks[chunkId]);\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);\n \t\twhile(callbacks.length)\n \t\t\tcallbacks.shift().call(null, __webpack_require__);\n \t\tif(moreModules[0]) {\n \t\t\tinstalledModules[0] = 0;\n \t\t\treturn __webpack_require__(0);\n \t\t}\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// \"0\" means \"already loaded\"\n \t// Array means \"loading\", array contains callbacks\n \tvar installedChunks = {\n \t\t1:0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n \t// This file contains only the entry chunk.\n \t// The chunk loading function for additional chunks\n \t__webpack_require__.e = function requireEnsure(chunkId, callback) {\n \t\t// \"0\" is the signal for \"already loaded\"\n \t\tif(installedChunks[chunkId] === 0)\n \t\t\treturn callback.call(null, __webpack_require__);\n\n \t\t// an array means \"currently loading\".\n \t\tif(installedChunks[chunkId] !== undefined) {\n \t\t\tinstalledChunks[chunkId].push(callback);\n \t\t} else {\n \t\t\t// start chunk loading\n \t\t\tinstalledChunks[chunkId] = [callback];\n \t\t\tvar head = document.getElementsByTagName('head')[0];\n \t\t\tvar script = document.createElement('script');\n \t\t\tscript.type = 'text/javascript';\n \t\t\tscript.charset = 'utf-8';\n \t\t\tscript.async = true;\n\n \t\t\tscript.src = __webpack_require__.p + \"\" + chunkId + \".\" + ({\"0\":\"simple\"}[chunkId]||chunkId) + \".js\";\n \t\t\thead.appendChild(script);\n \t\t}\n \t};\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap 9f2ab6b87963b1c0ffdc\n **/"],"sourceRoot":""}
+11 -10
View File
@@ -91,13 +91,14 @@
.rc-slider-disabled .rc-slider-track {
background-color: #ccc;
}
.rc-slider-disabled .rc-slider-handle {
.rc-slider-disabled .rc-slider-handle,
.rc-slider-disabled .rc-slider-dot {
border-color: #ccc;
background-color: #fff;
cursor: not-allowed;
}
.rc-slider-disabled .rc-slider-mark-text,
.rc-slider-disabled .dot {
.rc-slider-disabled .rc-slider-dot {
cursor: not-allowed !important;
}
.rc-slider-tooltip {
@@ -167,14 +168,14 @@
}
.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
-webkit-animation-name: rcSliderTooltipZoomDownOutIn;
animation-name: rcSliderTooltipZoomDownOutIn;
-webkit-animation-name: rcSliderTooltipZoomDownIn;
animation-name: rcSliderTooltipZoomDownIn;
-webkit-animation-play-state: running;
animation-play-state: running;
}
.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
-webkit-animation-name: rcSliderTooltipZoomDownOutOut;
animation-name: rcSliderTooltipZoomDownOutOut;
-webkit-animation-name: rcSliderTooltipZoomDownOut;
animation-name: rcSliderTooltipZoomDownOut;
-webkit-animation-play-state: running;
animation-play-state: running;
}
@@ -190,7 +191,7 @@
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}
@-webkit-keyframes rcSliderTooltipZoomDownOutIn {
@-webkit-keyframes rcSliderTooltipZoomDownIn {
0% {
opacity: 0;
-webkit-transform-origin: 50% 100%;
@@ -205,7 +206,7 @@
transform: scale(1, 1);
}
}
@keyframes rcSliderTooltipZoomDownOutIn {
@keyframes rcSliderTooltipZoomDownIn {
0% {
opacity: 0;
-webkit-transform-origin: 50% 100%;
@@ -220,7 +221,7 @@
transform: scale(1, 1);
}
}
@-webkit-keyframes rcSliderTooltipZoomDownOutOut {
@-webkit-keyframes rcSliderTooltipZoomDownOut {
0% {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
@@ -235,7 +236,7 @@
transform: scale(0, 0);
}
}
@keyframes rcSliderTooltipZoomDownOutOut {
@keyframes rcSliderTooltipZoomDownOut {
0% {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
File diff suppressed because one or more lines are too long
+12 -11
View File
@@ -239,7 +239,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<body>
<div class="container">
<div class="header">
<h1>rc-slider@1.5.0</h1>
<h1>rc-slider@1.5.1</h1>
<p>slider ui component for react</p>
</div>
@@ -247,21 +247,22 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<script src="common.js?nowrap"></script>
<script src="simple.js?nowrap"></script>
<div class="highlight">
<pre><code><span class="hljs-string">'use strict'</span>;
<pre><code><span class="xml">'use strict';
<span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider/assets/index.css'</span>);
require('rc-slider/assets/index.css');
<span class="hljs-reserved">var</span> Slider = <span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider'</span>);
<span class="hljs-reserved">var</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
var Slider = require('rc-slider');
var React = require('react');
<span class="hljs-reserved">function</span> onChange(v){
<span class="hljs-built_in">console</span>.log(v);
function onChange(v){
console.log(v);
}
<span class="hljs-regexp">//</span> React.render(&lt;div style={{<span class="hljs-attribute">width</span>:<span class="hljs-number">400</span>,<span class="hljs-attribute">margin</span>:<span class="hljs-number">100</span>}}&gt;&lt;Slider marks={[<span class="hljs-string">"一"</span>,<span class="hljs-string">"二"</span>,<span class="hljs-string">"三"</span>,<span class="hljs-string">"四"</span>,<span class="hljs-string">"五"</span>]} defaultIndex={<span class="hljs-number">2</span>} /&gt;&lt;/div&gt;, <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'__react-content'</span>));
<span class="hljs-regexp">//</span> React.render(&lt;div style={{<span class="hljs-attribute">width</span>:<span class="hljs-number">400</span>,<span class="hljs-attribute">margin</span>:<span class="hljs-number">100</span>}}&gt;&lt;Slider className=<span class="hljs-string">'rc-slider'</span> step={<span class="hljs-number">20</span>}/&gt;&lt;/div&gt;, <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'__react-content'</span>));
React.render(&lt;div style={{<span class="hljs-attribute">width</span>:<span class="hljs-number">400</span>,<span class="hljs-attribute">margin</span>:<span class="hljs-number">100</span>}}&gt;&lt;Slider onChange={onChange} tipTransitionName=<span class="hljs-string">'rc-slider-tooltip-zoom-down'</span>/&gt;&lt;/div&gt;, <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'__react-content'</span>));
</code></pre>
// React.render(<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=</span></span><span class="hljs-expression">{{<span class="hljs-variable">width</span>:400,<span class="hljs-variable">margin</span>:100}}</span><span class="xml"><span class="hljs-tag">&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">marks</span>=<span class="hljs-value">{["一","二","三","四","五"]}</span> <span class="hljs-attribute">defaultIndex</span>=<span class="hljs-value">{2}</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>, document.getElementById('__react-content'));
// React.render(<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=</span></span><span class="hljs-expression">{{<span class="hljs-variable">width</span>:400,<span class="hljs-variable">margin</span>:100}}</span><span class="xml"><span class="hljs-tag">&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">withDots</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">'rc-slider'</span> <span class="hljs-attribute">step</span>=<span class="hljs-value">{20}</span>/&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>, document.getElementById('__react-content'));
// React.render(<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=</span></span><span class="hljs-expression">{{<span class="hljs-variable">width</span>:400,<span class="hljs-variable">margin</span>:100}}</span><span class="xml"><span class="hljs-tag">&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">'rc-slider'</span> <span class="hljs-attribute">step</span>=<span class="hljs-value">{20}</span>/&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>, document.getElementById('__react-content'));
React.render(<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=</span></span><span class="hljs-expression">{{<span class="hljs-variable">width</span>:400,<span class="hljs-variable">margin</span>:100}}</span><span class="xml"><span class="hljs-tag">&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{onChange}</span> <span class="hljs-attribute">tipTransitionName</span>=<span class="hljs-value">'rc-slider-tooltip-zoom-down'</span>/&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>, document.getElementById('__react-content'));
</span></code></pre>
</div>
</div>
<a href="http://github.com/react-component/slider"><img style="position: absolute; top: 0; right: 0; border: 0;"
+33 -24
View File
@@ -21,6 +21,7 @@ webpackJsonp([0,1],[
}
// React.render(<div style={{width:400,margin:100}}><Slider marks={["一","二","三","四","五"]} defaultIndex={2} /></div>, document.getElementById('__react-content'));
// React.render(<div style={{width:400,margin:100}}><Slider withDots className='rc-slider' step={20}/></div>, document.getElementById('__react-content'));
// React.render(<div style={{width:400,margin:100}}><Slider className='rc-slider' step={20}/></div>, document.getElementById('__react-content'));
React.render(React.createElement(
'div',
@@ -137,7 +138,8 @@ webpackJsonp([0,1],[
onBeforeChange: _react2['default'].PropTypes.func,
onChange: _react2['default'].PropTypes.func,
onAfterChange: _react2['default'].PropTypes.func,
tipTransitionName: _react2['default'].PropTypes.string
tipTransitionName: _react2['default'].PropTypes.string,
withDots: _react2['default'].PropTypes.bool
},
getDefaultProps: function getDefaultProps() {
@@ -152,7 +154,8 @@ webpackJsonp([0,1],[
prefixCls: 'rc-slider',
disabled: false,
defaultIndex: 0,
tipTransitionName: ''
tipTransitionName: '',
withDots: false
};
},
@@ -289,35 +292,41 @@ webpackJsonp([0,1],[
renderSteps: function renderSteps() {
var props = this.props;
var marksLen = props.marks.length;
var stepNum = marksLen > 0 ? marksLen : Math.floor((props.max - props.min) / props.step) + 1;
var unit = 100 / (stepNum - 1);
var withDots = props.withDots;
var prefixCls = props.prefixCls;
var stepClassName = prefixClsFn(prefixCls, 'step');
if (marksLen || withDots) {
var stepNum = marksLen ? marksLen : Math.floor((props.max - props.min) / props.step) + 1;
var unit = 100 / (stepNum - 1);
var elements = [];
for (var i = 0; i < stepNum; i++) {
var offset = unit * i + '%';
var style = {
left: offset
};
var className = prefixClsFn(prefixCls, 'dot');
if (props.isIncluded) {
if (i <= this.getIndex()) {
className = prefixClsFn(prefixCls, 'dot', 'dot-active');
var prefixCls = props.prefixCls;
var stepClassName = prefixClsFn(prefixCls, 'step');
var elements = [];
for (var i = 0; i < stepNum; i++) {
var offset = unit * i + '%';
var style = {
left: offset
};
var className = prefixClsFn(prefixCls, 'dot');
if (props.isIncluded) {
if (i <= this.getIndex()) {
className = prefixClsFn(prefixCls, 'dot', 'dot-active');
}
} else {
className = i === this.getIndex() ? prefixClsFn(prefixCls, 'dot', 'dot-active') : className;
}
} else {
className = i === this.getIndex() ? prefixClsFn(prefixCls, 'dot', 'dot-active') : className;
elements[i] = _react2['default'].createElement('span', { className: className, style: style, ref: 'step' + i, key: 'step' + i });
}
elements[i] = _react2['default'].createElement('span', { className: className, style: style, ref: 'step' + i, key: 'step' + i });
return _react2['default'].createElement(
'div',
{ className: stepClassName },
elements
);
}
return _react2['default'].createElement(
'div',
{ className: stepClassName },
elements
);
return null;
},
renderMark: function renderMark(i) {
File diff suppressed because one or more lines are too long
+8 -2
View File
@@ -7,7 +7,7 @@
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<title>rc-slider@1.5.0 - slider ui component for react</title>
<title>rc-slider@1.5.1 - slider ui component for react</title>
<style>
@font-face {
font-family: octicons-anchor;
@@ -737,7 +737,7 @@
<body>
<div class="header">
<h1>rc-slider@1.5.0</h1>
<h1>rc-slider@1.5.1</h1>
</div>
<div class="examples">
<h3>EXAMPLES</h3>
@@ -854,6 +854,12 @@ React.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-titl
<td>&#39;&#39;</td>
<td>Set the animation for tooltip if it shows.</td>
</tr>
<tr>
<td>withDots</td>
<td>bool</td>
<td>false</td>
<td>For linear slider, when the <code>step</code> value is greater than 1, you can set the <code>withDots</code> to <code>true</code> if you want to render the slider bar with dots.</td>
</tr>
</tbody>
</table>