<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl"  href="/xslt/final.xslt"?><html>
  <head>
    <title>jQuery: ToolTip + LightBox + ...  Еще один плагин для всплывающих подсказок/окон с разным типом позиционирования</title>
    <meta name="css" content=""/>
    <meta name="js" content=""/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="id" content="32"/>
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
  </head>
  <body>
    <div class="main">
      <div class="wrap">
        <div class="L">
          <h1><a href="/">..</a> / jQuery: ToolTip + LightBox + ...  Еще один плагин для всплывающих подсказок/окон с разным типом позиционирования</h1>
          <ol class="tags big">
            <li>
              <a href="/jquery">jquery</a>
            </li>
          </ol>
          <div class="myContent"><p>Плагин jHelperMod - комбинация всплывающих подсказок в стиле традиционных <a href="#" title="www.smashingmagazine.com/2007/06/12/tooltips-scripts-ajax-javascript-css-dhtml/" rel="nofollow" class="external">тултипов</a> и popup-окон в стиле <a href="#" title="dustweb.ru/log/2008/07/17/lightbox_n_clones/" rel="nofollow" class="external">LightBox</a> - центрированных по размерам окна. Примеры реализации и исходный код лежат <a href="/doc/jquery/tooltip/index.html">здесь</a></p>
<p>В <a href="/doc/jquery/tooltip/jquery.jHelperMod.min.js">сжатом виде</a> после <a href="#" title="dean.edwards.name/packer/" rel="nofollow" class="external">обфускатора</a>  плагин имеет размер 3.3К  Это существенно меньше чем у большинства клонов LightBox. И уж тем более меньше если наворачивать сразу два плагина - отдельно для тултипов, отдельно для <a href="#" title="dustweb.ru/log/2008/07/17/lightbox_n_clones/" rel="nofollow" class="external">LightBox</a> -попапов. Увы такая маразматическая тенденция сейчас наблюдается повсеместно.</p>
<p>За основу взят jHelperTip из замечательной подборки полуфабрикатов <a href="#" title="www.gimiti.com/kltan/wordpress/" rel="nofollow" class="external">Kean Loong Tan</a> Подборка отличается минимализмом и отсутствием всяких "красивостей". Это позволяет достаточно легко кастомизировать внешний вид представленных в ней плагинов и при необходимости добавить мулечки на потребу публике. К сожалению в этой подборке не предусмотрена прокладка для <a href="#" title="aplus.rs/wch/" rel="nofollow" class="external">бага</a> с перекрывающимися контролами для ie6  В предлагаемой модификации баг пофиксен.</p>
<h2>API и дефолтные значения:</h2>

<table class="code">
    <tbody>
        <tr>
            <td><!--php-->
            <pre class="brush: plain"> 
                $.fn.jHelperTip.defaults = {
                    trigger: "click",
                    source: "container", /*  container, ajax,image */
                    ttC: ".jHelperTipContainer", /* tooltip Container*/
                    dC: "#jHelperTipDataContainer", /* data Container */
                    type: "GET", /* data can be inline or CSS selector */
                    url: '',
                    data: '',
                    autoClose: 2,
                    position:'relative' /*  relative,absolute */
                };</pre><!--/php--></td>
        </tr>
    </tbody>
</table>
<p><br/>
<strong>trigger</strong>: "click" - вызов popup по клику; "hover" - вызов по наведению мышки<br/>
<strong>source</strong>: "container" - в popup передаются данные из контейнера,  "ajax" - подгрузка ajax'ом, "image" - грузится картинка<br/>
<strong>ttc</strong>: класс контейнера для popup. Может понадобится если будет использовано сразу несколько стилей. Например, для отображения картинок - один стиль, а для тултипов - другой.  Но если дизайнер в своем уме, то  это не понадобится.  Кстати внешний вид контейнера определяется в переменной "containerBody". Если использовать табличку для тени и скругленных углов - западло, можно перерисовать.</p>
<p><strong>dc:</strong> конейнер данных для случая source: "container". В этом контейнере  со стилем display:none лежат данные, которые надо показать при clcik (hover)</p>
<p><strong>type, data,url:</strong>  дополнительные параметры для ajax; Кроме того <strong>url </strong>используется для передачи адреса картинки, в случае source=image;</p>
<p><strong>autoClose</strong>: Для различных вариантов схлопывания тултипов. Если autoClose='true', всплывающее окно выводится без кнопки "Close" и закрывается по mouseOut; если autoClose = "false" всплывающее окно сопровождается кнопкой "Close", по нажатию на которую окно будет закрыто. По умолчанию первый вариант отрабатывается по trigger: "hover", второй - по trigger: "click"</p>
<p><strong>position</strong>: 'relative' - для всплывающих подсказок (привязка к положению мышки),  'absolute' - привязка к центру экрана.</p></div>
          <ol class="tags big">
            <li class="date">2009-01-04</li>
            <li>
              <a href="/jquery">jquery</a>
            </li>
          </ol>
          <ol class="see">
            <li>
              <a href="#"><span>www.smashingmagazine.com/2007/06/12/tooltips-scripts-ajax-javascript-css-dhtml/</span> - <b>143 примера реализации всплывающих подсказок  (тултипов, tooltips) с помощью AJAX, JavaScript и CSS</b></a>
            </li>
            <li>
              <a href="#"><span>www.gimiti.com/kltan/wordpress/</span> - <b>Собрание полуфабрикатов для плагинов jQuery  на сайте Kean Loong Tan (www.gimiti.com)</b></a>
            </li>
            <li>
              <a href="#"><span>dustweb.ru/log/2008/07/17/lightbox_n_clones/</span> - <b>Lightbox и его клоны</b></a>
            </li>
            <li>
              <a href="#"><span>plugins.jquery.com/project/Plugins/category/43</span> - <b>Еще куча всяких плагинов для jQuery для реализации всплывающих окон/подсказок</b></a>
            </li>
          </ol>
          <ul class="comment">
            <li id="a215" title="a0">
              <a name="develop" title="" rel="04.01.09"/>
              <div>У Тяна хорошие плагины. Сам регулярно пользуюсь.</div>
            </li>
            <li id="a216" title="a0">
              <a name="develop" title="" rel="04.01.09"/>
              <div>ЗЫ У вас похоже что-то не так с центровкой по верткали. Имхо это лучше через fixed делать с эмуляцией для ie6. Код меньше получается.</div>
            </li>
            <li id="a217" title="a0">
              <a name="Cuprum" title="twitter.com/cuprum" rel="04.01.09"/>
              <div>Демо? Или форма комментариев на нем сделана? ;)</div>
            </li>
            <li id="a218" title="a217">
              <a name="&#x418;&#x441;&#x430;&#x430;&#x43A; &#x422;&#x44B;&#x43D;&#x433;&#x44B;&#x43B;&#x447;&#x430;&#x432;" title="erum.ru" rel="04.01.09"/>
              <div>Для вполне рабочего проекта, в котором и тултипы и картинки и галереи и шайтан знает что.  Т.ч. еще как минимум полгода еще будет дорабатываться.</div>
            </li>
            <li id="a219" title="a216">
              <a name="&#x418;&#x441;&#x430;&#x430;&#x43A; &#x422;&#x44B;&#x43D;&#x433;&#x44B;&#x43B;&#x447;&#x430;&#x432;" title="erum.ru" rel="04.01.09"/>
              <div>Спасибо, посмотрю. Хотя вроде все нормально на первый взгляд.</div>
            </li>
            <li id="a220" title="a0">
              <a name="&#x412;&#x440;&#x435;&#x434;&#x43D;&#x44B;&#x439;" title="" rel="04.01.09"/>
              <div>А чегой та вы по старинке скругленные рамки лепите?</div>
            </li>
            <li id="a236" title="a220">
              <a name="&#x418;&#x441;&#x430;&#x430;&#x43A; &#x442;&#x44B;&#x43D;&#x433;&#x44B;&#x43B;&#x447;&#x430;&#x432;" title="erum.ru" rel="08.02.09"/>
              <div>Где? Что? Какие рамки? О чем вы?</div>
            </li>
            <li id="a311" title="a0">
              <a name="Le capitaine Nemo" title="" rel="17.06.09"/>
              <div>Очередной велосипед. Лучше посмотрите сюда <a title="http://flowplayer.org/tools/demos/index.html" rel="nofollow" class="external" href="#">ссылка</a></div>
            </li>
            <li id="a312" title="a311">
              <a name="&#x418;&#x441;&#x430;&#x430;&#x43A; &#x422;&#x44B;&#x43D;&#x433;&#x44B;&#x43B;&#x447;&#x430;&#x432;" title="erum.ru" rel="17.06.09"/>
              <div>Видел. Интересно. Но вот беда. Из того что там есть в реальной жизни нужно мало. А весит все 15К. Если бы оттуда выковырять лишнее, добавить 2-3 функции то я бы взял. А так приходится свои велосипеды изобретать.<br/>Кстати это старый велосипед. Новый весит 2.5К.</div>
            </li>
            <li id="a343" title="a312">
              <a name="forsaken" title="zay.com.ua" rel="29.09.09"/>
              <div>подкиньте новых велосипедиков плиз...<br/>ссылочку или если можно на почту</div>
            </li>
            <li id="a511" title="a0">
              <a name="ecolora" title="www.ecolora.com" rel="07.05.10"/>
              <div>Сегодня обнаружил интересную особенность работы tooltip.<br/>Например у Вас tooltip должен применяться ко всем элементам на странице.<br/>Так вот, попробуйте, к примеру, вынести функцию $(function() {<br/>$('*').tooltip({delay:100,track:true,showURL:false,opacity:0.85});<br/>});<br/>в отдельную функцию, например testfunc() и выполнить её 2 раза.<br/>Зачем это нужно? Ну вот Вы к примеру “подргрузили” часть содержимого с помощью $.ajax() и в этом содержимом у Вас есть элементы, к которым тоже нужно применить tooltip. Как это сделать? ещё раз вызвать функцию testfunc().<br/>Так вот после второго вызова у нового “вставленного” содержимого подсказки будут, а вот все старые исчезнут!<br/>Решение заключается в другой конструкции:<br/>$('*').each( function () {<br/>if (this.title != ”) $(this)tooltip({delay:100,track:true,showURL:false,opacity:0.85});<br/>});<br/>В этом случае tooltip применится только к тем элементам, к которым он ещё не применялся. Тогда будут и новые и старые подсказки.</div>
            </li>
            <li id="a589" title="a0">
              <a name="&#x421;&#x430;&#x448;&#x430;" title="" rel="05.01.11"/>
              <div>Здравствуйте!<br/>очень нравится ваш блог и примеры, которыми вы делитесь.<br/>Помогите с одной штуковиной. Надо сделать всплывающее окно с формой отправки сообщения на эмэйл. Фон должен быть затемнен, а попап активным. Киньте если не долго весь рабочий пример-код на мыло (а лучше если он будет с комментариями). и css и php форму и код jquery. а дальше попробую сам разобраться. а то не могу найти подходящий код(<br/>Спасибо!</div>
            </li>
          </ul>
        </div>
      </div>
      <div class="R">
        <a href="/" title="&#x41D;&#x430; &#x433;&#x43B;&#x430;&#x432;&#x43D;&#x443;&#x44E;"/>
      </div>
    </div>
    <div id="li"/>
  </body>
</html>

