Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.62/53: Рейтинг темы: голосов - 53, средняя оценка - 4.62
alex198
0 / 0 / 0
Регистрация: 08.10.2015
#1

Как создать ползунок?

29.08.2011, 14:00. Просмотров 9642. Ответов 4
Метки нет (Все метки)

привет всем как сделать ползунок на примере тарифного калькулятора http://timeweb.ru

Добавлено через 12 минут
может кто со ссылкой поможет на пример того что я хочу?

Добавлено через 4 минуты
и здесь помочь ни кто не может
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
29.08.2011, 14:00
Ответы с готовыми решениями:

Как сделать такой ползунок?
Начал верстать макет, и наткнулся на этот ползунок. Не знаю как его...

Как подключить ползунок к полю для ввода?
Как подключить ползунок к полю для ввода так, чтобы введённое в поле значение...

Ползунок на JS
Подскажите как такой ползунок сделать на JS?

Ползунок времени
Есть ползунок. Код <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01...

Сбросить в ноль ползунок
подскажите пожалуйста как при нажатии на кнопку скинуть ползунок в ноль....

4
Alorian
691 / 531 / 40
Регистрация: 22.06.2009
Сообщений: 1,291
29.08.2011, 14:02 #2
http://javascript.ru/ui/draganddrop
Основная логика drag and drop
Организовать перенос элементов по странице - довольно просто. Для этого нужно:
1. При помощи события mouseDown отследить клик на переносимом элементе
2. При каждом движении мыши в обработчике события mouseMove передвигать переносимый элемент по странице.
3. При отпускании кнопки мыши, то есть наступлении события mouseUp - остановить перенос элемента и произвести все действия, связанные с окончанием drag and drop.
0
Vovan-VE
13154 / 6538 / 1038
Регистрация: 10.01.2008
Сообщений: 15,070
29.08.2011, 14:12 #3
http://jqueryui.com/demos/slider/
0
alex198
0 / 0 / 0
Регистрация: 08.10.2015
29.08.2011, 14:48 #4
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!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>
почему при добовлении текста на русском языке текст отображается квадратиками

Добавлено через 9 минут
да и вообще книбудь может мне объяснить как этот калькулятор работает
хотябы так
<html> //это для текст для чего это предназначено ну или ссылку на пример

Добавлено через 3 минуты
����� почему так
0
Alorian
691 / 531 / 40
Регистрация: 22.06.2009
Сообщений: 1,291
29.08.2011, 14:51 #5
Цитата Сообщение от alex198 Посмотреть сообщение
да и вообще книбудь может мне объяснить как этот калькулятор работает
хотябы так
<html> //это для текст для чего это предназначено ну или ссылку на пример
Если тебе нужно построчное объяснение, то берешь каждую строчку из этой своей простыни текста без отступов и подсветки и ищешь в поисковиках, например в яндексе или гугле.
Если строчка длинная и содержит несколько команд, то разбиваешь на несколько частей и ищешь по отдельности.

Так сам себе все и объяснишь.
0
29.08.2011, 14:51
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
29.08.2011, 14:51

Ползунок (slider) на JavaScript
Помогите пожалуйста, очень срочно нужен простенький ползунок на JS, у кого...

Ползунок с полем ввода значений
Как можно сделать ползунок с полем ввода значений как на сайте...

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


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru