Фильтр по:
  

Как приделать кнопки +/- к импуту?

Как сделать...

  • Страница 1 из 1
  • 1
Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Как приделать кнопки +/- к импуту? (Решение на JavaScript.)
Как приделать кнопки +/- к импуту?
Дата: Суббота, 14.05.2011, 15:32 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 For Info-Mozz
Quote (Info-Mozz)
fflesh,
Если не трудно скиньте ваше решение сюда или в личку.
Могу показать другое решение в ксс там все отображается как надо и так сказать домыслил, но скрипт работает через раз, нашел скрипт но не смог поменять в ксс это так понял не все так как кнопки идут в том числе с файла js, тут я и пропал....
Спасибо.

...
Держи ...
☑ Правленый скрипт ...

Добавлено:
Класс для блоков управляющих элементов, и изменено место вставки.

Стили:

Code
<style type="text/css">
/* Outside styles */
input.uz_cnt_input_outside{float:left;height:16px;width:40px;}
.uz_cnt_arrows_wrap_box_outside{display:inline-block;width:54px;}
/* Inside styles */
input.uz_cnt_input_inside{border:0;background:url('http://likbezz.ru/_source/_ico/2011/01/bg_txt.gif') repeat-x bottom left;height:16px;width:40px;margin:0;padding:0 3px;}
.uz_cnt_arrows_wrap_box_inside{border:1px solid #bdbcbd;text-align:right;background:url('http://likbezz.ru/_source/_ico/2011/01/bg_txt.gif') repeat-x bottom left;display:inline-block;width:78px;vertical-align:middle;margin-bottom:2px;padding:0 2px;}/*40+(16*2)+(2*2)+(1*2)=width:78px*/
.uz_cnt_arrow{margin:0;padding:0;}
.uz_cnt_arrows_wrap_box_inside .arrow_left{float:left;width:16px;}
.uz_cnt_arrows_wrap_box_inside .arrow_right{float:right;width:16px;}
/*rest*/
form.buy_form{width:200px;margin:0 auto;text-align:right;}
/* EndStyle */
</style>

...

Html:

Code
<form name="qty_207_0" onSubmit="return false;" class="buy_form">
<input type=text name="qty" value="1" class="txt" postChangeCB="alert(this.value);" /> шт<br>
Количество <input type=text name="qty" value="1" class="txt" /> шт<br>
Количество <input type=text name="qty" value="1" class="txt" /> шт<br>
</form>

...

☑ Пример ...
...

Прикрепления: uzCntControl.js (3.7 Kb)

 
Дата: Суббота, 14.05.2011, 19:34 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown
Quote (Info-Mozz)
Но он не так работает:
- считает с права на лево, а был с лева на право;

Вообще-то он был сверху вниз)))
- поменяйте местами, да и всё (uzCntControl.changeVal('"+index+"', 'down')) - какие проблемы? - кнопки вообще можете любые нарисовать - хоть вверх, хоть вниз ....

☑ Пример v2 ....

Quote (Info-Mozz)
- то что Вы сделали по поводу кнопок это хорошо, но как бы их вынести за рамочку, посмотрите пожалуйста ту картинку которую показывал на форуме юкоза. Там кнопки за рамкой.

- Убери в стилях бордер у общего блока (uz_cnt_arrows_wrap_box_inside) .... назначь его импуту (uz_cnt_input_inside) ....

☑ Пример v3 ...
CSS


Quote (Info-Mozz)
Одним ксс так понимаю не обойтись ведь надо затрагивать и скрипт?

- Ну естественно - поменять имя функции на кнопки местами, вместо «down» поставить «up» .... и наоборот)
Quote (Code)
<div class='arrow_left'>
<img src='http://likbezz.ru/_source/_ico/2011/01/arrow_left.gif' class='uz_cnt_arrow' onMouseUp=\"javascript:uzCntControl.changeVal('"+index+"', 'down')\">
</div>
<div class='arrow_right'>
<img src='http://likbezz.ru/_source/_ico/2011/01/arrow_right.gif' class='uz_cnt_arrow' onMouseUp=\"javascript:uzCntControl.changeVal('"+index+"', 'up')\">
</div>

Держи ...
☑ Правленый скрипт v2 ...

Добавлено:
Класс для блоков управляющих элементов, изменено место вставки, поменял местами функции +/-.
...

 
Дата: Воскресенье, 15.05.2011, 12:03 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown
Quote (Info-Mozz)
Поставил все нормально - спасибо.
Но есть три момента, которые не разобрал:
- как поставить цифру по центру в рамке инпута?

Добавить инпуты с классом «input.uz_cnt_input_inside» свойство: «text-align:center;» - это в СЫЫ:
Quote (Code)
input.uz_cnt_input_inside{border:1px solid #bdbcbd;background:url('http://likbezz.ru/_source/_ico/2011/01/bg_txt.gif') repeat-x bottom left;height:16px;width:40px;margin:0 2px;padding:0 3px;text-align:center;}

Quote (Info-Mozz)
- это "form.buy_form{width:200px;margin:0 auto;text-align:right;}" положение зафиксированное, возможно без дополнительной фиксации, так как в html она и так будет в таблице, а так получается съежает у меня на право...?

- Возможно - в стилях же подписано - /*rest*/ - то бишь - чисто мои, для красивого отображения в примере. Фиксировать не обязательно.

Quote (Info-Mozz)
- решил малость изменить вот что получилось:
результат просто удивил меня в браузерах: Opera, Mozilla, Google Chrome, IE 8, Safari - что интересно в одном нормально а в др. стрелка уежает?

Скриншот.
В каком “уезжает”?

 
Дата: Воскресенье, 15.05.2011, 13:56 |
Рядовой
Группа: Пользователи
Сообщений: 2
Награды: 0
Репутация: 0
Статус: Offline


 Я извиняюсь, теперь у Вас можно и писать.

Добавлено (15.05.2011, 13:56)
---------------------------------------------

Code
/* Outside styles */
input.uz_cnt_input_outside{float:left;height:16px;width:40px;}
.uz_cnt_arrows_wrap_box_outside{display:inline-block;width:50px;}
/* Inside styles */
input.uz_cnt_input_inside{border:1px solid #bdbcbd;background:url('/bg_txt.gif') repeat-x bottom center;height:16px;width:30px;margin:0 2px;padding:0 3px;text-align:center;}
.uz_cnt_arrows_wrap_box_inside{/*border:1px solid #bdbcbd;*/text-align:right;background:url('bg_txt.gif') repeat-x bottom left;display:inline-block;width:60px;vertical-align:middle;margin-bottom:2px;padding:0 2px;}/*40+(16*2)+(2*2)+(2*2)=width:60px*/
.uz_cnt_arrow{margin:0;padding:0;}
.uz_cnt_arrows_wrap_box_inside .arrow_left{float:left;width:5px;}
.uz_cnt_arrows_wrap_box_inside .arrow_right{float:right;width:5px;}

/* EndStyle */

удивительно в IE все нормально а в Opere или Google Chrome левая кнопка далеко уходит, так размеры установил но получается один браузер понимает то другой нет?

Сообщение отредактировал likbezz - Воскресенье, 15.05.2011, 14:46
 
Дата: Воскресенье, 15.05.2011, 14:41 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Info-Mozz,
Quote (Info-Mozz)
удивительно в IE все нормально а в Opere или Google Chrome левая кнопка далеко уходит

Ничего удивительного.
Нормальные браузеры считают ширину по правилам W3C, а ИЕ - по другому, в зависимости от доктайпа ... и версии)
Читай (the-box-model).

Quote (Info-Mozz)
так размеры установил но получается один браузер понимает то другой нет?

Во плохо размеры установили - на глаз видно, что не актуальные.
Посчитайте: 30+(1*2)+(2*2)+(3*2)+(2*2)+(5*2) никак не равно 60px;
...

 
Дата: Воскресенье, 15.05.2011, 17:26 |
Рядовой
Группа: Пользователи
Сообщений: 2
Награды: 0
Репутация: 0
Статус: Offline


 likbezz,

думал малой "кровью" обойдется а нет, короче то что подошло для Opera, Google Chrome, Safari, Mozilla - отставил (подогнав по нужным размерам), а вот для IE пришлось в этом случае выносить отдельный стиль, ни чего теперь вроде как.

кстати, хотел спросить:

если инпут увеличить (высоту), то к сожалению и боковые кнопки идут верх, как можно зафиксировать по центру, высоту планирую сделать 25px.

Спасибо.

 
Дата: Воскресенье, 15.05.2011, 17:40 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Info-Mozz,
Quote (Info-Mozz)
как можно зафиксировать по центру, высоту планирую сделать 25px.

Указать картинкам кнопок отступ сверху. Значение тоже не сложно посчитать ... или определить опытным путём)

 
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Как приделать кнопки +/- к импуту? (Решение на JavaScript.)
  • Страница 1 из 1
  • 1
Поиск:


Мобильная версия