-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathadresator_demo.html
165 lines (150 loc) · 10.4 KB
/
adresator_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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Ввод адреса с помощью Adresator</title>
<!-- adresator -->
<link type="text/css" href="adresator.css" media="screen" rel="stylesheet" />
<script type="text/javascript" src="jquery/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.adresator.js" ></script>
<!-- adresator config
<script type="text/javascript">
var ADRESATOR_OPTIONS =
{
city:"#gorod", // HTML-поле для города - <input type="text" id="gorod">
};
</script>
-->
<!-- tabs -->
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.20.custom.min.js"></script>
<link type="text/css" href="jquery/css/cupertino/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<!-- ga -->
<script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-31653531-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script>
</head>
<body>
<table border="0" height="320px" width="100%"><tr>
<td valign="top">
<pre>
Введите несколько первых букв
названия своей улицы
(на данный момент
поддерживается большинство улиц
крупных городов РФ)
или свой почтовый индекс (6 цифр).
<input type="text" id="adresator_street" value="Лени"> улица
<input type="text" id="adresator_zip" value=""> индекс
<hr width="270px" align="left">
<input type="text" id="adresator_building" value=""> дом, строение
<input type="text" id="adresator_city" value=""> город
<input type="text" id="adresator_area" value=""> район
<input type="text" id="adresator_region" value=""> область, край
<hr width="170px" align="left">Условия бесплатного использования:
1. узнаваемый логотип adresator
около поля ввода улицы
2. приветствуется ссылка на
<a href="http://explore.to">Explore.To</a>
(проект бегает на их железе)
<hr width="170px" align="left">Powered by <a href="http://explore.to">Explore.To</a>
</pre>
</td>
<td valign="top" width="100%">
<div id="tabs" style="font-size: 14px;">
<ul>
<li><a href="#tabs-1">НЕ знаю Javascript</a></li>
<li><a href="#tabs-2">Немного знаю JS</a></li>
<li><a href="#tabs-3">Advanced JS</a></li>
</ul>
<div id="tabs-1">
<ol>
<li> В блоке <HEAD>, перед самым его закрытием, надо указать<br>
<textarea rows="3" cols="98" style="font-family: monospace; font-size: 11px; border: 0" spellcheck="false">
<link type="text/css" href="http://adresator.com/adresator.css" media="screen" rel="stylesheet" />
<script type="text/javascript" src="http://adresator.com/jquery/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://adresator.com/jquery.adresator.js" ></script></textarea><br>
Замечание: Если jquery уже используется, то второй раз его загружать не надо,<br>
достаточно будет загрузить <i>adresator.css</i> и <i>jquery.adresator.js</i><br><br>
<li> Поля формы ввода адреса должны быть такими:
<table border="1" cellpadding="1" cellspacing="0">
<tr><td>Часть адреса</td><td>Поле ввода</td></tr>
<tr><td>Улица</td><td><code><input type="text" id="<b>adresator_street</b>"></code></td></tr>
<tr><td>Индекс</td><td><code><input type="text" id="<b>adresator_zip</b>"></code></td></tr>
<tr><td></td><td><code></code></td></tr>
<tr><td>Дом (строение, блок, ...)</td><td><code><input type="text" id="<b>adresator_building</b>"></code></td></tr>
<tr><td>Город</td><td><code><input type="text" id="<b>adresator_city</b>"></code></td></tr>
<tr><td>Район</td><td><code><input type="text" id="<b>adresator_area</b>"></code></td></tr>
<tr><td>Регион (область, край, ...)</td><td><code><input type="text" id="<b>adresator_region</b>"></code></td></tr>
<tr><td></td><td><code></code></td></tr>
</table>
<br>
<li> Пример: форма слева задаётся следующим образом:<br>
<textarea rows="9" cols="60" style="font-family: monospace; font-size: 12px; border: 0" spellcheck="false"><pre>
<input type="text" id="adresator_street"> улица
<input type="text" id="adresator_zip" > индекс
<hr width="270px" align="left">
<input type="text" id="adresator_building" > дом, строение
<input type="text" id="adresator_city" > город
<input type="text" id="adresator_area" > район
<input type="text" id="adresator_region" > область, край
</pre></textarea>
</ol>
</div>
<div id="tabs-2">
<ol>
<li>Необходимо прочитать содержимое вкладки "НЕ знаю Javascript"</a>
<li>Базовый навык JS предоставляет некоторое удобство в конфигурировании.<br>
В частности, можно указать свои идентификаторы полей ввода
для отслеживания adresator.
<p>Делается это следующим образом. Внутри HEAD, после подключения <i>jquery.adresator.js</i>,
объявляется переменная <code>ADRESATOR_OPTIONS</code>, в которой указывается, какие поля на странице использовать для авто-заполнения. Например,<br>
<textarea rows="14" cols="95" style="font-family: monospace; font-size: 12px; border: 0" spellcheck="false">
<head>
...
<script type="text/javascript">
var ADRESATOR_OPTIONS =
{
city:"#gorod", // HTML-поле для города - <input type="text" id="gorod">
zipcode:"#index", // HTML-поле для индекса - <input type="text" id="index">
region:"#oblast", // HTML-поле для региона - <input type="text" id="oblast">
street:"#ul", // HTML-поле для улицы - <input type="text" id="ul">
building:"#dom", // HTML-поле для № дома - <input type="text" id="dom">
area:"" // указание adresator не заполнять автоматически поле района
};
</script>
</head></textarea>
<p>Не обязательно указывать идентификаторы всех полей ввода,<br>
достаточно только тех, которые должны отличаться от принятых по умолчанию<br>
(см. описание в предыдущей вкладке).
</ol>
</div>
<div id="tabs-3">
<ol>
<li>Содержимое этого раздела предполагает знакомство с содержанием других табов.
<li>Данный jquery-плагин (<a href="jquery.adresator.js" target="_blank"><i>jquery.adresator.js</i></a>) реализован с использованием autocomplete.
Он использует данные, отдаваемые сервисом<br>
<code>http://adresator.com/api/v1/?q=<i>улица</i>|<i>индекс</i></code><br>
например<br>
<code><a href="http://adresator.com/api/v1/?q=сове" target="_blank">http://adresator.com/api/v1/?q=сове</a></code><br>
<code><a href="http://adresator.com/api/v1/?q=432063" target="_blank">http://adresator.com/api/v1/?q=432063</a></code>
<li>Упомянутый jquery-плагин и php-service написаны на скорую руку "для проверки концепции", но вроде работают. Пожелания и дополнения приветствуются, особенно в виде <code>pull request</code> в <a href="http://github.com/relev/adresator">репозиторий на github</a>, или написании других способов отображения результатов, возвращаемых сервисом.
<li>В случае необходимости можно обслуживать несколько независимых форм ввода на одной странице,
вызвав необходимое число раз инициализацию плагина с нужными параметрами<br>
<textarea rows="3" cols="35" style="font-family: monospace; font-size: 12px; border: 0" spellcheck="false">
jQuery(function() {
jQuery.zipstatic(params);
});</textarea><br>
где <code>params</code> имеет структуру, идентичную <code>ADRESATOR_OPTIONS</code> (см. предыдущий таб).<br>
Первый вызов этого кода с <code>ADRESATOR_OPTIONS</code> в качестве параметра осуществляется плагином при загрузке.
<li>Если в хеше <code>ADRESATOR_OPTIONS</code> ключу <code>callback</code> присвоена какая-либо функция, она будет вызвана при авто-заполнении с данными оного в виде хеша.
<li>HTTP API (TODO: дописать!)
<li>В ближайшем будущем планируется переехать с MySQL на Redis, тогда задержка ответов станет ещё короче.
<li>Сервис хостится на Amazon, со всеми плюсами и минусами.
<li>Данные, которыми оперирует сервис, собраны на основе KLADR, фактически единственное отличие - правильный upcase, так что особого смысла выкачивать базу через HTTP нет.
</ol>
</div>
</div>
</td>
</tr></table>
<script>
$(function() { $( "#tabs" ).tabs(); });
</script>
</body>
</html>