ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Стилизация веб-формы с помощью виджета slider плагина jQuery UI

Для стилизации веб-формы нам понадобится плагин jQuery UI. JQuery UI предоставляет собой набор готовых виджетов предназначенных для создания пользовательского интерфейса. Внешний вид каждого виджета может быть настроен либо с помощью выбора одной из стандартных тем доступных при скачивании библиотеки, либо с помощью настройщика тем, либо вручную путем редактирования файла jquery-ui-1.8.12.custom.css. Для улучшения интерфейса формы, плагин предоставляет виджет Slider. Из всего многообразия виджета Slider нас будет интересовать Custom handle и Range with fixed maximum, с помощью которых мы стилизуем веб-форму рассмотренную ранее.

Виджет slider может иметь один или несколько ползунков. Ползунки могут перетаскиваться с помощью указателя мыши или стрелок на клавиатуре.

Познакомится с документацией виджета можно на сайте jQuery на странице http://api.jqueryui.com/slider/. Но мы не будем заморачиваться и сразу же перейдем к выбору slider в разделе сайта Demos, перейдя на страницу http://jqueryui.com/slider/. В правом меню веб-страницы находим нужные нам темы.

Стилизация формы с помощью Custom handle

Открываем страницу Custom handle, знакомимся с демо-версией и кликнув мышью по раскрывающейся ссылке view source cкопируем код виджета.

Интегрируем полученный код на нашу веб-страницу. Теперь с помощью ползунков мы можем устанавливать количество и цену товара, а кликнув по кнопке Отправить, получить итоговую стоимость покупки.

В настройке ползунков нас будет интересовать их максимальные значения. По умолчанию они равны 100 единицам. Допустим, нам надо установит max количество продоваемого товара на уровне 150 единиц, а максимальную цену 50 у.е. Чтобы узнать как это сделать перейдем по ссылке API documentation и посмотрим, что об этом говорится в документации. В навигационном меню, находим соответствующую строку max и попадаем на описание данного действия. Итак, чтобы установить max значения ползунков необходимо ввестис ледующий код:


$( ".selector" ).slider({
  max: 50
});

В конечном итоге код будет выглядеть следующим образом:


$(document).ready(function(e) {
$( "#quantity" ).slider({
max: 150
});
$( "#price" ).slider({
max: 50
})
var handle = $("#custom-handle");
$( "#quantity" ).slider({
create: function() {
handle.text($( this ).slider("value"));
},
slide: function(event, ui) {
handle.text(ui.value);
}
});
var handle1 = $( "#custom-handle1" );
$( "#price" ).slider({
create: function() {
handle1.text( $( this ).slider( "value" ) );
},
slide: function( event, ui ) {
handle1.text( ui.value );
}
});
var ajax_request;
$("form").submit(function(event) {
var handle = $("#custom-handle" ).text();
var initCost = $("#custom-handle1" ).text();
var total = handle*initCost;
total = total.toFixed(2);
$("#total").attr("value",total);
event.preventDefault();
var vars=$(this).serialize();
var furl=$(this).attr('action');
ajax_request=$.ajax({
url: furl,
data: vars,
success: function(msg)
{
console.log(msg);
}
});
});
});
<!DOCTYPE html>
<html>
<title>Стилизация веб-формы с помощью виджета Slider - Custom handle</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<link href="../../css/w3.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#custom-handle,#custom-handle1{
width: 3em;
height: 1.6em;
top: 50%;
margin-top: -.8em;
text-align: center;
line-height: 1.6em;
}
#quantity, #price{width:150px; margin:25px 0 0 110px}
input[type="text"]{width:60px; clear:left; float:left; margin:-20px 0 0 100px}
input[type="range"]{width:200px; clear:left; float:left; margin:-20px 0 0 200px}
label{ clear:left; margin-top:20px}
#submit{margin:30px 0 0 -50px; float:left}
.w3-form p{margin:20px 0 0 0;}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function(e) {
$( "#quantity" ).slider({
max: 150
});
$( "#price" ).slider({
max: 50
})
var handle = $("#custom-handle");
$( "#quantity" ).slider({
create: function() {
handle.text($( this ).slider("value"));
},
slide: function(event, ui) {
handle.text(ui.value);
}
});
var handle1 = $( "#custom-handle1" );
$( "#price" ).slider({
create: function() {
handle1.text( $( this ).slider( "value" ) );
},
slide: function( event, ui ) {
handle1.text( ui.value );
}
});
var ajax_request;
$("form").submit(function(event) {
var handle = $("#custom-handle" ).text();
var initCost = $("#custom-handle1" ).text();
var total = handle*initCost;
total = total.toFixed(2);
$("#total").attr("value",total);
event.preventDefault();
var vars=$(this).serialize();
var furl=$(this).attr('action');
ajax_request=$.ajax({
url: furl,
data: vars,
success: function(msg)
{
console.log(msg);
}
});
});
});
</script>
<body class="w3-light-grey">
<div class="w3-content w3-layout-container" >
<div class="w3-twothird w3-col s10" style="margin:0 10%">
<div class="w3-container w3-card-2 w3-white w3-margin-bottom" style="height:550px" >
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-indent fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Расчет стоимости заказа</h2>
<form action="#" method="post" name="signup" id="signup" class="w3-form">
<fieldset class=" w3-card-4" style="min-height:300px">
<legend class="w3-card-2 w3-large" style="padding:0 5px">Расчет стоимости заказа</legend>
<label for="quantity" class="w3-left" id="pick">Количество:</label>
<div id="quantity">
<div id="custom-handle" class="ui-slider-handle"></div>
</div>
<label for="price" class="w3-left">Цена:</label>
<div id="price">
<div id="custom-handle1" class="ui-slider-handle"></div>
</div>
<label for="total" class="w3-left">Итого:</label>
<input type="text" name="total" id="total" >
<input type="submit" name="submit" id="submit" value="Отправить" >
</fieldset>
</form>
</div>
<div style=" clear:both"></div>
<footer class="w3-container w3-teal w3-center w3-margin-top " style="height:80px; padding-top:20px;">
<i class="fa fa-facebook-official w3-hover-text-indigo w3-large"></i>
<i class="fa fa-instagram w3-hover-text-purple w3-large"></i>
<i class="fa fa-snapchat w3-hover-text-yellow w3-large"></i>
<i class="fa fa-pinterest-p w3-hover-text-red w3-large"></i>
<i class="fa fa-twitter w3-hover-text-light-blue w3-large"></i>
<i class="fa fa-linkedin w3-hover-text-indigo w3-large"></i>
</footer>
</div>
</body>
</html>

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

Чтобы иметь возможность остановить отправку формы на пол-пути необходимо осуществлять саму отправку при помощи Ajax. Для этого применим следующий код:


var ajax_request;
event.preventDefault();
var vars=$(this).serialize();
var furl=$(this).attr(\'action\');
ajax_request=$.ajax({
   		    url: furl,
			data: vars,
			success: function(msg)
			{
				console.log(msg);
			}
		});

При отправке формы будет происходить следующее:

  1. отмениться стандартное действие формы по сабмиту (собственно, не произойдет перезагрузка страницы);
  2. данные всех поле в форме запишуться в переменную vars в виде:
  3. var=value&var2=value2&…
  4. значение атрибута action формы запишеться в переменную furl;
  5. по указанному адресу отправяться введенные данные при помощи технологии Ajax, а по завершении отправки ответ сервера выведелься в console.

А какую роль выполняет переменная ajax_request? Именно благодаря ей мы и сможем остановить загрузку формы. Эта переманная должна быть глобальной, или по крайней мере в области видимости и события отправки формы и клика на кнопку остановки отправки формы.

Стилизация формы с помощью Range with fixed maximum

Механизм интеграции на веб-страницу данного виджета такой же как предыдущего, поэтому останавливаться на нем не буду.

Код после установки виджета будет такой:


$(document).ready(function(e) {
$( "#slider-range-max" ).slider({
range: "max",
min: 0,
max: 150,
value: 2,
slide: function( event, ui ) {
$( "#quantity" ).val( ui.value );
}
});
$( "#quantity" ).val( $( "#slider-range-max" ).slider( "value" ) );

$( "#slider-range-max1" ).slider({
range: "max",
min: 0,
max: 50,
value: 2,
slide: function( event, ui ) {
$( "#price" ).val( ui.value );
}
});
$( "#price" ).val( $( "#slider-range-max1" ).slider( "value" ) );

var ajax_request;
$("form").submit(function(event) {
var handle = $("#quantity" ).val();
var initCost = $("#price" ).val();
var total = handle*initCost;
total = total.toFixed(2);
$("#total").attr("value",total);
event.preventDefault();
var vars=$(this).serialize();
var furl=$(this).attr('action');
ajax_request=$.ajax({
url: furl,
data: vars,
success: function(msg)
{
console.log(msg);
}
});
});
});
<!DOCTYPE html>
<html>
<title>Стилизация веб-формы с помощью виджета Slider - Range with fixed maximum</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<link href="../../css/w3.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#slider-range-max,#slider-range-max1{
margin:25px 0 0 150px ;
width:200px;
}
#quantity, #price{width:150px; margin:-22px 0 0 110px}
input[type="text"]{width:60px; clear:left; float:left; margin:-20px 0 0 100px}
input[type="range"]{width:200px; clear:left; float:left; margin:-20px 0 0 200px}
label{ clear:left; margin-top:20px}
#submit{margin:30px 0 0 -50px; float:left}
.w3-form p{margin:20px 0 0 0;}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function(e) {
$( "#slider-range-max" ).slider({
range: "max",
min: 0,
max: 150,
value: 2,
slide: function( event, ui ) {
$( "#quantity" ).val( ui.value );
}
});
$( "#quantity" ).val( $( "#slider-range-max" ).slider( "value" ) );

$( "#slider-range-max1" ).slider({
range: "max",
min: 0,
max: 50,
value: 2,
slide: function( event, ui ) {
$( "#price" ).val( ui.value );
}
});
$( "#price" ).val( $( "#slider-range-max1" ).slider( "value" ) );

var ajax_request;
$("form").submit(function(event) {
var handle = $("#quantity" ).val();
var initCost = $("#price" ).val();
var total = handle*initCost;
total = total.toFixed(2);
$("#total").attr("value",total);
event.preventDefault();
var vars=$(this).serialize();
var furl=$(this).attr('action');
ajax_request=$.ajax({
url: furl,
data: vars,
success: function(msg)
{
console.log(msg);
}
});
});
});
</script>
<body class="w3-light-grey">
<div class="w3-content w3-layout-container" >
<div class="w3-twothird w3-col s10" style="margin:0 10%">
<div class="w3-container w3-card-2 w3-white w3-margin-bottom" style="height:550px" >
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-indent fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Расчет стоимости заказа</h2>
<form action="#" method="post" name="signup" id="signup" class="w3-form">
<fieldset class=" w3-card-4" style="min-height:300px">
<legend class="w3-card-2 w3-large" style="padding:0 5px">Расчет стоимости заказа</legend>
<label for="quantity" class="w3-left" id="pick">Количество:</label>
<input type="text" id="quantity" readonly style="border:0; color:#f6931f; font-weight:bold;">
<div id="slider-range-max"></div><br>

<label for="price" class="w3-left">Цена:</label>
<input type="text" id="price" readonly style="border:0; color:#f6931f; font-weight:bold;">
<div id="slider-range-max1"></div>
<label for="total" class="w3-left">Итого:</label>
<input type="text" name="total" id="total" >
<input type="submit" name="submit" id="submit" value="Отправить" >
</fieldset>
</form>
</div>
<div style=" clear:both"></div>
<footer class="w3-container w3-teal w3-center w3-margin-top " style="height:80px; padding-top:20px;">
<i class="fa fa-facebook-official w3-hover-text-indigo w3-large"></i>
<i class="fa fa-instagram w3-hover-text-purple w3-large"></i>
<i class="fa fa-snapchat w3-hover-text-yellow w3-large"></i>
<i class="fa fa-pinterest-p w3-hover-text-red w3-large"></i>
<i class="fa fa-twitter w3-hover-text-light-blue w3-large"></i>
<i class="fa fa-linkedin w3-hover-text-indigo w3-large"></i>
</footer>
</div>
</body>
</html>

Примечание. Без подключенного Интернета виджет работать не будет. Для работы в автономном режиме необходимо скачать плагин jQuery UI с сайта jQuery, распоковать архив и папку с файлами разместить в корневой директории сайта. После этого, подключите к интегрируемой веб-странице CSS и JavaScript файлы плагина, расположив их между тегами <head></head>