Главная Онлайн сервисы

Разворачивание блока. Поочередное разворачивание и сворачивание элементов

13.06.2019

Расширения и приложения в браузере Google Chrome призваны расширить функциональность браузера. Выбор расширений происходит из галереи расширений для Chrome. Приложения же — это новинка (на момент написания данной статьи) из .

Расширения Google Chrome

Для управления расширениями и поиска новых идем в меню (иконка с гаечным ключом справа вверху). Там выбираем пункт «Инструменты» — «Расширения» . Откроется страница с уже загруженными расширениями:

Чтобы открыть каталог и выбрать себе какие-либо новые расширения — внизу страницы кликаем на запись «Еще расширения» . Загрузится каталог. Выбираем там нужное нам и на его странице нажимаем на кнопку «Установить» .

Появится окно с подтверждение о установке. После согласия расширение будет установлено.

У каждого расширения имеется какая-либо функция. В зависимости от этого, расширение может работать в фоновом режиме, выполняя определенные функции. А может быть представлено иконкой в правом верхнем углу (для вывода какой-либо информации или задействования по нажатию на свою иконку).

Приложения Chrome (apps)

Приложения в браузере Google Chrome появились позже расширений. Их появление, прежде всего, связывают с разработкой облачной операционной системы Chrome OS . Приложения берутся в. И устанавливают свою иконку на странице быстрого доступа. Все приложения разбиты по категориям. Какие-то из них платные, какие-то бесплатные.

Некоторые служат просто ярлыками на какие-либо ресурсы, некоторые сохраняют себя в хранилище браузера Chrome и работают локально.

Для поиска и установки новых приложений — достаточно кликнуть по иконке Web Store на странице быстрого доступа.

20 лучших приложений для Chrome | Введение

Google постоянно работает над расширением экосистемы приложений для браузера Google Chrome и Chrome OS. Chrome Web Store включает постоянно растущую библиотеку приложений для Chrome в комплекте с новыми пакетами приложений, работающими автономно на рабочем столе через Chrome Launcher. Мы собрали двадцатку лучших приложений, включая редакторы изображений, блокноты, музыкальные утилиты и некоторые игры.

20 лучших приложений для Chrome | Evernote Web

Широко популярный "облачный" блокнот и служба заметок Evernote теперь доступна в виде приложения для Chrome, дающего доступ ко всей вашей библиотеке блокнотов, веб-заметок и других данных через браузер. При помощи приложения можно распределять материалы в блокноты с возможностью поиска по тэгам и использовать Evernote для любого проекта. Evernote Web станет прекрасным дополнением браузера и подойдёт для решения самых различных задач: написания курсовой работы, внесения ежедневных заметок, ведения проекта или организации мозгового штурма.

20 лучших приложений для Chrome | Pixlr Touch Up

Autodesk Pixlr Touch Up – это бесплатный лёгкий фоторедактор, включающий в себя ряд инструментов редактирования фотографий, которые можно использовать перед тем, как публиковать изображения в социальных сетях или галереях. Pixlr Touch Up включает в себя такие опции, как кадрирование, изменение размера, вращение и улучшение цветности и контрастности, а также несколько цветовых экспресс-фильтров. Кнопки "Вперёд" и "Назад" позволяют отменять неподходящие изменения, а результат можно сохранять на ПК или Google Drive. Это, конечно, не Photoshop, но для небольшой корректировки изображений Pixlr Touch Up подходит отлично.

20 лучших приложений для Chrome | Pixlr Editor

Если вы ищете более мощный фоторедактор для Chrome, обратите внимание на Pixlr Editor с неожиданно богатым набором функций. Приложение оснащено множеством регулировок баланса, насыщенности и экспозиции, уровнями, кривыми, средствами редактирования слоёв и другими инструментами. Pixlr Editor – прекрасный выбор для тех, кому требуется нечто большее, нежели базовые возможности редактирования и несколько экспресс-фильтров.

20 лучших приложений для Chrome | Kindle Cloud Reader

"Читалка" электронных книг от Amazon Kindle доступна на множестве платформ, включая Google Chrome. Она позволяет читать электронные книги Amazon из браузера или Chromebook. Kindle Cloud Reader – гибкое средство для чтения с опциями изменения размера шрифта и многими другими функциями. Kindle использует преимущества системы Amazon Whispersync, которая автоматически синхронизирует последнюю прочтённую страницу, заметки и другие характеристики последней книги. Приложение даже позволяет читать книги без подключения к Интернету.

20 лучших приложений для Chrome | SoundCloud

Приложение SoundCloud для Chrome предоставляет пользователю доступ в одно из самых популярных сообществ по обмену музыкой. Пользователи могут делиться любимыми композициями с друзьями или публиковать их в блогах, на сайтах и в социальных сетях Facebook или Twitter. Сам аккаунт бесплатный, а премиум-пользователи получат доступ к статистике входов, собственным названиям и многому другому.

20 лучших приложений для Chrome | Google Keep

Google Keep , сервис создания заметок от поискового гиганта, получил собственное настольное приложение для Chrome. Приложение убирает Keep из панели вкладок и помещает его на панель задач рабочего стола. Теперь от публикации заметок, напоминаний и быстрых текстовых пометок в настольном приложении Keep вас отделяет всего один клик. Вставляйте изображения и списки, настраивайте напоминания, архивируйте или удаляйте ваши заметки, синхронизируйте данные на всех ПК и мобильных устройствах при помощи одного аккуратного блокнота.

20 лучших приложений для Chrome | Any.do

Any.do – это мощное приложение для управления задачами, которое перекочевало из мобильного сегмента в настольный благодаря Chrome App. Any.do позволяет создавать и планировать задачи. Оно дополнено заметками и напоминаниями, а также простым интерфейсом с функциями перетаскивания.

Задачам можно давать приоритеты, перемешивать по временной шкале и помещать в папки, например Work или Personal. В дополнение Any.do синхронизирует задачи между сайтами, настольными и мобильными приложениями. То есть вы будете получать напоминания и уведомления на ходу и всегда сможете иметь список дел под рукой.

20 лучших приложений для Chrome | Pocket

Pocket (ранее известный как Read It Later) – популярная служба синхронизации контента, использующая расширение браузера для сохранения статей, видеороликов и изображений для автономного просмотра позже на различных устройствах. Pocket Chrome App является самостоятельным средством просмотра всего сохранённого контента, с оптимизированными опциями чтения статьи, настраиваемым размером шрифта и фоном, с функциями тегирования, поиска, архивации и обмена через электронную почту, Twitter и Facebook.

20 лучших приложений для Chrome | UntilAM для Chrome

Until AM для Chrome превращает ваш настольный ПК или Chromebook в DJ-пульт, используя треки из вашей музыкальной коллекции, а также материалы из SoundCloud.

Перетащите песни на две виртуальные "вертушки" и затем играючи регулируйте эффекты скорости воспроизведения, эха, хоруса и скретча. Музыку можно совмещать с треками из облака, когда вы подключены к Интернету, или микшировать с вашими локально хранящимися треками без подключения к сети. С этой программой вы без проблем сможете обеспечивать вечеринку музыкой до глубокой ночи.

20 лучших приложений для Chrome | HootSuite

Если вы работаете с социальными сетями на профессиональном уровне или подыскиваете многофункциональный командный центр для соцсети, то вам пригодится HootSuite . Онлайн-панель для управления несколькими аккаунтами социальных сетей, включая Twitter, Facebook и Google+, оснащена многочисленными инструментами для продвинутых пользователей.

Это приложение умеет отслеживать ключевые слова и упоминания, анализировать показатели и многое другое. Дополнительные инструменты можно найти в директории приложения (App Directory) HootSuite.

20 лучших приложений для Chrome | RAD Soldiers

RAD Soldiers – бесплатная тактическая игра, запускаемая через Chrome App. RAD Soldiers разработала компания XCOM. В игре вам предстоит командовать собственным отрядом рисованных солдат в пошаговых стычках против компьютерных и реальных оппонентов. Тактического реализма в RAD Soldiers вы не найдёте, но как бесплатная тактическая игра в составе отряда она довольно хороша.

20 лучших приложений для Chrome | Weatherbug

WeatherBug для Chrome – это одновременно витрина настольных приложений Google и отличное отдельное приложение для отображения прогноза погоды. WeatherBug предоставляет обновляемые метеорологические данные для любого места, интерактивные карты, несколько оповещений о погоде, а также утилиту Live Weather Cams, позволяющую просматривать погодные условия с веб-камеры ближайшей метеостанции.

20 лучших приложений для Chrome | Marvel Comics

Приложение Marvel Comics для Chrome позволяет пользователю получать новые и лучшие комиксы Marvel с участием таких героев, как Тор, Капитан Америка, Люди Х и многих других прямо в браузере. В веб-магазине можно покупать новые комиксы, а средство просмотра позволяет читать коллекции в Интернете. Кроме того, приложение Marvel Comics синхронизирует покупки для приложений iOS и Android, благодаря чему вы легко сможете продолжить чтение на настольном ПК или мобильном устройстве.

20 лучших приложений для Chrome | AudioSauna

AudioSauna – это бесплатная онлайновая аудиостанция и мастерская. Приложение предоставляет пользователю пакет мощных инструментов для создания, микширования и редактирования музыки. Мощный синтезирующий движок дополняется такими функциями, как сэмплеры, разбивка на слои, лупинг, живые эффекты и фильтры. Бесплатный музыкальный DIY-инструмент AudioSauna – отличное решение для любителей музыки.

20 лучших приложений для Chrome | Gmail Offline

Gmail Offline решает одну из основных слабостей служб электронной почты: необходимость подключения к Сети. Приложение синхронизирует ваш аккаунт Gmail, когда вы подключены к Сети, обеспечивая доступ к почте, когда подключение отсутствует. Вы можете читать, архивировать и даже писать и отвечать на письма. В следующий раз, когда Gmail Offline найдёт подключение к Интернету, приложение автоматически выполнит все действия, которые вы совершали в автономном режиме.

20 лучших приложений для Chrome | 500px

Сайт для обмена фотографиями 500px обзавёлся собственным приложением для Chrome App. В нём вы найдёте восхитительные снимки пейзажей, животных, художественные фото. Онлайн-галереи заполнены популярными записями и снимками редакторов, также в нём можно искать и просматривать портфолио конкретного пользователя. 500px для Chrome App покажет вам красочный, причудливый, странный и в то же время прекрасный мир, в котором вы обязательно найдёте интересные фотографии.

20 лучших приложений для Chrome | Text

Text - это лёгкий текстовый редактор для Chrome. Он существует в экосистеме Chrome и предоставляет пользователю быстрый и гибкий инструмент для открытия и редактирования нескольких текстовых документов в комплекте с подсветкой синтаксиса, нумерацией строк и синхронизацией с Google Drive. По функциональности с MS Word он сравниться не может, но для быстрого и простого редактирования текста и кодирования небольшое и аккуратное приложение с дополнительными функциями подходит как нельзя лучше.

20 лучших приложений для Chrome | Magisto

Magisto – удобное в использовании приложение для создания видеороликов. Его мобильная версия характеризуется наличием довольно обширной пользовательской базы. Теперь Magisto добралось до Chrome. Просто загрузите видеоролики, которые хотите совместить, выберите серию визуальных эффектов и позвольте Magisto свести ваши клипы в единый видеоряд с музыкальным аккомпанементом. Ко всему прочему, приложение для Chrome работает в оффлайн-режиме, предоставляя пользователям возможность обрабатывать и кодировать длинные видеофайлы.

20 лучших приложений для Chrome | Mint

Хотя данное приложение будет полезно преимущественно пользователям из США и Канады, стоит обратить внимание на его достойную реализацию. Mint.com – мощная служба для ведения личной финансовой отчётности. Бесплатное приложение Chrome позволяет управлять вашим личным бюджетом в браузере или Chromebook. Можно отслеживать сбережения, чеки, кредиты, пенсионный фонд, устанавливать бюджет, отмечать затраты, настраивать напоминания о счётах, налогах и других регулярных платежах. Mint использует 128-битное шифрование и по сути является персональным безопасным финансовым центром в режиме онлайн.

20 лучших приложений для Chrome | Entanglement

Если вы хотите немного отвлечься и решить какую-нибудь расслабляющую головоломку, вам поможет Entanglement . Entanglement – это небольшой паззл с приятным дизайном. Игроку необходимо переворачивать плитки так, чтобы сгенерировать максимально длинную и запутанную линию. Сначала игра кажется очень простой, но с заполнением доски и пересечением путей в плитках игра становится всё более сложной. Лёгкая музыка и ненавязчивый песочный фон отлично успокаивают нервы.

Вызов этого метода приводит к плавному сворачиванию (если элемент развернут) или разворачиванию (если элемент свернут) выбранных элементов на странице. Отметим, что после скрытия элемента, его css-свойство display становится равным none , а перед появлением, оно получает свое прежнее значение обратно. Метод имеет два варианта использования:

duration — продолжительность выполнения анимации (появления или скрытия). Может быть задана в миллисекундах или строковым значением "fast" или "slow" (200 и 600 миллисекунд). По умолчанию, анимация будет происходить за 400 миллисекунд.
callback — функция, заданная в качестве обработчика завершения анимации (появления или скрытия). Ей не передается никаких параметров, однако, внутри функции, переменная this будет содержать DOM-объект анимируемого элемента. Если таких элементов несколько, то обработчик будет вызван отдельно, для каждого элемента.

duration — см. выше.
easing — изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится). (см. описание)
callback — см. выше.

Примеры использования:

Можно скрывать и показывать элементы с помощью изменения размеров и прозрачности, с помощью функций show(), hide() .

Если вы хотите только развернуть или только свернуть элементы, воспользуйтесь методами .slideDown(), .slideUp()

В действии

При нажатии на кнопку элемент с картинкой и текстом будет поочередно сворачиваться и разворачиваться:

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="http://code.jquery.com/jquery-1.4.4.js"~gt~~lt~/script~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~button~gt~Вуаля!~lt~/button~gt~~lt~br~gt~~lt~br~gt~ ~lt~div~gt~ ~lt~img src="/tags/images/yo.jpg" style="height:150px; float:right; margin:5px 5px"~gt~ ~lt~b~gt~Правило.~lt~/b~gt~ Ё должна использоваться: в случаях возможных разночтений; в словарях; в книгах для изучающих русский язык (т. е. детей и иностранцев); для правильного прочтения редких топонимов, названий или фамилий. Во всех остальных случаях наличие буквы ё только затрудняет чтение. Она плохо выглядит, зато хорошо звучит. ~lt~/div~gt~ ~lt~script~gt~ $("button").click(function () { $("div").slideToggle("slow"); }); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Разворачивание/сворачивание области

Разворачивание и сворачивание на странице поможет вам сохранить компактность элементов, разнообразить и улучшить функционал. Например, при нажатии на изображение можно вывести пояснительный текст, а при нажатии на ссылку “Отправить письмо администратору” — вывести почтовую форму. На одной странице можно вывести множество таких элементов.

Рассмотрим самый простой вариант. При нажатии на ссылку “Развернуть” мы получим текст:

текст Развернуть

Демонстрация работы кода:

Код состоит из двух частей:

текст

  • id="spol" — идентификатор области с содержимым
  • style="display:none" — область с содержимым скрыта по умолчанию
  • текст — само содержимое области, которое будет показываться при раскрытии. Вместо слова текст может быть любой текст, картинка и даже форма. Например, можно вставить в содержимое код почтовой формы $MFORM_1$

Если код области с содержимым находится над второй частью кода, то содержимое будет раскрываться над ссылкой “Развернуть”. Если под второй частью кода, содержимое раскроется под ссылкой:

Развернуть

  • a onclick="$("#spol") — отвечает за клик по ссылке, инициирующий открытие области, привязан к идентификатору и должен совпадать с ним
  • .slideToggle("slow") — отвечает за сам процесс плавного разворачивания области

Если на странице требуется вывести несколько таких скрытых областей, каждой области следует задать свой индивидуальный идентификатор. В нашем примере выделенные красным элементы нужно заменить на уникальные в двух местах:

текст Развернуть

Для второй области spol заменить на spol2, для третьей области spol заменить на spol3 и т.д.

Вместо слова “Развернуть” вы можете поставить картинку:

Можете установить кнопку:

Кнопка развернуть

Устанавливать код плавного разворачивания области можно в шаблоны сайта, в содержимое страниц, созданных в редакторе, и в материалы. Во всех случаях вставлять нужно только в HTML-режиме или в режиме “Источник

Создание Ajax-окон

Рассмотрим на примере простого окна, которое будет появляться по клику. Простые всплывающие Ajax-окна можно использовать для вывода любой дополнительной или пояснительной текстовой информации.

Пример вызова простого Ajax-окна по клику Ссылка, вызывающая окно

Демонстрация работы кода:

  • a href="javascript://" onclick="new _uWnd — вызов Ajax-окна по клику
  • name — уникальный идентификатор окна. Если на странице необходимо разместить несколько таких всплывающих по клику окон, name нужно изменить на name2 для второго окна, на name3 для третьего и т.д. Вы можете давать любые произвольные имена окнам, главное, чтобы они не повторялись у разных окон
  • Заголовок окна — это шапка окна, где можно прописать название
  • 500,200 — исходные размеры окна (500 — ширина, 200 — высота)
  • Содержимое окна — текстовая информация, которая будет выводиться в теле окна
  • Ссылка, вызывающая окно — текст, который будет показываться ссылкой вызова
Настройки Ajax-окна

Единица возле элемента настройки говорит об активной функции. Ноль — неактивная, запрещенная.

  • min:1 — кнопка сворачивания окна (минимизирует окно в угол экрана)
  • max:1 — кнопка разворачивания окна на весь экран
  • header:1 — шапка окна, где прописан заголовок
  • shadow:1 — тень окна
  • modal:1 — затемнение страницы при вызове окна (если активна настройка 1, кнопка минимизации окна показываться не будет)
  • nomove:0 — при значении 0 разрешает перемещать пользователю окно по экрану
  • resize:1 — разрешает пользователю изменять размеры окна

Можете установить кнопку:

Вызвать окно

Пример вызова Ajax-окна при наведении на ссылку: Ссылка

Демонстрация работы кода:

  • a href="javascript://"onmouseover="new _uWnd — отвечает за вызов окна при наведении на ссылку
  • ajax — уникальное имя окна
  • заголовок — шапка окна с названием
  • 500 и 200 — размеры окна (ширина и высота)
  • close:true — разрешает закрыть окно
  • header:true — разрешает показ заголовка
  • nomove:false — разрешает перемещение окна
  • fixed:false — запрещает фиксацию окна в одном месте

Устанавливать код вызова всплывающего Ajax-окна можно в шаблоны сайта, в содержимое страниц, созданных в редакторе, и в материалы. Во всех случаях вставлять нужно только в HTML-режиме или в режиме “Источник ”. Если вы будете использовать для вставки кода визуальный редактор, ничего работать не будет!

Плавное разворачивание/сворачивание области и создание Ajax-окон

Сегодня мы научимся сворачивать контент по клику на заголовке (или кнопке). Создадим для этого простой JQuery скрипт.

Главный плюс нашего скрипта будет в том, что он универсален. Вставив его 1 раз в страницу, можно сколько угодно раз добавлять такие блоки, где нужно свернуть контент. И по клику на заголовке - будет сворачиваться нужный!

Для начала создадим html-разметку:

Чайники

Ничего особенного здесь нет. Родительский элемент - .block. Заголовок h1 с классом.extremum-click, по которому мы будем кликать и сам контент с классом.extremum-slide, который будет сворачиваться и разворачиваться.

Теперь зададим стили для лучшего визуального восприятия нашего примера:

.extremum-slide { border : 1px solid ; padding : 50px ; }

А теперь самое интересное - наш скрипт:

$(".extremum-click" ) .click (function () { $(this ) .siblings (".extremum-slide" ) .slideToggle ("slow" ) ; } ) ;

Вот и все - такой простой скрипт! Единственное условие - скрипт нужно вставлять в конце страницы. Не забываем, что это JQuery, а значит предварительно нужно подключить свежую библиотеку! Что указано в скрипте? По клику на элементе с классом.extremum-click нужно скрыть блок.extremum-slide, который находится на 1 уровне с.extremum-click (именно того, по которому совершен клик - это необходимо для возможности добавления нескольких блоков на 1 страницу). Скорость сворачивания/разворачивания - slow (600 мс). Можно поменять на fast (200 мс) или задать значение в миллисекундах. Пользуйтесь!

Весь код целиком:

.extremum-slide { border:1px solid; padding:50px; } Чайники Этот рассказ про то, как я однажды пошел в лес за грибами и нашел волшебный чайник. Чайники Этот рассказ про то, как я однажды пошел в лес за грибами и нашел волшебный чайник. Чайники Этот рассказ про то, как я однажды пошел в лес за грибами и нашел волшебный чайник. $(".extremum-click").click(function () { $(this).siblings(".extremum-slide").slideToggle("slow"); });