basket-semena
HTML
<html>
<body>
<div class="main-column">
<h1>Список покупок</h1><div class='basket-list'><form method='post'><table class='responsive'><thead><tr><th class='left'>Товар</th><th>Цена</th><th>Количество</th><th>Сумма</th></tr></thead><tbody><tr>
<td class='left'>
<div class='h3'><a href='/tovar/46724-Luk-Narvito-NS-100sht.html'>Лук Нарвито НС 100шт</a></div>
</td>
<td><span id='cena'>18,00</span></td>
<td><input type='text' name='prod[46724]' id='kolvo' value='3' class='num' onChange='ChangeSum(46724)'></td>
<td><span id='summa'>54,00</span></td>
</tr><tr>
<td class='left'>
<div class='h3'><a href='/tovar/44817-Torfjanaja-tabletka-Dzhifi-7-36mm.html'>Торфяная таблетка Джифи-7 36мм</a></div>
</td>
<td><span id='cena'>6,50</span></td>
<td><input type='text' name='prod[44817]' id='kolvo' value='5' class='num' onChange='ChangeSum(44817)'></td>
<td><span id='summa'>32,50</span></td>
</tr><tr class='total'>
<td colspan='5'>
<span class='total-caption1'>Итого:</span>
<span class='total-caption2' id='itogo'>86,50</span>
<span class='total-caption3'> руб.</span>
</td>
</tr></tbody></table></form></div>
</div><!-- end main-column -->
</body>
</html>
CSS
@font-face {
font-family: 'cooperregular';
src: url('/fonts/cooper_allfont.ru-webfont.eot');
src: url('/fonts/cooper_allfont.ru-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/cooper_allfont.ru-webfont.woff') format('woff'),
url('/fonts/cooper_allfont.ru-webfont.svg#cooperregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Roboto-Regular';
src: url('/fonts/Roboto-Regular.eot');
src: url('/fonts/Roboto-Regular.woff') format('woff'),
url('/fonts/Roboto-Regular.ttf') format('truetype'),
url('/fonts/Roboto-Regular.svg#Roboto-Regular') format('svg'),
url('/fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Roboto-Bold';
src: url('/fonts/Roboto-Bold.eot');
src: url('/fonts/Roboto-Bold.woff') format('woff'),
url('/fonts/Roboto-Bold.ttf') format('truetype'),
url('/fonts/Roboto-Bold.svg#Roboto-Bold') format('svg'),
url('/fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Roboto-Medium';
src: url('/fonts/Roboto-Medium.eot');
src: url('/fonts/Roboto-Medium.woff') format('woff'),
url('/fonts/Roboto-Medium.ttf') format('truetype'),
url('/fonts/Roboto-Medium.svg#Roboto-Medium') format('svg'),
url('/fonts/Roboto-Medium.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding:...
JavaScript
// __________jquery.inputNumber.js_________
/**
* @author Nikolay Kostyurin <[email protected]>
* HTML5 Like enumerable input
*/
(function($) {
'use strict';
var InputNumber = function(el, options) {
this.el = el;
this.$el = $(el);
this.options = $.extend({}, this.defaults, options);
this.init();
};
InputNumber.prototype = {
el: null, // input element
$el: null, // input element
$wrap: null, //div wrapper element
options: null,
defaults: {
'negative': true,
'positive': true,
'wrapClass': 'ranged-input',
'inputClass': 'ranged-input__input',
'upClass': 'ranged-input__up',
'upTitle': 'Incrase',
'downClass': 'ranged-input__down',
'downTitle': 'Decrace'
},
init: function() {
var opts = this.options;
this.$el.wrap($('<div />', {'class':opts.wrapClass}));
this.$el.after(
$('<a />', {'class':opts.upClass, 'title':opts.upTitle}),
$('<a />', {'class':opts.downClass, 'title':opts.downTitle})
);
this.$el.addClass(opts.inputClass);
this.$wrap = this.$el.parent('.'+opts.wrapClass);
this.bindEvents();
},
bindEvents:function() {
var opts = this.options,
$el = this.$el,
self = this;
this.$wrap
.delegate('a.' + opts.downClass, 'click', function(e) {
self.down();
e.preventDefault();
})
.delegate('a.' + opts.upClass, 'click', function(e) {
self.up();
e.preventDefault();
});
$el
.on('change', function(e) {
if (e.currentTarget.value === '') e.currentTarget.value = 0;
})
...