Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > SpinBox


Автор: KVA 19.1.2010, 12:30
Мне необходимо засунуть в html что-то типа spinbox. Есть ли такое, а если нет, то как сподручными средствами(html+javascript) реализовать более или менее напоминающее? framework не пользуюсь, т.к. не умею smile 

Автор: bars80080 19.1.2010, 15:41
Цитата(KVA @  19.1.2010,  11:30 Найти цитируемый пост)
spinbox

spinbox - это что-то вращающееся?

Автор: Amphiluke 19.1.2010, 20:07
Вот примитивный примерчик.
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SpinEdit</title>
<style type="text/css">
    #spinbox {
        width: 175px;
    }
    #spinedit {
        display: block;
        float: left;
        width: 135px;
    }
    #spinbtns {
        float: right;
        height: 24px;
        margin: 0px;
        padding: 0px;
        width: 30px;
    }
    #spinbtns button {
        display: block;
        font-size: 7px;
        height: 12px;
        padding: 0px;
    }
</style>
<script type="text/javascript">
    function spinClick(direction) {
        var spinEdit = document.getElementById("spinedit");
        if (spinEdit == null) return true;
        var spinValue;
        try {
            spinValue = parseInt(spinEdit.value);
        } catch(e) {
            spinValue = (direction == "up") ? -1 : 1;
        }
        spinEdit.value = (direction == "up") ? ++spinValue : --spinValue;
        return false;
    }
</script>
</head>

<body>
    <form action="#">
        <div id="spinbox">
            <input type="text" id="spinedit" value="0" />
            <div id="spinbtns">
                <button id="btnup" onclick="return spinClick('up');">▲</button>
                <button id="btndown" onclick="return spinClick('down');">▼</button>
            </div>
        </div>
    </form>
</body>
</html>


P.S. Вроде, правильно понял, что требуется… smile

Автор: bars80080 19.1.2010, 23:41
аааа, апдаун, я его так и называю

Автор: KVA 20.1.2010, 12:30
Amphiluke корявенько как-то смотрится. Я уже нашла в jQuery smile 
http://www.softwareunity.com/jquery/JQuerySpinBtn/
http://www.noupe.com/ajax/45-fresh-out-of-the-oven-jquery-plugins.html

Только не получается(ввод по маске работает, а spin нет) 
Код

<html><head>
<link type="text/css" rel="stylesheet" href="jquery.spinbox.css" />
<script type='text/javascript' src='jquery-1.4.min.js'></script>
<script type='text/javascript' src='jquery.maskedinput-1.2.2.min.js'></script>
<script type="text/javascript" src="jquery.spinbox.js"></script>
</head>

<script language='javascript' type='text/javascript'>
       jQuery(function() {
          $('#date').mask('99/99/9999');
          $('#number').spin();
       });
</script>    
    
<form action="add.php" method="post">
<td>Тест</td>
    <tr>
    <td>Дата</td>
        <td><input id="date" type="text"  tabindex="1" /></td>
        <td><input type="text" id="number" value="0" /></td>
     </tr>
</form>    



Подскажите ошибку. smile 

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