yii2 uislider

Общие вопросы по использованию второй версии фреймворка. Если не знаете как что-то сделать и это про Yii 2, вам сюда.
Artikk
Сообщения: 742
Зарегистрирован: 2017.02.10, 09:12

yii2 uislider

Сообщение Artikk »

Здравствуйте. Хочу сделать такое: https://c2n.me/3S1L5FM
Использую это http://demos.krajee.com/slider#settings
Вот сам код:

Код: Выделить всё

<div class="col-md-6 col-sm-6 col-xs-12">
                                    <p class="sl_p">Количество юнитов</p>
                                    <?= Slider::widget([
                                       'name'=>'rating_1',
                                       'value'=>8,
                                       'sliderColor'=>Slider::TYPE_PRIMARY,
                                       'pluginOptions'=>[
                                           'min'=>1,
                                           'max'=>15,
                                           'step'=>1,
                                           'tooltip'=>'always',
                                       ]
                                    ]);?>
                                    <p class="sl_p">Количество розеток</p>
                                    <?= Slider::widget([
                                        'name'=>'rating_2',
                                        'value'=>6,
                                        'sliderColor'=>Slider::TYPE_PRIMARY,
                                        'pluginOptions'=>[
                                            'min'=>1,
                                            'max'=>10,
                                            'step'=>1,
                                            'tooltip'=>'always',
                                        ]
                                    ]);?>

                                </div>
                                <div class="col-md-6 col-sm-6 col-xs-12">
                                    <p class="sl_p">Потребляемая мощность</p>
                                    <?= Slider::widget([
                                        'name'=>'rating_3',
                                        'value'=>6,
                                        'sliderColor'=>Slider::TYPE_PRIMARY,
                                        'pluginOptions'=>[
                                            'min'=>0.1,
                                            'max'=>10,
                                            'step'=>0.1,
                                            'tooltip'=>'always',
                                        ]
                                    ]);?>
                                    <div class="col-md-12 pp col-sm-12 col-xs-12">
                                    <span class="ch2"><input type="checkbox" id="chh" /> Интернет (100 Мбит/сек)</span>
                                    </div>
                                    <div class="hdd">
                                        <p class="sl_p">IP-&nbsp;адреса</p>
                                        <?= Slider::widget([
                                            'name'=>'rating_4',
                                            'value'=>5,
                                            //'disabled'=>true,
                                            'sliderColor'=>Slider::TYPE_PRIMARY,
                                            'pluginOptions'=>[
                                                'min'=>5,
                                                'max'=>256,
                                                'step'=>1,
                                                'tooltip'=>'always',
                                            ]
                                        ]);?>
                                </div>


Вот сам тег итоговой суммы:
<p class="und_res2">~<span class="count">120 000</span><span class="span">*</span>₽</p>


Подскажите, как мне соединить 4 этих слайдера, чтобы выводилось общее число? Сижу с самого утра, не могу никак понять. За раннее спасибо.
Artikk
Сообщения: 742
Зарегистрирован: 2017.02.10, 09:12

Re: yii2 uislider

Сообщение Artikk »

как мне отлавливать значения при изменении?
Artikk
Сообщения: 742
Зарегистрирован: 2017.02.10, 09:12

Re: yii2 uislider

Сообщение Artikk »

пытался так:

Код: Выделить всё

 'options'=>array(
                                            'slide'=>'js:function(event,ui){$(".count").val(ui.value);}',
                                        ),
но не получилось...
Artikk
Сообщения: 742
Зарегистрирован: 2017.02.10, 09:12

Re: yii2 uislider

Сообщение Artikk »

Код: Выделить всё

var shet = parseInt($(".count").html());

	$("input[name='rating_1']").change(function(){
		var unit = $("input[name='rating_1']").val();
		var vals = parseInt(unit)+shet;
		$(".count").html(vals);
	});

	var shet2 = parseInt($(".count").html());

	$("input[name='rating_2']").change(function(){
		var rozetok = $("input[name='rating_2']").val();
		var vals2 = parseInt(rozetok)+shet2;
		$(".count").html(vals2);
	});

так я получаю данные с одного input... но как мне соединить их все?
andku83
Сообщения: 988
Зарегистрирован: 2016.07.01, 10:24
Откуда: Харьков

Re: yii2 uislider

Сообщение andku83 »

Код: Выделить всё

$("input[name^='rating_']").change(function(){
    var count = 0;
    $(this).parents(".container").find("input[name^='rating_']").each(function () {
        count += parseInt($(this).val());
    });
    $(".count").html(count);
});
".container" - заменить на селектор вашего контейнера в котором находятся все инпуты сумму для которых нужно посчитать
Artikk
Сообщения: 742
Зарегистрирован: 2017.02.10, 09:12

Re: yii2 uislider

Сообщение Artikk »

Код: Выделить всё

$(".conf_brd:has(input)").change(function(){
		var unit = parseInt($("input[name='rating_1']").val());
		var rozetok = parseInt($("input[name='rating_2']").val());
		var power = parseFloat($("input[name='rating_3']").val());
		var ip = parseInt($("input[name='rating_4']").val());
		var val = unit+rozetok+power+ip;
		$(".count").html(val);
	});
я так сделал, но у вас понятней вроде...
Artikk
Сообщения: 742
Зарегистрирован: 2017.02.10, 09:12

Re: yii2 uislider

Сообщение Artikk »

а как мне чекбоксом менять состояние у

Код: Выделить всё

<?= Slider::widget([
                                       'name'=>'rating_1',
                                       'value'=> $unitcalc->defaults,
                                       'sliderColor'=>Slider::TYPE_PRIMARY,
                                       'pluginOptions'=>[
                                           'min'=>$unitcalc->start,
                                           'max'=>$unitcalc->stop,
                                           'step'=>$unitcalc->step,
                                           'tooltip'=>'always',
                                       ]
                                    ]);?>
с false на true и наоборот?
andku83
Сообщения: 988
Зарегистрирован: 2016.07.01, 10:24
Откуда: Харьков

Re: yii2 uislider

Сообщение andku83 »

вопрос не понятен
Аватара пользователя
Dominus
Сообщения: 892
Зарегистрирован: 2013.03.14, 21:27
Откуда: Россия, Иваново
Контактная информация:

Re: yii2 uislider

Сообщение Dominus »

Наверное имеется ввиду чекбоксом менять значение у слайдера на enable/disable

Код: Выделить всё

// A disabled slider input with a square handle.
echo Slider::widget([
    'name'=>'rating_2',
    'value'=>3,
    'pluginOptions'=>[
        'handle'=>'square'
    ],
    'options'=>['disabled'=>true] // <---
]);
Не спорь с дураком, иначе окружающие не правильно поймут кто из вас дурак!
andku83
Сообщения: 988
Зарегистрирован: 2016.07.01, 10:24
Откуда: Харьков

Re: yii2 uislider

Сообщение andku83 »

Код: Выделить всё

$('#id').slider('enable');
$('#id').slider('disable');
Artikk
Сообщения: 742
Зарегистрирован: 2017.02.10, 09:12

Re: yii2 uislider

Сообщение Artikk »

$('#id').slider('enable');
$('#id').slider('disable');

так не работает.....
andku83
Сообщения: 988
Зарегистрирован: 2016.07.01, 10:24
Откуда: Харьков

Re: yii2 uislider

Сообщение andku83 »

вы вместо $('#id') свой селектор подставляли?
Artikk
Сообщения: 742
Зарегистрирован: 2017.02.10, 09:12

Re: yii2 uislider

Сообщение Artikk »

да, ничего не происходит
Аватара пользователя
Dominus
Сообщения: 892
Зарегистрирован: 2013.03.14, 21:27
Откуда: Россия, Иваново
Контактная информация:

Re: yii2 uislider

Сообщение Dominus »

Простой пример:

Код: Выделить всё

<?php
$script = new \yii\web\JsExpression("
    $('#checkBox').click(function(event) {
        var checked = event.target.checked;
        $('#myRange').prop('disabled', checked);
    });
");
$this->registerJs($script, \yii\web\View::POS_END);
?>
<div class="slidecontainer">
    <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
<div>
    <input id="checkBox" type="checkbox">
</div>
Не спорь с дураком, иначе окружающие не правильно поймут кто из вас дурак!
Аватара пользователя
Dominus
Сообщения: 892
Зарегистрирован: 2013.03.14, 21:27
Откуда: Россия, Иваново
Контактная информация:

Re: yii2 uislider

Сообщение Dominus »

Еще один:

Код: Выделить всё

<?php
$script = new \yii\web\JsExpression("
    $('#checkBox').change(function(event) {
        var checked = event.target.checked;
        var slider = $('#myRange');
        if(checked === true) {
            slider.removeAttr('disabled');
        } else {
            slider.attr('disabled', 'disabled');
        }
    });
");
$this->registerJs($script, \yii\web\View::POS_END);
?>
<div class="slidecontainer">
    <input type="range" min="1" max="100" value="50" class="slider" id="myRange" disabled="disabled">
</div>
<div>
    <input id="checkBox" type="checkbox">
</div>
Не спорь с дураком, иначе окружающие не правильно поймут кто из вас дурак!
Аватара пользователя
Dominus
Сообщения: 892
Зарегистрирован: 2013.03.14, 21:27
Откуда: Россия, Иваново
Контактная информация:

Re: yii2 uislider

Сообщение Dominus »

Или более универсальный:

Код: Выделить всё

<?php
$script = new \yii\web\JsExpression("   
    function changeStatus(e)
    {
        var checkbox = $('#' + this.id),
            target = $('#' + checkbox.data('target')),
            checked = checkbox.prop('checked');
            
        if(checked === true) {
            target.removeAttr('disabled');
        } else {
            target.attr('disabled', 'disabled');
        }
    }
");
$this->registerJs($script, \yii\web\View::POS_END);
?>
<div class="slidecontainer">
    <input type="range" min="1" max="100" value="50" class="slider" id="myRange_1" disabled="disabled">
    <input id="checkBox_1" type="checkbox" data-target="myRange_1">
</div>
<!-- Регистрируем наш чекбокс -->
<?php $this->registerJs("$('#checkBox_1').click(changeStatus);", \yii\web\View::POS_READY); ?>
Не спорь с дураком, иначе окружающие не правильно поймут кто из вас дурак!
andku83
Сообщения: 988
Зарегистрирован: 2016.07.01, 10:24
Откуда: Харьков

Re: yii2 uislider

Сообщение andku83 »

Dominus писал(а): 2018.02.21, 03:20 Или более универсальный:
это не обычный input, а http://demos.krajee.com/slider#settings
там инпута вообще невидно, отображается стилизованная обертка и работать нужно с ней
andku83
Сообщения: 988
Зарегистрирован: 2016.07.01, 10:24
Откуда: Харьков

Re: yii2 uislider

Сообщение andku83 »

Artikk писал(а): 2018.02.21, 01:04 да, ничего не происходит
если у вас не работает, значит вы не правильный селектор используете потому как на сайте с примерами

Код: Выделить всё

$('#w10').slider('enable')
$('#w10').slider('disable')
эти команды введенные в консоли прекрасно работают с отключенным инпутом

покажите сгенерированый хтмл и js который вы пытаетесь использовать
Аватара пользователя
Dominus
Сообщения: 892
Зарегистрирован: 2013.03.14, 21:27
Откуда: Россия, Иваново
Контактная информация:

Re: yii2 uislider

Сообщение Dominus »

shnir писал(а): 2018.02.21, 12:58
Dominus писал(а): 2018.02.21, 03:20 Или более универсальный:
это не обычный input, а http://demos.krajee.com/slider#settings
там инпута вообще невидно, отображается стилизованная обертка и работать нужно с ней
Без разницы. Вот пример с виджетом:

Код: Выделить всё

<?php
$script = new \yii\web\JsExpression("   
    function changeStatus(e)
    {
        var checkbox = $('#' + this.id),
            target = $('#' + checkbox.data('target')),
            checked = checkbox.prop('checked');
            
        if(checked === true) {
            target.slider('enable');
        } else {
            target.slider('disable');
        }
    }
");
$this->registerJs($script, \yii\web\View::POS_END);
?>
<!-- Первый слайдер, по умолчанию не активный, чекбокс не отмечен -->
<div class="slidecontainer">
    <?= Slider::widget([
         'id' => 'mySlider_1',
         'name' => 'slider',
         'sliderColor' => Slider::TYPE_DANGER,
         'handleColor' => Slider::TYPE_DANGER,
         'pluginOptions' => [
            'orientation' => 'horizontal',
            'handle' => 'round',
            'min' => 0,
            'max' => 255,
            'step' => 1
        ],
        'options' => [
            'disabled' => true
        ]
    ]); ?>
    <input id="checkBox_1" type="checkbox" data-target="mySlider_1">
    <!-- Регистрируем наш чекбокс -->
    <?php $this->registerJs("$('#checkBox_1').click(changeStatus);", \yii\web\View::POS_READY); ?>
</div>

<!-- Второй слайдер, по умолчанию активный, чекбокс отмечен -->
<div class="slidecontainer">
    <?= Slider::widget([
        'id' => 'mySlider_2',
        //...
        'options' => [
            'disabled' => false
        ]
    ]); ?>
    <input id="checkBox_2" type="checkbox" data-target="mySlider_2" checked="checked">
    <!-- Регистрируем наш чекбокс -->
    <?php $this->registerJs("$('#checkBox_2').click(changeStatus);", \yii\web\View::POS_READY); ?>
</div>

<!-- Третий слайдер -->
<!-- ... -->
По сути тут 3 важных параметра:
1. id слайдера;
2. id чекбокса;
3. data-target - параметр в чекбоксе, в нем передаём id слайдера;
Не спорь с дураком, иначе окружающие не правильно поймут кто из вас дурак!
Artikk
Сообщения: 742
Зарегистрирован: 2017.02.10, 09:12

Re: yii2 uislider

Сообщение Artikk »

да, ваш работает. но тогда вопрос, как сделать, чтобы допустим при клике, поте активировалось, и + 1550 суммировалось к див определенный?
Вот скрипт, который сейчас,

Код: Выделить всё

$("input[name^='rating_']").change(function(){
		var count = 0;
		$(this).parents(".cont").find("input[name^='rating_']").each(function () {
			count += parseFloat($(this).val());
		});
		$(".count").html(count);
	});

поняли меня?)
Ответить