PHP Classes

File: vendors/ion.rangeSlider/readme.ru.md

Recommend this page to a friend!
  Classes of Jorge Castro   Gentelella BladeOne   vendors/ion.rangeSlider/readme.ru.md   Download  
File: vendors/ion.rangeSlider/readme.ru.md
Role: Documentation
Content type: text/markdown
Description: Documentation
Class: Gentelella BladeOne
Render templates using Bootstrap for presentation
Author: By
Last change:
Date: 3 years ago
Size: 24,466 bytes
 

Contents

Class file image Download

ion.rangeSlider

> <a href="readme.md">English description</a> | ???????? ?? ???????

???????, ?????? ? ?????????? ??????? ??????????

*

  • ??????: 2.1.4
  • <a href="http://ionden.com/a/plugins/ion.rangeSlider/index.html">???????? ??????? ? ????</a>
  • <a href="http://ionden.com/a/plugins/ion.rangeSlider/ion.rangeSlider-2.1.4.zip">????????? ZIP-?????</a>

????????

  • Ion.RangeSlider ? ????????, ???????, ?????????? ? ????? ????????????? ??????? ??????????
  • ??????? ???????????? ??????? ? ????????? ??????, ????? ?????? ?????????, ????? ???? ????????? ??????????? ????? CSS
  • ??????????????? ?????????: Google Chrome, Mozilla Firefox 3.6+, Opera 12+, Safari 5+, Internet Explorer 8+
  • ?????? ???????????? ?????????? ? touch-??????? (iPhone, iPad, Nexus, etc.)
  • <a href="https://github.com/IonDen/ion.rangeSlider">??????????? ?? GitHub</a>
  • ?????? ???????? ???????????????? ?? ???????? <a href="http://ionden.com/a/plugins/licence.html" target="_blank">???????? MIT</a>
  • ?????????? ???? ??????, ?? ??????? ????????? ????????? ???????? ??????????, ????? ??? ????:

ion.rangeSlider

???????? ???????????

  • ????????? ??????. (5 ????? ? ????????? ? PSD ??? ???????????? ???????????)
  • ?????????????? ???-?? ????????? ?? ????? ???????? ??? ???????????? ?????? ?????????????????? ? ?????????? ????? ????
  • ??? ?????? ?????? ? 1 ??? 2 ??????????
  • ????????? ????????????? ? ??????? ????????
  • ??????????? ????????????? ??? ? ??????????? ????? ? ????
  • ????? ???????????? ??????????? ?????? ???????? ??? ????????
  • ????????????? ????? ????????
  • ??????????? ???????? ?????????? (???. ? ????. ????????, ??????? ????????, ?????)
  • ????????? ? ???????? ??? ???????? ?????? ????????? ($20, 20 &euro; ? ?.?.)
  • ?????????????? ???????? ??? ????????????? ???????? (???????? $0 ? $100<b>+</b>)
  • ????????? ???????? ????????????? ??????? ???? (???????? 10000000 -> 10 000 000 ??? 10.000.000)
  • ??????? ????? ???? ???????? ????? ? value ????????? ???? input, ??? ????????? ???????? ?????? ????? ?????? ????? ?????
  • ????? ???????? ???????? ????? ??? ?? ?????? ????? data-??????? (???????? data-min="10")
  • ??????? ???????????? ???????? disabled, ????????? ?????? ??????? ??????????
  • ??????? ???????????? ??????? ?????? (update, reset ? remove), ??????????? ????????? ????????? ??? ????? ????????
  • ??? ??????????? ????????????? ???? ????????? ???????? (onStart, onChange, onFinish, onUpdate). ??????? ???????? ???? ???????? ? ??? ??????? ?????? ?????????? ? ???? ???????
  • ??????? ???????????? ?????? ? ????? ? ????????

????

  • <a href="http://ionden.com/a/plugins/ion.rangeSlider/demo.html" class="switch__item">??????? ?????????</a>
  • <a href="http://ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html" class="switch__item">??????????? ?????????</a>
  • <a href="http://ionden.com/a/plugins/ion.rangeSlider/demo_interactions.html" class="switch__item">??????????????</a>

???????????

  • <a href="http://jquery.com/" target="_blank">jQuery 1.8.x+</a>

?????????????

?????????? ??????????: * jQuery * ion.rangeSlider.min.js

?????????? ?????: * <a href="http://necolas.github.io/normalize.css/" target="_blank">normalize.css</a> (??????????, ???? ?? ? ??? ??? ?? ?????????) * ion.rangeSlider.css

?? ???????? ??? ????. 5 ?????? ???????? ? ?????. ???????? ????: * ion.rangeSlider.skinFlat.css + sprite-skin-flat.png * ion.rangeSlider.skinHTML5.css + ??? ???????? * ion.rangeSlider.skinModern.css + sprite-skin-modern.png * ion.rangeSlider.skinNice.css + sprite-skin-nice.png * ion.rangeSlider.skinSimple.css + sprite-skin-simple.png

???? ?????????????? ????????? ? ????? PSD ??????, ? ????????? ??????????? ???? (?? ???????? ?????????????? ??????? ????????? ? CSS ?????)

????????????? ? ??????? bower

  • bower install ionrangeslider

????????????? ? ??????? npm

  • npm install ion-rangeslider

?????????????

??????? ??????? ???? <code>input type="text"</code>:

<input type="text" id="example_id" name="example_name" value="" />

????? ????????? ???????, ???????? ionRangeSlider ??? ??????? ????????:

$("#example_id").ionRangeSlider();

???? ??? ????????

???? ?? ??????? ? ??? ?????????? ? ?? ??????? ??? ????????? ?????????? ???? ?????? ?? ???? ????????, ?? ???????? ??? <a href="http://ionden.com/a/plugins/ion.rangeSlider/ionRangeSliderDemo.zip" class="button">???? ???? ??????</a>

???????? ? ?????? 1.x ?? 2.x

  • ??? ????????? (????? ???????) ?????? ???????????? ???: <b>param_name</b>, ? ?? paramName
  • ?????????? ???????? ????????? ??????????: hasGrid &rarr; <b>grid</b>, onLoad &rarr; <b>onStart</b>
  • ????????? ?????? ??????? ? ??????? ????????, ???????????? ? ???????. ????????: fromNumber &rarr; <b>from</b>
  • ??????? ?????? ????????? ?????????? ???? ???????? ? ???? value ? ? ???????? data-from ? data-to

<a href="http://jsfiddle.net/IonDen/qv6yrjrv/" target="_blank">???????? ??? ????????????? ? ????????</a>

?????????

<table class="options">

<thead>
    <tr>
        <th>???????</th>
        <th>?? ?????????</th>
        <th>???</th>
        <th>????????</th>
    </tr>
</thead>
<tbody>
    <tr class="options__step">
        <td>type<div><sup>data-type</sup></div></td>
        <td>"single"</td>
        <td>string</td>
        <td>????????? ??????? ??? ????????, ????? ????????? ???????? <code>single</code> - ??? ?????????? ???????? ??? <code>double</code> - ??? ???????? ????????</td>
    </tr>


    <tr>
        <td>min<div><sup>data-min</sup></div></td>
        <td>10</td>
        <td>number</td>
        <td>?????????? ??????????? ????????? ???????? ????????.</td>
    </tr>
    <tr>
        <td>max<div><sup>data-max</sup></div></td>
        <td>100</td>
        <td>number</td>
        <td>?????????? ???????????? ????????? ???????? ????????.</td>
    </tr>
    <tr>
        <td>from<div><sup>data-from</sup></div></td>
        <td>min</td>
        <td>number</td>
        <td>????????? ?????? ????????? ??????? ?????? ???????? (??? ????????????? ????????)</td>
    </tr>
    <tr>
        <td>to<div><sup>data-to</sup></div></td>
        <td>max</td>
        <td>number</td>
        <td>????????? ?????? ????????? ??????? ??????? ????????</td>
    </tr>
    <tr class="options__step">
        <td>step<div><sup>data-step</sup></div></td>
        <td>1</td>
        <td>number</td>
        <td>?????? ??? ???????? ?????????. ?????? ?????? ????. ????? ???? ???????.</td>
    </tr>


    <tr>
        <td>min_interval<div><sup>data-min-interval</sup></div></td>
        <td>?</td>
        <td>number</td>
        <td>?????? ??????????? ???????? ????? ??????????. ?????? ??? ???? "double"</td>
    </tr>
    <tr class="options__step">
        <td>max_interval<div><sup>data-max-interval</sup></div></td>
        <td>?</td>
        <td>number</td>
        <td>?????? ???????????? ???????? ????? ??????????. ?????? ??? ???? "double"</td>
    </tr>
    <tr class="options__step">
        <td>drag_interval<div><sup>data-drag-interval</sup></div></td>
        <td>false</td>
        <td>boolean</td>
        <td>????????? ???????????? ????????????? ???? ????????. ?????? ??? ???? "double" (beta)</td>
    </tr>


    <tr class="options__step">
        <td>values<div><sup>data-values</sup></div></td>
        <td>[]</td>
        <td>array</td>
        <td>?????????????? ???????? ????????, ?????????? ??????? ?? ??????? values. ????????? min, max, step ???????????????? ?????????????.</td>
    </tr>


    <tr class="options__new">
        <td>from_fixed<div><sup>data-from-fixed</sup></div></td>
        <td>false</td>
        <td>boolean</td>
        <td>????????? ??????? ?????? ???????? (??? ????????????? ????????).</td>
    </tr>
    <tr class="options__new">
        <td>from_min<div><sup>data-from-min</sup></div></td>
        <td>min</td>
        <td>number</td>
        <td>???????????? ??????????? ??????? ?????? ????????.</td>
    </tr>
    <tr class="options__new">
        <td>from_max<div><sup>data-from-max</sup></div></td>
        <td>max</td>
        <td>number</td>
        <td>???????????? ???????????? ??????? ?????? ????????.</td>
    </tr>
    <tr class="options__new">
        <td>from_shadow<div><sup>data-from-shadow</sup></div></td>
        <td>false</td>
        <td>boolean</td>
        <td>???????????? ??????????? ?????????? ?? ????? ????????.</td>
    </tr>


    <tr class="options__new">
        <td>to_fixed<div><sup>data-to-fixed</sup></div></td>
        <td>false</td>
        <td>boolean</td>
        <td>????????? ??????? ??????? ????????.</td>
    </tr>
    <tr class="options__new">
        <td>to_min<div><sup>data-to-min</sup></div></td>
        <td>min</td>
        <td>number</td>
        <td>???????????? ??????????? ??????? ??????? ????????.</td>
    </tr>
    <tr class="options__new">
        <td>to_max<div><sup>data-to-max</sup></div></td>
        <td>max</td>
        <td>number</td>
        <td>???????????? ???????????? ??????? ??????? ????????.</td>
    </tr>
    <tr class="options__new options__step">
        <td>to_shadow<div><sup>data-to-shadow</sup></div></td>
        <td>false</td>
        <td>boolean</td>
        <td>???????????? ??????????? ?????????? ?? ?????? ????????.</td>
    </tr>


    <tr>
        <td>prettify_enabled<div><sup>data-prettify-enabled</sup></div></td>
        <td>true</td>
        <td>boolean</td>
        <td>???????? ??????? ??? ??????? ????. 10000000 &rarr; 10 000 000</td>
    </tr>
    <tr class="options__new">
        <td>prettify_separator<div><sup>data-prettify-separator</sup></div></td>
        <td>" "</td>
        <td>string</td>
        <td>????????? ???????? ??????????? ??? ????????? ?????????? ??????? ????. 10 000, 10.000, 10-000 ? ?.?.</td>
    </tr>
    <tr class="options__new options__step">
        <td>prettify<div><sup>?</sup></div></td>
        <td>null</td>
        <td>function</td>
        <td>??????????? ??????? ??? ????????????? ???????? ????????. ????????? ?????? ? ??????? ??? ??? ??????, ???????? ??????????????? ? ???? ? ?????.</td>
    </tr>


    <tr class="options__new options__step">
        <td>force_edges<div><sup>data-force-edges</sup></div></td>
        <td>false</td>
        <td>boolean</td>
        <td>?????????? ??????? ?????? ?????????? ?????? ?????? ?????? ??????????.</td>
    </tr>


    <tr class="options__new">
        <td>keyboard<div><sup>data-keyboard</sup></div></td>
        <td>false</td>
        <td>boolean</td>
        <td>?????????? ?????????? ????????? ? ??????? ??????????. ?????: &larr, &darr, A, S. ??????: &rarr, &uarr, W, D.</td>
    </tr>
    <tr class="options__new options__step">
        <td>keyboard_step<div><sup>data-keyboard-step</sup></div></td>
        <td>5</td>
        <td>number</td>
        <td>??? ???????? ???????? ??? ?????????? ? ??????????. ???????? ? ?????????.</td>
    </tr>


    <tr>
        <td>grid<div><sup>data-grid</sup></div></td>
        <td>false</td>
        <td>boolean</td>
        <td>???????? ??????????? ????? ????????.</td>
    </tr>
    <tr>
        <td>grid_margin<div><sup>data-grid-margin</sup></div></td>
        <td>true</td>
        <td>boolean</td>
        <td>??????????? ????? ?? ??????? ???????? ?????????, ???? ?? ???????? ??????????.</td>
    </tr>
    <tr class="options__new">
        <td>grid_num<div><sup>data-grid-num</sup></div></td>
        <td>4</td>
        <td>number</td>
        <td>?????????? ????? ? ?????.</td>
    </tr>
    <tr class="options__new options__step">
        <td>grid_snap<div><sup>data-grid-snap</sup></div></td>
        <td>false</td>
        <td>boolean</td>
        <td>???????? ????? ? ???? ???????? (???????? step). ???? ???????????, ?? ???????? grid_num ?? ???????????.</td>
    </tr>


    <tr>
        <td>hide_min_max<div><sup>data-hide-min-max</sup></div></td>
        <td>false</td>
        <td>boolean</td>
        <td>?????? ?????? "min" ? "max"</td>
    </tr>
    <tr class="options__step">
        <td>hide_from_to<div><sup>data-hide-from-to</sup></div></td>
        <td>false</td>
        <td>boolean</td>
        <td>?????? ?????? "from" ? "to"</td>
    </tr>


    <tr>
        <td>prefix<div><sup>data-prefix</sup></div></td>
        <td>?</td>
        <td>string</td>
        <td>?????????? ??????? ??? ???????? ????????. ????? ????????? ????? ??????, ???????? $100.</td>
    </tr>
    <tr>
        <td>postfix<div><sup>data-postfix</sup></div></td>
        <td>?</td>
        <td>string</td>
        <td>?????????? ???????? ??? ???????? ????????. ????? ????????? ????? ?????, ???????? 100 ???.</td>
    </tr>
    <tr>
        <td>max_postfix<div><sup>data-max-postfix</sup></div></td>
        <td>?</td>
        <td>string</td>
        <td>?????????? ?????????????? ???????? ??? ????????????? ???????? ????????. ????? ????????? ???? ???? ?? ????????? ????????? ???????? ??????? ????????. ???????? 0 ? 100+</td>
    </tr>
    <tr class="options__new">
        <td>decorate_both<div><sup>data-decorate-both</sup></div></td>
        <td>true</td>
        <td>boolean</td>
        <td>???????????? ??? ???? "double", ? ?????? ???? ????? prefix ?/??? postfix. ??????????, ??? ???????????? ?????? ????????????? ????????.<br/>????????: $10k ? $100k ??? ?? $10 ? 100k</td>
    </tr>
    <tr class="options__new options__step">
        <td>values_separator<div><sup>data-values-separator</sup></div></td>
        <td>" ? "</td>
        <td>string</td>
        <td>??????????? ??? ?????? ????????????? ????????. ???????????? ??? ???? "double". ????????: 10 ? 100, 10 to 100, 10 + 100, 10 &rarr; 100 ? ?.?.</td>
    </tr>
    
    <tr class="options__step">
        <td>input_values_separator<div><sup>data-input-values-separator</sup></div></td>
        <td>" ; "</td>
        <td>string</td>
        <td>??????????? ??? ??????? ???????? ? ???? value ? ???????? input-????????</td>
    </tr>


    <tr class="options__step">
        <td>disable<div><sup>data-disable</sup></div></td>
        <td>false</td>
        <td>boolean</td>
        <td>????????? ???????, ?????? ??? ?? ????????.</td>
    </tr>


    <tr>
        <td>onStart<div><sup>?</sup></div></td>
        <td>null</td>
        <td>function</td>
        <td>???????. ?????????? ??? ?????? ????????.</td>
    </tr>
    <tr>
        <td>onChange<div><sup>?</sup></div></td>
        <td>null</td>
        <td>function</td>
        <td>???????. ?????????? ?????? ??? ????? ??????????? ???????? ????????.</td>
    </tr>
    <tr>
        <td>onFinish<div><sup>?</sup></div></td>
        <td>null</td>
        <td>function</td>
        <td>???????. ?????????? ????? ???????????? ??????????? ?????????? ????????.</td>
    </tr>
    <tr class="options__new">
        <td>onUpdate<div><sup>?</sup></div></td>
        <td>null</td>
        <td>function</td>
        <td>???????. ?????????? ????? ??????? ??????????? ??????? <code>update</code> ??? <code>reset</code>.</td>
    </tr>
</tbody>

</table>

???????? ?????? ???????????? ? ??????? (onChange ? ?.?):

????????? ????? ??? object ? ?????????? ??????? ?????? ??????????:

Obj: {
    "input": object,    // jQuery-?????? ?? input
    "slider": object,   // jQuery-?????? ?? ????????? ????????
    "min": 0,           // ???????? MIN
    "max": 1000,        // ???????? MAX
    "from": 100,        // ???????? ?? (???????? ?????? ??? ????????????? ????????)
    "from_percent": 10, // ???????? ?? ? ?????????
    "from_value": 0,    // ?????? ?? ??????? values (???? ????????????)
    "to": 900,          // ???????? ?? (???????? ??????? ????????)
    "to_percent": 90,   // ???????? ?? ? ?????????
    "to_value": 0       // ?????? ?? ??????? values (???? ????????????)
}

???????? ???????? c ???????????

??????

$("#example").ionRangeSlider({
    min: 0,
    max: 10000,
    from: 1000,
    to: 9000,
    type: 'double',
    prefix: "$",
    grid: true,
    grid_num: 10
});

??????? ? ??????????? ????? ????? ???????????????? ????????? ???????? <code>data-*</code> ? ???? <code>input</code>:

data-min="0"
data-max="10000"
data-from="1000"
data-to="9000"
data-type="double"
data-prefix="$"
data-grid="true"
data-grid-num="10"

????????? ??????

??? ???? ????? ???????????? ????????? ??????, ??????? ????? ???????? ???????? ???????? ? ??????????::

// ????????? ???????
$("#range").ionRangeSlider({
    type: "double",
    min: 0,
    max: 1000,
    from: 200,
    to: 500,
    grid: true
});

// ?????????? ??????? ? ??????????
var slider = $("#range").data("ionRangeSlider");

// ????????? ????????? ?????
slider.reset();

????? ?????????? 3 ????????? ??????:

// UPDATE - ????????? ???????? ???????? (????? ?????? ????? ????????)
slider.update({
    from: 300,
    to: 400
});

// RESET - ?????????? ??????? ? ???????? ?????????
slider.reset();

// DESTROY - ??????? ??????? ? ??????????????? ???????? input
slider.destroy();

??? ??? ???????? ?? ????

  • <a href="http://ionden.com/a/plugins/ion.rangeSlider/demo.html" class="switch__item">??????? ?????????</a>
  • <a href="http://ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html" class="switch__item">??????????? ?????????</a>
  • <a href="http://ionden.com/a/plugins/ion.rangeSlider/demo_interactions.html" class="switch__item">??????????????</a>

? ?????? ???? ??????? ????????????? ???? ????? ????????

<a href="history.md">??????? ??????????</a>

*

?????????? ?????????? ???????? ????? Ion:

  • ???????????? ????? ?????? Pledgie: ![](https://pledgie.com/campaigns/25694)
  • ???????????? ???????? ????? Paypal: https://www.paypal.me/IonDen
  • ???????????? ???????? ????? ??????.??????: http://yasobe.ru/na/razrabotku