Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > инкремент/декремент в поле при клике


Автор: Igor_K 23.6.2008, 21:36
Всем привет!
Ищу решение как сделать такую штуку:
user posted image
то есть перключатель такой. гдето видел скрипт, но не помню где. а в гугле не знаю по каким словам искать.
Может есть у когото? ПОделитесь пожалуйста!

Спасибо!

Автор: Sniper 24.6.2008, 09:20
такой переключатель скорее всего (читай: ИМХО) сделан при помощи двух картинок

я делал просто кнопки с двух сторон от поля + javascript.

Автор: comtat 24.6.2008, 09:44
Я думаю вот http://forum.vingrad.ru/forum/topic-216633.html сможет тебе помочь
Нужно только внешний вид придать и немного подправить скрипт

Автор: bars80080 24.6.2008, 15:29
я помнится, пытался такой сделать, но совсем до ума довести не удалось. однако, работает:
Код

<script language="javascript">
var posary = Array(0, -22, -44, -66, -88);
function cnp(x) {
        document.getElementById('con').style.backgroundPosition = '80 ' + posary[x] + 'px';
        if(x == 3) { document.qw.inp.value++; }
        else if(x == 4) document.qw.inp.value--; }
</script>
<style>
body { margin: 0px; padding: 0px; border: 0px; }
div#con { width: 100px; height: 20px; background: url("updown.png") no-repeat top right; position: relative;
    float: left; left: 200px; top: 200px; }
div#abs { position: absolute; left: 80px; }
div#qwe { position: absolute; }
* html div#qwe { top: -1px; }
div#qwe .inpa { width: 80px; height: 20px; text-align: right; }
</style>
<body>
<form name="qw">
<div id="con" name="op">
<div id="qwe"><input type="text" name="inp" value="0" class="inpa" /></div>
<div id="abs">
<img width="20" height="20" border="0" usemap="#map1" src="empty.png" />
<map name="map1">
<area shape="poly" coords="0, 0, 20, 0, 0, 20" onmouseover="cnp(1)" onmouseout="cnp(0)" onmousedown="cnp(3)" onmouseup="cnp(1)" />
<area shape="poly" coords="0, 20, 20, 0, 20, 20" onmouseover="cnp(2)" onmouseout="cnp(0)" onmousedown="cnp(4)" onmouseup="cnp(2)" /></map>
</div></div>
</form>
</body>

Автор: Igor_K 24.6.2008, 16:27
bars80080, спасибо большое. Это мне подойдет! smile 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)