Jquery text toggle: jQuery Toggle Text? — Stack Overflow

020 Создание кнопки-переключателя с помощью jQuery — просмотр исходного видеоруководства

Из курса: Посмотреть исходный код

020 Создание переключателя с помощью jQuery

“

— [Голос за кадром] Привет, это Рэй Вильялобос, добро пожаловать в View Source. В этом эпизоде ​​мы рассмотрим, как создать кнопку-переключатель с помощью jQuery. Итак, если у вас есть несколько минут для быстрого совета по jQuery, пришло время просмотреть исходный код. Итак, давайте взглянем на нашу страницу и посмотрим, как мы собираемся этого добиться. Во-первых, у меня есть простая HTML-страница с абзацем в самом верху и переключаемой областью в самом низу.

Эта область переключения имеет вот этот фрагмент кода, который выглядит как вот эта кнопка-переключатель внизу. Это поле будет тем, что мы будем анимировать вверх и вниз всякий раз, когда мы нажимаем на эту кнопку. Мы связали этот файл с файлом CSS, и если мы посмотрим на этот файл CSS, мы увидим, что мы только что немного настроили это тело. У этого тела деревянный фон, вот здесь. И для разных браузеров, использующих разные браузерные префиксы, у нас есть радиальный градиент, который находится прямо поверх этого деревянного фона. Вы можете видеть, что мы вызываем деревянный фон прямо здесь, для каждого типа браузера. И здесь у нас есть этот градиент. Если мы увеличим непрозрачность градиента, вы увидите, что он проявляется намного сильнее. Итак, это просто небольшой градиент с небольшим количеством непрозрачности, чтобы показать едва заметное свечение. Теперь остальная часть кода позиционирует наш элемент переключения внизу. Итак, вы можете видеть здесь, что положение этого вот здесь зафиксировано в нижней части экрана, и у него есть небольшой запас для передышки. Сам блок имеет относительное позиционирование, так что он находится относительно своего предыдущего контейнера, который будет всем этим блоком, который является здесь положением переключателя. Итак, мы центрируем это, и мы просто даем ему немного передышки везде, а также добавляем немного текстур. На самом деле мы ничего этого не видим, потому что поле, которое появляется при переключении, не будет видно, пока мы не исправим jQuery. Итак, у нас также есть несколько стилей для элементов внутри блока, а именно эти два тега уровня заголовка и абзац. Наконец, у нас есть этот стиль поп-текста, это стиль настоящего текста прямо здесь. И это позволит получить фоновое изображение со стрелками. Прямо сейчас эта стрелка указывает вверх, потому что она находится в верхней части изображения. Но обратите внимание, что всякий раз, когда мы активируем всплывающее окно, фон этого элемента будет меняться на версию стрелки, которая была перемещена вверх на 18 пикселей. Это называется спрайтом, и мы можем использовать одно изображение и просто переместить его вверх на определенное количество пикселей, чтобы поместить его в другое положение. Взгляните на стрелки в этом PNG-файле. Вы можете видеть, что есть изображение, которое мы используем для обоих этих состояний, и прямо сейчас по умолчанию оно показывает только верхнюю половину. Всякий раз, когда мы нажимаем на этот элемент, он будет показывать нижнюю часть. Итак, вернемся к нашему стартовому файлу, и вы увидите, что мы добавили пару веб-шрифтов, один из которых называется «Arvo», а другой — «Amaranth». Вы можете найти веб-шрифты, перейдя на google.com/webfonts и нажав «Начать использование шрифтов». Вы можете либо выполнить поиск шрифта, который вы ищете. Чтобы использовать только этот шрифт, вы можете нажать «Быстрое использование» и скопировать код, который он вам дает, прямо здесь. Если вы хотите использовать более одного шрифта, добавьте этот шрифт в коллекцию. И вернитесь на главную страницу, выберите другие шрифты и избавьтесь от этого элемента поиска прямо здесь, чтобы мы могли видеть больше шрифтов, и добавьте любой другой шрифт, который вы хотите, а затем перейдите на вкладку «Использовать» здесь, в самом низу. . Видите, все шрифты, которые мы выбрали, тут как тут. И мы можем добавить этот фрагмент кода в наш HTML. Мы уже сделали это в нашем проекте и добавили сюда семейства «Арво» и «Амарант». И затем у нас есть остальная часть нашего кода. Итак, теперь нам нужно запрограммировать jQuery, чтобы этот переключатель активировался правильно. Теперь, чтобы сделать это, я перейду к фрагментам кода и сначала возьму ссылку на CDN jQuery из Google, поэтому CDN — это сеть доставки контента, которая загружает последнюю версию скриптов jQuery из Google. . Это всегда хорошая идея, если вы делаете это, чтобы также предоставить локальную копию вашего скрипта, что я и делаю прямо здесь, и вы можете видеть, что jquery.min.js также находится прямо здесь, в той же папке. Добавив это, мы можем убедиться, что если мы тестируем наш скрипт в автономном режиме, вы все равно сможете увидеть интерактивность. Поэтому, если по какой-то причине он не может подключиться к сети Google, потому что вы не в сети, вы все равно можете прочитать локальную копию. Итак, я возьму это, вернусь в свой начальный файл и в секцию head нашего документа вставлю этот фрагмент кода. Прямо сейчас мы ничего не заставили работать, все, что мы делаем, это просто связываемся с правильным файлом Javascript. Итак, теперь я собираюсь вернуться к фрагментам кода и взять второй фрагмент кода, и этот фрагмент кода фактически активирует нашу функцию извлечения текста. Итак, позвольте мне скопировать это и поместить в наш стартовый файл. Поместите это прямо здесь после сценария. И нажмите на это, и вы увидите, что теперь весь этот блок текста, который мы скрыли в начале, исчезает. Итак, то, что мы здесь делаем, это прежде всего создание функции готовности документа. Это означает, что этот фрагмент кода будет выполняться только после загрузки всего документа. Таким образом, рекомендуется поместить все ваши функции в этот тег, чтобы убедиться, что функции выполняются только после загрузки страниц. Теперь, следующее, что мы делаем, это добавляем обработчик, чтобы, когда кто-то нажимал на этот элемент под названием #poptext, который находится прямо здесь, программа собиралась сделать пару вещей. Первое, что он сделает, это активирует этот метод переключения класса, который будет включать и выключать класс. Итак, я уберу это, чтобы вы могли видеть, что здесь происходит. Другое, что происходит здесь, это то, что если мы нажмем на этот элемент, он будет включаться и выключаться, этот дополнительный класс подсветки. И если вы помните, класс выделения просто меняет фоновое изображение, а также меняет цвет фона прямо здесь. Итак, что мы делаем, так это делаем этот фон желтым и добавляем изображение стрелки, сдвинутое на 18 пикселей, чтобы сдвинуть его вверх, это то же самое изображение, что и раньше, но мы показываем другую часть Это. Итак, все, что нужно делать, это включать и выключать его, и это самый простой способ выполнения переключения jQuery, но всякий раз, когда вы хотите показать или скрыть другой элемент, вам, возможно, придется сделать это немного по-другому. Итак, я собираюсь добавить этот код обратно. Как видите, я переключаю анимацию самого блока, выполняя функцию анимации в этом элементе блока.

Таким образом, этот элемент блока является идентификатором, который показывает все стили, происходящие внутри нашего блока. Итак, когда я что-то анимирую, я могу включать и выключать различные свойства анимации. Итак, если я уберу некоторые из них, я уберу ширину и эту последнюю запятую, и теперь я нажму, вы увидите, что анимируется не ширина, а высота и непрозрачность этого переключателя. оживляют. Таким образом, мы можем контролировать различные вещи, которые мы хотим включать и выключать. Мы добавим туда ширину, вы можете видеть, что теперь фактическая форма и ширина поля увеличиваются, когда я нажимаю на этот элемент. И другой элемент управления, который у нас есть, — это как долго мы хотим, чтобы эта анимация длилась? Это миллисекунды, поэтому, если я установлю его на 200, это произойдет намного быстрее. Так что иногда вы можете просто переключить объект, если вы на самом деле не хотите анимировать какие-либо его функции, используя класс toggle. Если вы хотите анимировать некоторые элементы элемента, вы можете просто использовать метод animate прямо здесь. И вы можете управлять отдельными элементами, набрав переключатель для каждого из элементов, которые вы хотите переключить. Итак, не забудьте проверить некоторые из отличных курсов, которые есть в библиотеке Lynda.com по jQuery и анимации jQuery. Вы также можете посмотреть здесь другие выпуски View Source и помните, что когда вам нужно стильно анимировать свое тело, самое время использовать View Source.

Содержание

Свернуть · Начальная загрузка

Переключите видимость контента в вашем проекте с помощью нескольких классов и наших подключаемых модулей JavaScript.

Пример

Нажмите кнопки ниже, чтобы показать или скрыть другой элемент с помощью изменения класса:

• .collapse скрывает содержимое
• .collapsing применяется во время переходов
• .collapse.show показывает содержимое

Вы можете использовать ссылку с атрибутом href или кнопку с атрибутом data-target . В обоих случаях требуется data-toggle="collapse" .

Ссылка с href

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry Richardson ad Squid. Nihil anim keffiyeh Helvetica, ремесленное пиво Labore Wes Anderson cred nesciunt sapiente ea proident.

 

  
    Ссылка с href
  
   
    Кнопка с целью данных
  

<дел>
  <дел>
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry Richardson ad Squid. Nihil anim keffiyeh Helvetica, ремесленное пиво Labore Wes Anderson cred nesciunt sapiente ea proident.