Форум Сайтостроение Веб-строительство

Ползунок jQuery-ui

Coral_Reef
На сайте с 02.03.2011
Offline
22
Coral_Reef
4627

Доброго времени суток, господа!

С помощью jQuery ui собираю калькулятор с ползунками. http://oldchampionat.ru/test/index.html

Необходимо сделать эти ползунки-слайдеры отключаемыми. Т.е. справа от ползунка стоит чекбокс (например), галочку убрал - ползунок не активен и передает значение "0", галочку поставил - ползунок работает.

Примерно как здесь: http://demosites.simplecoding.org/weightcalc/

Кто-нибудь знает как их сделать отключаемыми?

код моего калькулятора здесь: 

<!DOCTYPE html>

<html>

<head>

  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

    <meta charset="utf-8">

    <style type="text/css">

    div.demo { padding: 10px !important; width: 200px;}

    .ui-widget{font-size: 0.6em !important;}

    </style>

    <script>

    $(function() {

        $( "#slider-range-max" ).slider({

            range: "max",

            min: 1,

            max: 5,

            value: 2,

            slide: function( event, ui ) {

                $( "#amount" ).val( ui.value );

                calc();

            }

        });

        $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );

    });

    $(function() {

        $( "#slider-range-max2" ).slider({

            range: "max",

            min: 6,

            max: 10,

            value: 7,

            slide: function( event, ui ) {

                $( "#amount2" ).val( ui.value );

                calc();

            }

        });

        $( "#amount2" ).val( $( "#slider-range-max2" ).slider( "value" ) );

    });

 

    function calc(par){

    type = document.cl_form.type.value;

    amount = document.cl_form.amount.value;

    amount2 = document.cl_form.amount2.value;

 

    //var summ;

    summ = Number(type) * ( Number(amount) + Number(amount2) );

    document.cl_form.summ.value=summ;

    document.getElementById("typetd").innerHTML=type;

    document.getElementById("amounttd").innerHTML=amount;

    document.getElementById("amount2td").innerHTML=amount2;

    document.getElementById("summ").innerHTML=summ;

    return false; 

    }

    </script>

</head>

<body>

<form name="cl_form">   

<div class="demo">

<p>

    <label for="type">Type of rooms:</label>

    <select name="type" id="type" onchange="calc(this.value);"> 

    <option selected="selected" value="0">Select...</option>

    <option value="1">Luxe (*1)</option>

    <option value="2">Extra (*2)</option>

    <option value="3">Comfort (*3)</option>

    </select>

</p>

<p>

    <label for="amount">Number of rooms, 1st floor:</label>

    <input type="text" id="amount" onchange="calc(this.value);" style="border:0; color:#f6931f; font-weight:bold; width:11px;" />

</p>

<div id="slider-range-max"></div>

<p>

    <label for="amount2">Number of rooms, 2nd floor:</label>

    <input type="text" id="amount2" onchange="calc(this.value);" style="border:0; color:#f6931f; font-weight:bold; width:11px;" />

</p>

<div id="slider-range-max2"></div>

<p>

    <label for="summ">The summ:</label>

    <input value="0" name="summ" readonly="readonly" maxlength="10" size="5" type="text">

</p>

<p>

    <table border="1" cellpadding="3" style="border-collapse: collapse;">

        <tr>

            <td>

                type: <p id="typetd">0</p>

            </td>

            <td>

                1st: <p id="amounttd">0</p>

            </td>

            <td>

                2nd: <p id="amount2td">0</p>

            </td>

            <td>

                summ: <p id="summ">0</p>

            </td>

        <tr>

    </table>

</p>

</div>

</form>

</body>

</html>
Ord
На сайте с 15.11.2005
Offline
175
Ord
#1

Насколько я понимаю, у слайдеров в JqueryUI есть свойство disabled, вот с ним и надо оперировать.

Например:

("#mycheckbox").live('change', function(){

... проверяем, что в чекбоксе и в зависимости от этого, дизаблим или енаблим ...

});

Создаем лучший кулинарный проект, iamcook.ru
Вопрос по DLE Массив чекбоксов в JavaScropt. jqueryUi: с элементом Dialog
Coral_Reef
На сайте с 02.03.2011
Offline
22
Coral_Reef
#2
Ord:
Насколько я понимаю, у слайдеров в JqueryUI есть свойство disabled, вот с ним и надо оперировать.

Например:

("#mycheckbox").live('change', function(){

... проверяем, что в чекбоксе и в зависимости от этого, дизаблим или енаблим ...

});

А можно по подробней...

... Проблема в том, что я с jQuery и javascript практически не знаком, поэтому не могу понять, как нужному слайдеру-ползунку передать значение от чекбокса...

Ord
На сайте с 15.11.2005
Offline
175
Ord
#3

ну вот же я написал

$("#mycheckbox").live('change', function(){

if($("mycheckbox").attr("checked")=="checked"){

$( ".selector" ).slider({ disabled: true });

}

else{

$( ".selector" ).slider({ disabled: false });

}

});

Что-то в этом духе :P

Но если не знаете как решить задачу, надо либо самому изучать, либо платить денежку. В принципе того, что я написал должно быть достаточно для понимания

Google: новые сайты на Настройка событий Google Analytics Google: новая система создания
Coral_Reef
На сайте с 02.03.2011
Offline
22
Coral_Reef
#4
Ord:


$("#mycheckbox").live('change', function(){

if($("mycheckbox").attr("checked")=="checked"){
$( ".selector" ).slider({ disabled: true });
}
else{
$( ".selector" ).slider({ disabled: false });
}

});

Правильно я понял, что этот код заблокирует все слайдеры?

Ord
На сайте с 15.11.2005
Offline
175
Ord
#5
Правильно я понял, что этот код заблокирует все слайдеры?

Нет, этот код заблокирует слайдер с классом selector

Coral_Reef
На сайте с 02.03.2011
Offline
22
Coral_Reef
#6
Ord:
ну вот же я написал

$("#mycheckbox").live('change', function(){

if($("mycheckbox").attr("checked")=="checked"){
$( ".selector" ).slider({ disabled: true });
}
else{
$( ".selector" ).slider({ disabled: false });
}

});

Что-то в этом духе :P

Ковырял-ковырял - ничего не вышло((( Ну не программер я...😡

Ord:

либо платить денежку.

У меня на Веб-мани лежит 250WMR, готов отдать, если кто-нибудь поможет, покажет на моем примере. Например поставить блокирующие чекбоксы для слайдеров "Number of rooms, 1st floor" и "Number of rooms, 2nd floor".

Google Discover: 10 характеристик Google предоставит пользователям отчеты Эксперименты в Директе стали
R
На сайте с 10.09.2012
Offline
0
Ridento
#7
Coral_Reef:
Ковырял-ковырял - ничего не вышло((( Ну не программер я...😡

У меня на Веб-мани лежит 250WMR, готов отдать, если кто-нибудь поможет, покажет на моем примере. Например поставить блокирующие чекбоксы для слайдеров "Number of rooms, 1st floor" и "Number of rooms, 2nd floor".

Выдрать код оттуда что мешает?

Coral_Reef
На сайте с 02.03.2011
Offline
22
Coral_Reef
#8

Всем спасибо... Выручили на другом форуме.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий