<?xml version="1.0" encoding="UTF-8"?><!-- generator="wordpress/2.0.6" -->
<rss version="2.0" 
	xmlns:content="http://purl.org/rss/1.0/modules/content/">
<channel>
	<title>Comments on: Украшаем input с помощью CSS. Unobtrusive JavaScript.</title>
	<link>http://blog.sribna.com/ukrashaem-input-s-pomoschyu-css-unobtrusive-javascript.htm</link>
	<description>Web программирование и не только</description>
	<pubDate>Thu, 09 Feb 2012 21:16:02 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.0.6</generator>

	<item>
		<title>by: Иванов Сергей</title>
		<link>http://blog.sribna.com/ukrashaem-input-s-pomoschyu-css-unobtrusive-javascript.htm#comment-8466</link>
		<pubDate>Mon, 13 Apr 2009 16:33:08 +0000</pubDate>
		<guid>http://blog.sribna.com/ukrashaem-input-s-pomoschyu-css-unobtrusive-javascript.htm#comment-8466</guid>
					<description>Ага... Не заметил, извините. :) Просто с программированием я пока знаком плохо; больше как-то по теории... :)

Вот кросс-браузерный рабочий код, который решает проблему с "наезжанием" текста на изображение - он не такой элегантный, но то, что получается, выглядит и взаимодействует с пользователем совершенно точно также, как обычное поле ввода с изображением, но без наезжания:  

----------------------
Файл CSS.css:
----------------------

.csSeekLabel{
}

.csSeekEncloser{
 border         : solid 1px #848388 ;
}

.csSeekImage{
 border         : 0px ;
 padding-left   : 3px ; 
 vertical-align : -2px ; 
}
 
.csSeekText{
 border         : 0px ;
}

----------------------
Файл index.html
----------------------

//

  Введите текст для поиска:
  &lt;a&gt;
    
    
  &lt;/a&gt;
  


. По-моему, это работает. :)

Почему, правда, работает эта функция jQuery, '$', я так и не понял, :) но вот как, кажется, можно использовать jQuery в JavaScript для создания эквивалента поля ввода с изображением без наезжания текста на изображение при вводе слишком длинного текста. 

А статья пригодилась, спасибо.</description>
		<content:encoded><![CDATA[<p>Ага&#8230; Не заметил, извините. <img src='http://blog.sribna.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  Просто с программированием я пока знаком плохо; больше как-то по теории&#8230; <img src='http://blog.sribna.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>Вот кросс-браузерный рабочий код, который решает проблему с &#8220;наезжанием&#8221; текста на изображение - он не такой элегантный, но то, что получается, выглядит и взаимодействует с пользователем совершенно точно также, как обычное поле ввода с изображением, но без наезжания:  </p>
<p>&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-<br />
Файл CSS.css:<br />
&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-</p>
<p>.csSeekLabel{<br />
}</p>
<p>.csSeekEncloser{<br />
 border         : solid 1px #848388 ;<br />
}</p>
<p>.csSeekImage{<br />
 border         : 0px ;<br />
 padding-left   : 3px ;<br />
 vertical-align : -2px ;<br />
}</p>
<p>.csSeekText{<br />
 border         : 0px ;<br />
}</p>
<p>&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-<br />
Файл index.html<br />
&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-</p>
<p>//</p>
<p>  Введите текст для поиска:<br />
  <a></p>
<p>  </a></p>
<p>. По-моему, это работает. <img src='http://blog.sribna.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>Почему, правда, работает эта функция jQuery, &#8216;$&#8217;, я так и не понял, <img src='http://blog.sribna.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  но вот как, кажется, можно использовать jQuery в JavaScript для создания эквивалента поля ввода с изображением без наезжания текста на изображение при вводе слишком длинного текста. </p>
<p>А статья пригодилась, спасибо.
</p>
]]></content:encoded>
				</item>
	<item>
		<title>by: Yuriy Drozdov</title>
		<link>http://blog.sribna.com/ukrashaem-input-s-pomoschyu-css-unobtrusive-javascript.htm#comment-8465</link>
		<pubDate>Mon, 13 Apr 2009 08:42:30 +0000</pubDate>
		<guid>http://blog.sribna.com/ukrashaem-input-s-pomoschyu-css-unobtrusive-javascript.htm#comment-8465</guid>
					<description>Сергей, спасибо за Ваш комментарий. Но, если внимательней прочитать статью, то можно заметить эту строчку:
&lt;blockquote cite="http://blog.sribna.com"&gt;Реализуем это в javascript с помощью jquery.&lt;/blockquote&gt;
Она стоит как раз над рабочим примером. К тому же слово jquery является ссылкой на эту javascript библиотеку. Eсли Вы считаете, что это не достаточное объяснение, предложите лучшее. Спасибо.</description>
		<content:encoded><![CDATA[<p>Сергей, спасибо за Ваш комментарий. Но, если внимательней прочитать статью, то можно заметить эту строчку:</p>
<blockquote cite="http://blog.sribna.com"><p>Реализуем это в javascript с помощью jquery.</p></blockquote>
<p>Она стоит как раз над рабочим примером. К тому же слово jquery является ссылкой на эту javascript библиотеку. Eсли Вы считаете, что это не достаточное объяснение, предложите лучшее. Спасибо.
</p>
]]></content:encoded>
				</item>
	<item>
		<title>by: Иванов Сергей</title>
		<link>http://blog.sribna.com/ukrashaem-input-s-pomoschyu-css-unobtrusive-javascript.htm#comment-8464</link>
		<pubDate>Sun, 12 Apr 2009 12:33:28 +0000</pubDate>
		<guid>http://blog.sribna.com/ukrashaem-input-s-pomoschyu-css-unobtrusive-javascript.htm#comment-8464</guid>
					<description>Юрий: нескромный вопрос: а из какой библиотеки функция '$', с помощью которой достаём все элементы типа 'label' css-класса 'hint' из document'а (в JavaScript коде, насколько я не заблуждаюсь, именно это делается с помощью вызова $('label.hint'))? Я подключил ajax v.1.0.4; ajax'овская функция '$' с параметрами 'label.hint' возвращает null :((

Неплохо бы было добавить в статью хотя бы название библиотеки, которая используется, а может быть, но это в идеале, ссылку на исходники, а то даже и объяснение: 

"Мол, в такой-то и такой-то библиотеке 'Библиотека', используемую в коде данной статьи версию которой библиотеки, кстати, можно закачать по адресу 'Адрес', функция '$' при вызове возвращает стандартный JavaScript массив, к которому применяется добавленная данной библиотекой к данному массиву (а, быть может, и вообще к prototype объекта Array, то есть ко всем массивам) функция 'each(call_back)', которая функция each применяет переданную ей в качестве аргумента функцию call_back к каждому элементу возвращённого функцией '$' массива", и делает то-то (а тут см. код)".

А то иначе просто непонятно, как запустить код, чтоб он сработал у тебя. :) Я, например, хотя и посмотрел исходники страницы с этой статьёй, и скачал все подключаемые через тэг  с определённым атрибутом src .js-файлы, всё равно так и не отыскал одного-единственного файла, в котором определяется функция '$' :) Так что мне остаётся только восхищаться мастерством автора этой статьи. :)

Неужели все, кто пишет комментарии к этой статье, знают, КАКАЯ библиотека должна быть подключена, просто по виду вызовов функции этой библиотеки (например, "Ага, используется each, значит, это не Ajax...")? :))

А так, вообще, код работает (у меня, по крайней мере, в Firefox'е), только я не могу понять, почему. :))</description>
		<content:encoded><![CDATA[<p>Юрий: нескромный вопрос: а из какой библиотеки функция &#8216;$&#8217;, с помощью которой достаём все элементы типа &#8216;label&#8217; css-класса &#8216;hint&#8217; из document&#8217;а (в JavaScript коде, насколько я не заблуждаюсь, именно это делается с помощью вызова $(&#8217;label.hint&#8217;))? Я подключил ajax v.1.0.4; ajax&#8217;овская функция &#8216;$&#8217; с параметрами &#8216;label.hint&#8217; возвращает null <img src='http://blog.sribna.com/wp-includes/images/smilies/icon_sad.gif' alt=':(' class='wp-smiley' /> (</p>
<p>Неплохо бы было добавить в статью хотя бы название библиотеки, которая используется, а может быть, но это в идеале, ссылку на исходники, а то даже и объяснение: </p>
<p>&#8220;Мол, в такой-то и такой-то библиотеке &#8216;Библиотека&#8217;, используемую в коде данной статьи версию которой библиотеки, кстати, можно закачать по адресу &#8216;Адрес&#8217;, функция &#8216;$&#8217; при вызове возвращает стандартный JavaScript массив, к которому применяется добавленная данной библиотекой к данному массиву (а, быть может, и вообще к prototype объекта Array, то есть ко всем массивам) функция &#8216;each(call_back)&#8217;, которая функция each применяет переданную ей в качестве аргумента функцию call_back к каждому элементу возвращённого функцией &#8216;$&#8217; массива&#8221;, и делает то-то (а тут см. код)&#8221;.</p>
<p>А то иначе просто непонятно, как запустить код, чтоб он сработал у тебя. <img src='http://blog.sribna.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  Я, например, хотя и посмотрел исходники страницы с этой статьёй, и скачал все подключаемые через тэг  с определённым атрибутом src .js-файлы, всё равно так и не отыскал одного-единственного файла, в котором определяется функция &#8216;$&#8217; <img src='http://blog.sribna.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  Так что мне остаётся только восхищаться мастерством автора этой статьи. <img src='http://blog.sribna.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>Неужели все, кто пишет комментарии к этой статье, знают, КАКАЯ библиотека должна быть подключена, просто по виду вызовов функции этой библиотеки (например, &#8220;Ага, используется each, значит, это не Ajax&#8230;&#8221;)? <img src='http://blog.sribna.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> )</p>
<p>А так, вообще, код работает (у меня, по крайней мере, в Firefox&#8217;е), только я не могу понять, почему. <img src='http://blog.sribna.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> )
</p>
]]></content:encoded>
				</item>
	<item>
		<title>by: Алексей Труфанов</title>
		<link>http://blog.sribna.com/ukrashaem-input-s-pomoschyu-css-unobtrusive-javascript.htm#comment-7026</link>
		<pubDate>Mon, 27 Oct 2008 06:39:35 +0000</pubDate>
		<guid>http://blog.sribna.com/ukrashaem-input-s-pomoschyu-css-unobtrusive-javascript.htm#comment-7026</guid>
					<description>Спасибо, пригодилось! :-) Как хорошо, что не нужно мучиться с JavaScript'ом (потому что плохо его знаешь), просто взял, поправил пару кусочков кода -- и готово! :-)</description>
		<content:encoded><![CDATA[<p>Спасибо, пригодилось! <img src='http://blog.sribna.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' />  Как хорошо, что не нужно мучиться с JavaScript&#8217;ом (потому что плохо его знаешь), просто взял, поправил пару кусочков кода &#8212; и готово! <img src='http://blog.sribna.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' />
</p>
]]></content:encoded>
				</item>
	<item>
		<title>by: Yuriy Drozdov</title>
		<link>http://blog.sribna.com/ukrashaem-input-s-pomoschyu-css-unobtrusive-javascript.htm#comment-6909</link>
		<pubDate>Sun, 19 Oct 2008 10:16:28 +0000</pubDate>
		<guid>http://blog.sribna.com/ukrashaem-input-s-pomoschyu-css-unobtrusive-javascript.htm#comment-6909</guid>
					<description>Спасибо, поправил.</description>
		<content:encoded><![CDATA[<p>Спасибо, поправил.
</p>
]]></content:encoded>
				</item>
	<item>
		<title>by: Warlock</title>
		<link>http://blog.sribna.com/ukrashaem-input-s-pomoschyu-css-unobtrusive-javascript.htm#comment-6906</link>
		<pubDate>Sat, 18 Oct 2008 17:18:56 +0000</pubDate>
		<guid>http://blog.sribna.com/ukrashaem-input-s-pomoschyu-css-unobtrusive-javascript.htm#comment-6906</guid>
					<description>Спасибо, ваша правда.</description>
		<content:encoded><![CDATA[<p>Спасибо, ваша правда.
</p>
]]></content:encoded>
				</item>
	<item>
		<title>by: hayk</title>
		<link>http://blog.sribna.com/ukrashaem-input-s-pomoschyu-css-unobtrusive-javascript.htm#comment-6904</link>
		<pubDate>Sat, 18 Oct 2008 15:24:48 +0000</pubDate>
		<guid>http://blog.sribna.com/ukrashaem-input-s-pomoschyu-css-unobtrusive-javascript.htm#comment-6904</guid>
					<description>Все работает под IE, просто у Юры в исходник как-то попали теги br, их надо подчистить (см. ошибку javascript'а).</description>
		<content:encoded><![CDATA[<p>Все работает под IE, просто у Юры в исходник как-то попали теги br, их надо подчистить (см. ошибку javascript&#8217;а).
</p>
]]></content:encoded>
				</item>
	<item>
		<title>by: Warlock</title>
		<link>http://blog.sribna.com/ukrashaem-input-s-pomoschyu-css-unobtrusive-javascript.htm#comment-6901</link>
		<pubDate>Sat, 18 Oct 2008 11:59:00 +0000</pubDate>
		<guid>http://blog.sribna.com/ukrashaem-input-s-pomoschyu-css-unobtrusive-javascript.htm#comment-6901</guid>
					<description>Эх, IE - зло, под ним не работает скрипт...</description>
		<content:encoded><![CDATA[<p>Эх, IE - зло, под ним не работает скрипт&#8230;
</p>
]]></content:encoded>
				</item>
	<item>
		<title>by: Yuriy Drozdov</title>
		<link>http://blog.sribna.com/ukrashaem-input-s-pomoschyu-css-unobtrusive-javascript.htm#comment-6856</link>
		<pubDate>Wed, 15 Oct 2008 13:42:08 +0000</pubDate>
		<guid>http://blog.sribna.com/ukrashaem-input-s-pomoschyu-css-unobtrusive-javascript.htm#comment-6856</guid>
					<description>Спасибо. Хорошо, посмотрю, что можно с этим придумать.</description>
		<content:encoded><![CDATA[<p>Спасибо. Хорошо, посмотрю, что можно с этим придумать.
</p>
]]></content:encoded>
				</item>
	<item>
		<title>by: hayk</title>
		<link>http://blog.sribna.com/ukrashaem-input-s-pomoschyu-css-unobtrusive-javascript.htm#comment-6855</link>
		<pubDate>Wed, 15 Oct 2008 13:32:04 +0000</pubDate>
		<guid>http://blog.sribna.com/ukrashaem-input-s-pomoschyu-css-unobtrusive-javascript.htm#comment-6855</guid>
					<description>Великолепная статья! Продолжай в том же духе.
Единственное, надо что-то сделать с копированием кода из статей.</description>
		<content:encoded><![CDATA[<p>Великолепная статья! Продолжай в том же духе.<br />
Единственное, надо что-то сделать с копированием кода из статей.
</p>
]]></content:encoded>
				</item>
</channel>
</rss>

