JQuery Spinner со строками в качестве ввода - PullRequest
Новая
       0

JQuery Spinner со строками в качестве ввода

3 голосов
/ 12 февраля 2012

Привет! Я искал, но не нашел такого решения. Можно ли создать счетчик с jquery, в котором вместо чисел вводятся текстовые значения (строки). Другими словами, то же самое, что и это http://jsfiddle.net/yaQSP/ но вместо этого ..- 1,0,1 .. для вращения текстовых значений из списка или массива строк.

Ответы [ 3 ]

6 голосов
/ 17 сентября 2013

Предыдущий ответ не работает. Я протестировал его по заданным ссылкам с Chrome и Firefox.

Смотрите здесь для другого решения.

Вам нужно переписать функции _parse и _format виджета счетчика.

Вот пример с простым Bool-like spinner: 

$.widget("ui.boolspinner", $.ui.spinner, {
    options: {
        min: 0,
        max: 1,
        start: 1
    },
    _parse: function (value) {
        if (typeof value === "string") {
            return (value.toLowerCase() == "ja")?1:0;
        }
        return value;
    },
    _format: function (value) {
        return (value == 1)?"Ja":"Nein";
    }
});

$(function() {
    $("#spinner-testprint").boolspinner();
});

http://jsfiddle.net/k46bA/

Я закончил свой собственный виджет. Он использует массив строк в качестве входных данных. 

$.widget("ui.formatSpinner", $.ui.spinner, {
    options: {
    },
    _parse: function (value) {
        if (typeof value === "string") {                
            return this.options.values.indexOf(value);
        }
        return value;            
    },
    _format: function (value) {
        //wrap around
        if (value < 0) {
            value = this.options.values.length-1;
        }
        if (value > this.options.values.length-1) {
            value = 0;
        }
        var format = this.options.values[value];
        return format;
    },          
});

Использование: 

//paper type spinner
var arrPaperTypes = ["Standard 80g", "Standard 100g", "Gloss 100g", "Gloss 120g"];

$(function() {
    $("#spinner-paper").formatSpinner({
        values: arrPaperTypes
    });
});
4 голосов
/ 21 октября 2014

Опираясь на ответ Бояна, с небольшим перебором и переписав _adjustValue, можно получить более чистое решение: 

$.widget("ui.textSpinner", $.ui.spinner, {
    options: {
        wrap: true
    },
    _parse: function (value) {
        if ((value === '') || isNaN(value)) {
            value = this.options.values.indexOf(value);
            if (value === -1) {
                value = 0;
            }
        }
        if (value < 0) {
            value = this.options.wrap ? (this.options.values.length -1) : 0;
        } else if (value >= this.options.values.length) {
            value = this.options.wrap ? 0 : (this.options.values.length - 1);
        }
        return value;
    },
    _format: function (value) {
        return this.options.values[value];
    },
    _adjustValue: function (value) {
        if (value < 0) {
            value = this.options.wrap ? (this.options.values.length - 1) : 0;
        } else if (value >= this.options.values.length) {
            value = this.options.wrap ? 0 : (this.options.values.length - 1);
        }
        return value;
    }
}); 

var arrText = ["John", "Paul", "George", "Ringo"];

$(function() {
    $("#spinner-text").textSpinner({
        values: arrText,
        spin: function( event, ui ) {
           $( "#spinner-value" ).text(ui.value);
        }
    });
    $("#spinner-text-nowrap").textSpinner({
        values: arrText,
        wrap: false,
        spin: function( event, ui ) {
           $( "#spinner-value-nowrap" ).text(ui.value);
        }
    });
});
<link href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<p>
Wrapping <input id="spinner-text" value="3" readonly /><br />
Value: <span id="spinner-value">3</span>
</p>
<p>
No wrapping <input id="spinner-text-nowrap" value="3" readonly /><br />
Value: <span id="spinner-value-nowrap">3</span>
</p>

Также доступно здесь: http://jsfiddle.net/MartynDavis/gzmvc2ds/

2 голосов
/ 12 февраля 2012

Обновление

Только что немного почистил http://jsfiddle.net/yaQSP/25/

см .: http://jsfiddle.net/yaQSP/23/

Вы можете сделать это немного хакерски, как это: Создайте свой массив.

комплект: 

$('#spinner').spinner({
    step: 1,
    numberformat: "n"
});​

и связать событие изменения в поле ввода. Тогда назови это так -> 

yourArr[i]

, тогда как i - значение поля ввода.

...