Подняться наверх

JQuery примеры

You are here

Различные примеры практического применения JavaScript и библиотеки JQuery.

Раскрывающийся вертикальный блок на JQuery

Далее читателям представлен пошаговый пример по созданию раскрывающегося горизонтального (не вертикального) блока с контентом. Стоит отметить, что текущий пример корректно работает с браузерами Internet Explore, Chrome, Firefox и Opera.

JQuery пример: раскрывающийся горизонтальный блок

1. Создайте заготовку тела HTML документа, по следующему шаблону. Идентификатор CSS more-content будет содержать дополнительный блок содержимого страницы, который у меня и вас будет прятаться или появляться по нажатию на кнопку:

<div id="container">
  <div id="content">
    <p><!-- Контент 1--></p>
    <a  class="view-source" href="#">Раскрыть &rarr;</a>
  </div> <!-- /#content -->
  <div id="more-content">
    <p><!-- Контент 2--></p>
  </div> <!-- /#more-content -->
</div> <!-- /#container -->

Из массива в строку - JavaScript

Рассмотрим простой пример, который позволит начинающим JavaScript-программистам осуществить перевод массива в строку.

Итак, для того, чтобы объединить все элементы массива в одну единственную переменную строкового типа данных мы воспользуемся методом join(), который имеет всего лишь 1 входной параметр - "сепаратор" / разделитель также строкового типа данных.

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

Редирект на JavaScript

Редирект на JavaScript делается легко и очень просто. Читателю будет достаточно всего лишь набрать одну строчку кода, которую я представляю далее:

<script>document.location.href='http://www.sooource.net';</script>

JavaScript ссылка: из HTML-разметки

Итак, сегодня мы с вами, читатели, научимся автоматически преобразовывать/делать все гиперссылки, написанные обычным текстом посреди остального содержимого веб-страницы, в активные вполне кликабельные линки с помощью нехитрой JavaScript функции с использованием небольшого регулярного выражения. Бонусом во вложении к материалу идет миниатюрный архив с примером, который можно так сказать "пощупать вживую". Далее просто смотрим/читаем пример сниппета.

Bootstrap: подсветка кода с google-code-prettify

Итак, для тех, кто не знает Twitter Bootstrap - это мощнейший CSS-фреймворк. А Google-code-prettify - это удобнейшая реализация подсветки синтаксиса множества языков программирования и разметки. Сегодня мы с вами вкратце рассмотрим простейший пример интеграции бутстрапа с описываемым модулем . Стоит отметить, что более популярная библиотека под названием Syntax Highlighter от Алекса Горбачева во многом проигрывает такой связке, но не будем забегать вперед.

Pages

Яндекс.Метрика

Использовано памяти на 23.046mb