-
Notifications
You must be signed in to change notification settings - Fork 8
/
demo.html
85 lines (79 loc) · 4.92 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script type = "text/javascript" src = "zepto-1.0rc1.js"></script>
<script type = "text/javascript" src = "zepto-autocomplete.js"></script>
<script type = "text/javascript">
(function($){
$(function(){
$('#on_plugin').change(function(){
var scrolling = true;
scrollable = $('#scrollable').is(':checked') ? true : false;
var maxOptions = $('#maxOptions').val();
if (maxOptions) {
$('#cities').autoComplete({data: ['Москва', 'Санкт-Петербург', 'Дели', 'Лондон', 'Рим', 'Мадрид', 'Париж', 'Берлин', 'Вашингтон', 'Лиссабон', 'Бразилиа', 'Амстердам', 'Брюссель', 'Осло', 'Хельсинки', 'Копенгаген'], maxOptions: maxOptions, scrollable: scrollable});
}
else {
$('#cities').autoComplete({data: ['Москва', 'Санкт-Петербург', 'Дели', 'Лондон', 'Рим', 'Мадрид', 'Париж', 'Берлин', 'Вашингтон', 'Лиссабон', 'Бразилиа', 'Амстердам', 'Брюссель', 'Осло', 'Хельсинки', 'Копенгаген'], scrollable: scrollable});
}
});
$('#off_plugin').change(function() {
$('#cities').autoComplete('destroy');
});
$('#add').click(function() {
if($('#addCity').val()) {
$('#cities').autoComplete('add', $('#addCity').val());
$('#addCity').val('');
}
return false;
});
$('#countries').autoComplete({data: ['США','Россия','Германия','Канада','ЮАР','Китай','Индия','Белоруссия','Украина','Иран','Сирия','Бразилия']});
$('#continents').autoComplete({data: ['Северная Америка','Южная Америка','Евразия', 'Африка', 'Австралия', 'Антарктида']});
$('#cities').autoComplete({data: ['Москва', 'Санкт-Петербург', 'Дели', 'Лондон', 'Рим', 'Мадрид', 'Париж', 'Берлин', 'Вашингтон', 'Лиссабон', 'Бразилиа', 'Амстердам', 'Брюссель', 'Осло', 'Хельсинки', 'Копенгаген'], maxOptions: 5, scrollable: true});
//!! это второе применение плагина не сработает, и не должно сработать, стоит защита от вторичного применения
$('#cities').autoComplete({data: ['Москва', 'Санкт-Петербург', 'Мадрид', 'Париж', 'Вашингтон'], maxOptions: 5});
});
}(Zepto))
</script>
<style type = "text/css">
/*body {background-color: #D79CE6;}*/
input {margin: 5px;}
fieldset {background-color: #7FACEB;}
fieldset legend {
color: brown;
font-size: 20px;
font-weight: bold;
}
fieldset label {color: white;}
.long {width: 250px;}
.informer {
background-color: #BC51D6;
padding: 20px 0 20px 10px;
border: 1px solid black;
color: white;
font-size: 19px;
}
</style>
</head>
<body>
<p class = "informer">Демо плагина автозаполнения (zepto framework)</p>
<form>
<fieldset>
<legend>Пример</legend>
<label for = "countries">Страны: </label><input autocomplete = "off" type = "text" id = "countries" class = "long"></input>
<label for = "continents">Континенты: </label><input autocomplete = "off" type = "text" id = "continents"></input>
<br/>
<label for = "cities">Города: </label><input autocomplete = "off" type = "text" id = "cities"></input>
<br/>
<p style ="color: white"><b>Включение/выключение плагина для поля с городами</b><br/>
<input type = "radio" value = "on" id = "on_plugin" name = "group1" checked>Включить плагин<br/>
<input type = "radio" value = "off" id = "off_plugin" name = "group1">Выключить плагин<br/>
<input type = "checkbox" name = "scrollable" id = "scrollable" checked>Скроллинг</input><br/>
<label for = "maxOptions">Допустимое максимальное количество вариантов</label><input type = "text" id = "maxOptions"></input>
</p>
<label for = "addCity">Добавить город</label><input type = "text" id = "addCity"></input><button id = "add">+</button>
</fieldset>
</form>
</body>
</html>