JS: Несколько примеров работы с JQuery

Сегодня я приведу примеры использования библиотеки jquery на самых простых задачах. Данная библиотека позволяет значительно облегчить жизнь при создании веб скриптов.

И так. Первое что необходимо сделать — подключить саму библиотеку. Это можно сделать с помощью следующей строчки:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
</script>

Адрес скрипта, может обновиться с момента публикации данной записи, поэтому лучше всего удостовериться в его правильности.

Теперь рассмотрим пару простых задач:

Есть блок с текстом. Есть кнопка. При нажатии на кнопку текст в поле должен плавно поменяться на другой. При повторном нажатии на кнопку должен вернуться исходный текст

Решение:

<script type="text/javascript">
var old="";
function SetText(id, txt)
{
  if ($("#"+id).text() == txt)
    txt = old;
  else
    old = $("#"+id).text();
  $("#"+id).animate({opacity: 0}, 1000, function() {
     $("#"+id).text(txt);
     $("#"+id).animate({opacity: 1}, 1000);
    }
  );
}
</script>
<table>
<tr><td>
<input type="button" value="Кнопка" onclick="SetText('txt', 'Кнопка');" />
</td>
<td id="txt">
Исходный текст
</td></tr>
</table>

Наглядно это выглядит так:

Как видно достаточно просто и красиво. Идем далее…

Есть блок с текстом. Высота блока фиксирована (пусть 200px). С помощью скрипта необходимо прятать лишний текст (спрятать часть текста) и показывать его после нажатия на кнопку «показать». Если же текста мало, то он все равно должен разбиваться на превью и скрытую часть.

Здесь стоит сразу оговориться, что для решения данной задачи будет необходимо исходный блок текста разбить на 3 части: превью, скрываемый текст, кнопка.
Решение:

<script type="text/javascript">
function SplitText(id)
{
  var vh = 200;
  var th = $("#"+id).height();
  var btext =  $("#"+id).text();
  if (th <= vh)
  {
    var half = btext.length / 2;
    var stext = btext.substr(0, half);
    while (half < btext.length && btext[half] != ".")
       stext += btext[half++];
    stext += ".";
    $("#"+id).text(stext);
    $("#"+id+"2").text(btext.substr(half + 1));
  	return;
  }
  $("#"+id).text("");
  var idx = 0;
  var byspace = btext.split(' ');
  th = $("#"+id).height();
  while(th
<div id="hb">
Весь текст...
</div>
<div id='hb2' style="display:none;"></div>
<div onclick="ShowHide('hb', this);" style="text-align:center;background:#EEE0E5;cursor:pointer;">Показать
</div>

Результат работы скрипта: