-->

пятница, 18 апреля 2014 г.

Скрываем/отображаем часть текста в CEWP с помощью jQuery

Сегодня я расскажу, как я решал задачу по скрытию/отображению части текста в веб-части «Редактор контента». В общем, на страницу, которая состоит из веб-частей нужно было разместить объявление, позже объявление для пользователей увеличилось в объеме (стало много текста) и я решил скрыть часть текста с помощью кнопки «Скрыть /показать весь текст»

Использовал такой скрипт:
<script type="text/javascript" language="javascript">
function ShowWeb()
{
if (document.getElementById("Toggle").style.display == "block")
         {
           document.getElementById("Toggle").style.display = "none";
         }
         else
         {
           document.getElementById("Toggle").style.display = "block";
         } 
}
</script>
<input name="Button1" type="button" value="Скрыть/Показать весь текст" onclick="ShowWeb()">

Задача была решена, но работало все как-то резко и не красиво…
Я решил переработать код и использовать Jquery. Потом я понял, что лучше использовать две кнопки, одна «Показать весь текст», а другая «Скрыть».
Теперь я расскажу, как я все сделал:
1. Добавляем на страницу «Редактор контента» (или Content Editor Web Part - CEWP)
2. Добавляем  весть наш текст в веб-часть
3. Заходим в режим редактирования HTML


4. Добавляем в самый низ код
<script src="/Style%20Library/jquery-1.10.2.js" type="text/javascript"></script>
<button id="hider" onclick="return false" style="display: none">Скрыть текст</button>
<button id="shower" onclick="return false">Показать весь текст</button>

<script language="javascript" type="text/javascript">

$( "#hider" ).click(function() {
  $( "#Toggle" ).hide("slow");
  $( "#shower" ).show();
  $( "#hider" ).hide();

  });
$( "#shower" ).click(function() {
  $( "#Toggle" ).show( "slow" );
  $( "#hider" ).show();
  $( "#shower" ).hide();
});
</script>

Если Вы заметили, я положил файл jQuery в библиотеку сайта, но можно подгружать и из интернета (на мой взгляд, не самый лучший способ)
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
5. Теперь нужно указать какой текст скрываем, а какой оставляем, для скрытия текста необходимо в теге <div> указать
  id="Toggle" style="display: none"

Вот и все!!!