Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Кнопка подробнее для сайта: Как создать кнопку сайта? — База знаний uCoz

javascript — script.js код, реализующий кнопку «Подробнее» для просмотра статьи

Вопрос задан

Изменён 1 год 7 месяцев назад

Просмотрен 870 раз

я совсем ещё зеленый в этой теме,подскажите пожалуйста.Как реализовать кнопку подробнее через js ,я хочу сделать так: overflow: hidden; при нажатии заменить на overflow: visible;
Возможно ли это как то сделать через js?

var info=document.getElementsByClassName("button_info")
var text_info=document.getElementsByClassName("text_none")
info.onclick = function ()
{
    document.getElementByClassName('text_none').style.overflow="visible"; 
}   (Этот код не работает,возможно я неправильно обращаюсь,или же вообще так делать нельзя?)C

Есть HTML код:

<div>Показать всё содержимое статьи:
</div>
<div    > Текст,который будет не вмещаться  в рамки <br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который  не вмещался в рамки<br>
  Текст,который  не вмещался в рамки<br>
  Текст,который  не вмещался в рамки<br>
  Текст,который  не вмещался в рамки<br>
</div>

CSS-код:

. text_none 
{
max-height: 150px;
max-width: 300px;
overflow: hidden; 
border: 1px solid black;
}             
.button_info
{
background-color:  darkcyan;
color: white;
padding: 12px 16px;
font-size: 18px;
font-weight: bold;
border: none;
cursor: pointer;
width: 120px;
}
  • javascript
  • html
  • css

Не очень понял, что это «Текст,который будет не вмещаться в рамки». Но в остальном можно использовать класс модификатор, к примеру «more». Который по кнопке будет добавлять необходимые вам стили и при повторном клике возвращать обратно. Надеюсь правильно понял вопрос.

let info=document.querySelector(".button_info")
let text_info=document.querySelector(".text_none")
info.onclick = function ()
{
   text_info.classList.toggle('more')   
} 
.text_none {
  max-height: 150px;
  max-width: 300px;
  overflow: hidden; 
  border: 1px solid black;
}         
.text_none.more {
  max-height: none;  
  overflow: visible;
  
}  
.button_info {
  background-color:  darkcyan;
  color: white;
  padding: 12px 16px;
  font-size: 18px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  width: 120px;
}
<div>Показать всё содержимое статьи:</div>
<div>
  Текст,который будет не вмещаться  в рамки <br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который  не вмещался в рамки<br>
  Текст,который  не вмещался в рамки<br>
  Текст,который  не вмещался в рамки<br>
  Текст,который  не вмещался в рамки<br>
</div>

9

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Кнопки в дизайне — блог компании «Веб-Эталон»

Кнопки — незаменимый элемент взаимодействия с пользователем, они сообщают о действиях, которые можно совершить. Кнопка должна быть узнаваемой, заметной и понятной.

Кнопка на сайте trello.com узнаваема, заметна и понятна

Различие кнопок по внешнему виду

  1. Залитая цветом кнопка, как правило, выделяющаяся относительно других кнопок. Она обозначает самые важные действия на сайте
  2. Кнопка с контуром может использоваться для обозначения как вторичной кнопки, так и основной
  3. Текстовая кнопка используется для менее приоритетных действий и помогает сохранить акцент на основном тексте, не отвлекая на себя внимание
  4. Кнопка переключения группирует набор действий, из которых можно выбрать только одно. Такие кнопки используются реже остальных.

Различие кнопок по иерархии

На сайте может быть более одной кнопки одновременно, поэтому основная кнопка может сопровождаться другими.

  1. Основная (первичная) кнопка. Эта кнопка должна быть сильным визуальным индикатором, помогающим пользователю ориентироваться на сайте. Используйте для таких действий, как «перейти», «следующий», «смотреть еще», «заказать» и т.д.
    2. Основная кнопка «подробнее» на сайте brandon-visa.ru
  2. Вторичная кнопка используется для второстепенных действий, с более низким приоритетом, чем у основной кнопки. Может быть кнопкой-компаньоном для основной. Например, быть рядом с кнопкой «отправить» и называться «отмена». Не обязательно, чтобы эта кнопка имела отношение к первичной, суть ее в том, что она должна привлекать меньше внимания. Использование вторичных кнопок рядом с основной на сайте designmodo.com
  3. Плавающая кнопка используется для обозначения действия, на котором нужно сфокусировать отдельное внимание. Обычно используется в мобильных приложениях. Плавающая кнопка «больше похожих аккаунтов» в приложении Instagram

Несколько полезных советов

Внешний вид:

  • горизонтальный внутренний отступ может быть либо выровнен по сетке, либо иметь одинаковый отступ по бокам. Выравнивание по сетке позволяет сохранять кнопку всегда одинакового размера (в таком случае это ограничивает количество текста в кнопке). Если сохранять одинаковый отступ по бокам, например, 32рх, это позволит менять длину кнопки и избежать ограничения по длине текста. Но в таком случае надо установить минимальную ширину кнопки, например, 100рх, чтобы избежать слишком маленьких кнопок
  • вертикальный внутренний отступ должен быть достаточным, чтобы тексту в кнопке не было «тесно», например, при высоте строки 22px сделайте отступы по 40рх
  • делайте текстовую кнопку узнаваемой и понятной. Если она не написана заглавными буквами, ее цвет и стиль должен отличаться от обычного текста.

На сайте equatorcoffees.com у кнопки горизонтальный внутренний отступ выровнен по сетке и все кнопки одного размера

Содержание:

  • выберите текстовый стиль кнопки и придерживайтесь его
  • определите формулировку текста в кнопке и придерживайтесь ее. Например, глагол (смотреть), глагол+существительное (смотреть видео), глагол+наречие (купить сейчас)
  • не используйте слишком длинный текст
  • не переносите текст на вторую строчку без острой необходимости
  • кнопка может содержать не только текст, но и иконку для более быстрого распознавания.

На сайте ekolife.co.uk кнопка имеет формулировку глагол+наречие и недлинный текст в одну строку

Сочетание:

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

Основная кнопка на сайте themelooks.com выделена, а менее приоритетная кнопка—контурная

Состояние:

  • Неактивные кнопки. Кнопка может быть не активной, (отключенной), если пользователь не выполнил необходимые действия. После выполнения действий кнопка становится активной.
  • Активная кнопка—ее внешний вид дает пользователю понять, что она кликабельна
  • Наведение
  • Фокус обозначает, например, открытую вкладку
  • Нажатие.

На сайте brandon-visa.ru фокус сосредоточен на одной кнопке, из этого можно понять, что остальные кнопки кликабельны и при нажатии на одну из них откроется нужная вкладка

Выводы:
  • Кнопки различаются по внешнему виду: залитая цветом кнопка, кнопка с контуром, текстовая кнопка, кнопка переключения
  • Различаются по иерархии: основная (первичная), вторичная и плавающая
  • Во внешнем виде соблюдайте горизонтальные и вертикальные отступы и выделяйте текстовую кнопку, чтобы она отличалась от обычного текста
  • Следите за содержанием кнопки: придерживайтесь одного текстового стиля, формулировки, не делайте текст слишком длинным и не переносите его на вторую строчку
  • Правильно сочетайте кнопки: при использовании нескольких кнопок рядом, основной кнопкой выделите более важное действие, не ставьте рядом две основные кнопки, не размещайте кнопки друг под другом.

Краткое руководство по созданию веб-сайтов (v8 и v10)

Как приступить к работе с конструктором веб-сайтов.

Инструкции V10

Инструкции V8

V10 Инструкции:

1. Основное меню — Переключитесь на другое приложение, такое как блог или магазин

2. Опубликовать — Сделайте свой веб -сайт.

3.  Добавить разделы  – добавить новый контент на вашу страницу

3 важные кнопки

, чтобы добавить раздел на вашу страницу:

1. Нажмите кнопку +

Добавить кнопку секции

2. Нажмите . Добавить раздел

 

3. Выберите раздел, который хотите использовать; затем он появится в выбранной вами позиции

Выберите раздел

 

Используйте ручку перетаскивания для перемещения раздела. Зона сброса содержимого обозначена зеленой полосой

Перемещение раздела

 

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

Когда вы публикуете свой сайт, он становится видимым во всемирной паутине (WWW). Если вы измените свой сайт, вам нужно будет нажать Опубликовать еще раз, чтобы сделать новые изменения видимыми.

Сообщения в блоге публикуются автоматически; вам не нужно нажимать кнопку публикации, чтобы опубликовать новое сообщение.

 

 

v8 Инструкции:

 

 

Конструктор веб-сайтов совместим с большинством устройств iOS и Android.

Рекомендуемые браузеры:

  • Для iPhone мы рекомендуем использовать Safari.
  • Для телефонов Android мы рекомендуем использовать Chrome.

Примечание: Мы используем слово «рабочий стол» для обозначения любого типа компьютера с большим экраном.

Четыре важные кнопки

  1. Главное меню: Переключиться на другое приложение, например Блог или Магазин.
  2. Кнопка «Добавить контент»: Добавьте новые изображения, текст или другой контент на свою страницу.
  3. Кнопка предварительного просмотра на рабочем столе: Посмотрите, как ваш веб-сайт выглядит для посетителей с настольных устройств.
  4. Кнопка «Опубликовать»: Сделайте свой веб-сайт видимым в Интернете.

 

Добавить контент

Чтобы добавить контент на свою страницу:

  1. Нажмите кнопку Добавить содержимое .
  2. Перетащите любой элемент из панели содержимого на страницу.
  3. Перетащите содержимое на страницу.

Предварительный просмотр рабочего стола и макет страницы

Чтобы увидеть, как ваш веб-сайт выглядит для пользователей настольных компьютеров:

  1. Коснитесь значка предварительного просмотра рабочего стола .
  2. В качестве альтернативы, для лучшего предварительного просмотра на рабочем столе, поверните устройство в ландшафтный режим.

Чтобы изменить макет, который увидят пользователи настольных компьютеров:

  1. Коснитесь элемента , который вы хотите переместить.
  2. Используйте значок перетаскивания для перемещения элемента по странице.
  3. Зоны перетаскивания отображаются зеленым цветом, когда вы перетаскиваете элемент по странице. Отпустите элемент, чтобы разместить его .

Публикация вашего сайта

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

Когда вы публикуете свой сайт, он становится видимым во Всемирной паутине (WWW). Если вы внесете изменения на свой сайт, вам нужно будет снова нажать «Опубликовать», чтобы эти изменения стали видны.

Сообщения в блоге публикуются автоматически: вам не нужно нажимать кнопку публикации, чтобы опубликовать новое сообщение.

 

Конструктор веб-сайтов работает на большинстве планшетов iOS и Android.

Рекомендуемые браузеры

  • Для iPad мы рекомендуем использовать Safari.
  • Для планшетов Android мы рекомендуем использовать Chrome.

Примечание: При редактировании веб-сайта на планшетном устройстве вы можете делать это в портретной или альбомной ориентации.

 

Три важные кнопки

  1. Главное меню: Переключиться на другое приложение, например Блог или Магазин.
  2. Кнопка «Добавить контент»: Добавьте новые изображения, текст или другой контент на свою страницу.
  3. Кнопка публикации: Сделайте свой веб-сайт видимым в Интернете.

 

Чтобы добавить контент на свою страницу:

  1. Нажмите кнопку Добавить контент .
  2. Перетащите любой элемент из панели содержимого на страницу.
  3. Перетащите содержимое на страницу.

Добавить содержимое

Чтобы изменить макет страницы:

  1. Коснитесь элемента , который вы хотите переместить.
  2. Используйте значок перетаскивания для перемещения элемента по странице.
  3. Зоны перетаскивания отображаются зеленым цветом, когда вы перетаскиваете элемент по странице. Отпустите элемент, чтобы разместить его .

Публикация вашего сайта

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

Когда вы публикуете свой сайт, он становится видимым во Всемирной паутине (WWW). Если вы внесете изменения на свой сайт, вам нужно будет снова нажать «Опубликовать», чтобы сделать эти изменения видимыми.

Сообщения в блоге публикуются автоматически; вам не нужно нажимать кнопку публикации, чтобы опубликовать новое сообщение.

Вот некоторые важные основы, которые помогут вам начать работу с продуктом Website Builder. Этот продукт состоит из трех важных кнопок.

  1. Главное меню:  Переключиться на другое приложение, например Блог или Магазин.
  2. Кнопка «Добавить контент»:  Добавьте новые изображения, текст или другой контент на свою страницу.
  3. Кнопка публикации:  Сделайте свой веб-сайт видимым в Интернете.

 

Конструктор сайтов: 3 кнопки

Добавить контент

Чтобы добавить контент на свою страницу:

  1. Нажмите кнопку Добавить содержимое .
  2. Перетащите любой элемент из панели содержимого на страницу.
  3. Перетащите содержимое на страницу.

Конструктор сайтов: добавление контента

 

Макет страницы

  1. Нажмите и перетащите элемент, который хотите добавить.
  2. Зоны перетаскивания отображаются зеленым цветом, когда вы перетаскиваете элемент по странице.

 Макет страницы

На странице можно создать до 4 столбцов.

 

Перемещение содержимого по странице

  1. Используйте ручку перетаскивания для перемещения содержимого.
  2. Зеленая полоса обозначает зону размещения содержимого.

  Перемещение содержимого

Примечание. Содержимое можно перетаскивать только в основной текст страницы, но не в верхний или нижний колонтитул.

 

Публикация вашего сайта

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

Когда вы публикуете свой сайт, он становится видимым во всемирной паутине (WWW). Если вы измените свой сайт, вам нужно будет снова нажать «Опубликовать», чтобы эти изменения стали видимыми.

Сообщения в блоге публикуются автоматически: вам не нужно нажимать кнопку публикации, чтобы опубликовать новое сообщение.

 

 

Добавление команд в презентацию с помощью кнопок действий

Используйте кнопку «Действие», чтобы выполнить действие в презентации, например перейти к следующему или определенному слайду, запустить приложение или воспроизвести видеоклип. Есть два основных шага для настройки кнопки действия:

  • Сначала вы выбираете кнопку действия из галереи Shapes

  • Затем вы назначаете действие, которое происходит, когда (во время показа слайдов) вы щелкаете фигуру или указываете на нее мышью.

Идея состоит в том, что во время презентации вы можете щелкнуть или указать на кнопку действия, чтобы:

  • org/ListItem»>

    Перейти к следующему слайду, предыдущему слайду, первому слайду, последнему слайду, последнему просмотренному слайду, слайду с определенным номером, другой презентации PowerPoint или веб-странице.

  • Запустить программу

  • Запустить макрос

  • Воспроизвести аудиоклип

Поместите кнопку действия на слайд

Некоторые примеры форм встроенных кнопок действий в 9Галерея 0400 Shapes включает стрелки вправо и влево (обычно понимаемые символы для перехода к следующему, предыдущему, первому и последнему слайдам), для воспроизведения видео или звуковых фрагментов и т. д.

  1. На вкладке Вставка щелкните Фигуры , а затем в разделе Кнопки действий в нижней части меню щелкните фигуру кнопки, которую вы хотите добавить.

  2. Щелкните место на слайде, а затем перетащите его, чтобы нарисовать форму кнопки.

  3. Не закрывайте диалоговое окно и переходите к следующей процедуре.

Назначение действия

Если вы хотите, чтобы действие выполнялось при нажатии кнопки действия , выполните следующие действия на Щелкните мышью диалогового окна.

Если вы хотите, чтобы действие выполнялось , когда кнопка действия просто указывает на , выполните следующие шаги на вкладке Mouse Over диалогового окна.

  1. Чтобы выбрать действие, которое будет выполняться при нажатии или наведении указателя на кнопку действия, выполните одно из следующих действий:

    • Выберите Гиперссылка на , а затем выберите место назначения (например, следующий слайд, предыдущий слайд, последний слайд или другую презентацию PowerPoint), к которому вы хотите перейти по гиперссылке.

      Примечание. Чтобы создать ссылку на файл, созданный в другой программе, например на файл Word или Excel, в списке Гиперссылка на нажмите Другой файл .

    • Выберите Нет , чтобы использовать форму без соответствующего действия.

    • Выберите Запустить программу , затем нажмите Обзор , чтобы найти программу, которую вы хотите запустить.

    • Выберите Запустить макрос , а затем выберите макрос, который вы хотите запустить.

      Параметры Запустить макрос доступны только в том случае, если ваша презентация уже содержит макрос, и при сохранении презентации вы должны сохранить ее как презентацию PowerPoint с поддержкой макросов. (Дополнительную информацию о макросах см. в разделе Запуск макроса.)

    • Если вы хотите, чтобы фигура, которую вы выбрали в качестве кнопки действия, выполняла действие, щелкните Действие объекта , а затем выберите действие, которое вы хотите выполнить.

      Параметры Object action доступны только в том случае, если ваша презентация содержит объект OLE.

    • Чтобы воспроизвести звук, выберите Воспроизвести звук Установите флажок, а затем выберите звук, который хотите воспроизвести.

  2. Когда вы закончите выбирать действие, выберите OK .

  3. org/ListItem»>

    Чтобы проверить выбранное действие, выберите Слайд-шоу > Из текущего слайда , чтобы открыть презентацию в режиме Слайд-шоу, чтобы можно было нажать кнопку действия.

  1. На вкладке Вставка в группе Иллюстрации щелкните Изображение . Если вы хотите добавить смарт-арт, нажмите SmartArt

  2. В диалоговом окне Вставить изображение найдите изображение, которое вы хотите добавить, и нажмите Вставить .

    Примечание. Для графики SmartArt вы можете назначить действие только тексту внутри фигур, но не отдельным фигурам в графике SmartArt.

  3. Щелкните добавленное изображение, а затем на вкладке Вставка в группе Ссылки щелкните Действие .

  4. В диалоговом окне Параметры действия выполните одно из следующих действий:

    • Чтобы выбрать поведение изображения при нажатии на него в режиме слайд-шоу, щелкните вкладку Щелчок мышью .

    • Чтобы выбрать поведение изображения при наведении на него указателя в режиме показа слайдов, щелкните вкладку Наведение мыши на .

  5. Чтобы выбрать действие, которое будет выполняться при нажатии или наведении указателя на изображение, выполните одно из следующих действий:

    • Чтобы использовать фигуру без соответствующего действия, щелкните Нет .

    • Чтобы создать гиперссылку, щелкните Гиперссылка на , а затем выберите место назначения (например, следующий слайд, предыдущий слайд, последний слайд или другую презентацию PowerPoint), к которому вы хотите перейти по гиперссылке.

    • org/ListItem»>

      Чтобы создать ссылку на файл, созданный другой программой, например на файл Microsoft Office Word или Microsoft Office Excel, в списке Гиперссылка на щелкните Другой файл .

    • Чтобы запустить программу, щелкните Запустить программу , щелкните Обзор , а затем найдите программу, которую хотите запустить.

    • Чтобы запустить макрос, нажмите Запустить макрос , а затем выберите макрос, который вы хотите запустить.

    • Если вы хотите, чтобы изображение или клип выполняли действие, отличное от указанного, щелкните Действие объекта , а затем выберите действие, которое вы хотите выполнить.

Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *