Открытие скрытого текста на одностраничном сайте нажатием на объ
Author: Светлана Ц.
Visited 1721,
Followers 1,
Shared 0
Собственно есть сайт, необходимо по-умолчанию часть информации скрыть, чтобы при желании посетитель мог нажать на назначенный объект "далее" и просмотреть информацию всю целиком или по-частям.
Posted on the
Здравствуйте, Светлана. Как вариант, можно создать страницу, где в текстовом объекте добавить часть информации, а под ней ссылку "Далее" ведущую на страницу с полной информацией.
Есть платный объект Аккордеон. Правда он не без недостатков, одно поле с текстом всегда открыто и высота блоков не варьируется высотой текста.
Есть вкладки в текстовом объекте, типа бесплатного аккордеона).
Author
Добрый день, спасибо за совет, но хотелось бы реализовать именно в одностраничном варианте(
Author
Спасибо, попробую!
Author
Похоже на моей 11 версии этого нет(
Светлана, Вы правы. Объект Accordion Text совместим с 17.1.
Вот простой пример "Скрыть контекст" для WebSite X5 Evolution 11
Используем HTML код:
<div id="content">
<span class="more">Читать полностью</span>
<br><br>
<h3>1. Будущее глазами IBM</h3>
Первые электронные программируемые компьютеры, появившиеся в 40-х годах прошлого столетия, являлись, по сути, всего лишь очень быстрыми калькуляторами. И как же быстро всё изменилось с тех пор в IT-отрасли! Всего за 60 с небольшим хвостиком лет громоздким и неэффективным вычислительным машинам пришли на смену лёгкие и тоненькие мобильные компьютеры, умещающиеся на ладони. Более того, погоня за вычислительной производительностью постепенно сменяется технологиями, которые открывают перед компьютерами новые виды деятельности, раньше доступные только человеку. Мы входим в так называемую эру когнитивных компьютеров, когда электронные системы смогут заниматься не только подсчётами и чётким выполнением программ, но и реализовывать некоторые функции живых организмов.
<br>
Начиная с 2006 года компания IBM ежегодно составляет список IT-технологий будущего под названием IBM 5 in 5, которые в ближайшие пять лет могут ощутимо повлиять на жизнь людей. В преддверии Нового года была опубликована седьмая по счёту редакция этого списка. Именно на когнитивные технологии делает ставку «голубой гигант». По мнению компании, за пятилетку в этом направлении человечество может сделать существенный рывок. Человек обладает следующими основными органами чувств - зрения, слуха, обоняния, осязания, вкуса. Добавление функций любого из вышеперечисленных органов чувств в компьютер открывает новые интересные возможности.
<br>
<h3>1.1. Коснуться виртуального</h3>
Помощник директора подразделения IBM Research Retail Analytics Робин Шварц (Robyn Schwartz), архитектор решений Дандапани Шанмугам (Dhandapani Shanmugam) и архитектор программного обеспечения IBM Software Group Industry Solutions Сиддик Мухаммед (Siddique A. Mohammed) считают, что сенсорные технологии ещё глубже проникнут в нашу жизнь. Cовременные сенсорные дисплеи уже обеспечивают высокий уровень удобства при управлении смартфонами и планшетами. Но в будущем с помощью касания дисплея пользователи смогут, например, виртуально пощупать товары в интернет-магазинах. Сенсорные технологии позволят различать ткани, оценивать их текстуру. Реализацию этой технологии IBM видит в создании вибрационного поля, ощутимого тактильно на расстоянии нескольких миллиметров от дисплея.
<br>
Впрочем, сфера применения подобных технологий не ограничивается покупками - лишь фантазией инженеров. IBM предлагает, например, проводить удалённый предварительный медицинский осмотр по фотографиям, которые врач может прощупать. Также интересно использование данной технологии в коммуникациях. Представьте себе, как вы, разговаривая по «Скайпу», можете погладить по лицу любимого человека, находящегося в тысячах километрах от вас. Но это уже скорее работа на более далёкую перспективу. Если стандартные образцы тканей и материалов можно без проблем добавить в базу данных, то для передачи текстуры кожи человека, её температуры, гладкости и так далее надо будет каким-то образом считывать все эти параметры в режиме реального времени.
<br>
<h3>1.2. Компьютеры со зрением</h3>
Большинство технологий поиска по изображениям используют так называемые теги или описания к картинкам, благодаря чему компьютер может определить, что там нарисовано. Человек же воспринимает изображения совсем на другом уровне. Он способен проанализировать картинку, определить, что делает субъект или какая ситуация изображена.
<br>
Несмотря на впечатляющий рост вычислительной мощности, компьютеры до сих пор не научились «видеть» как человек. Это и не удивительно, ведь зрение является довольно сложным механизмом, и традиционным программированием его не воссоздашь. Но, по мнению старшего руководителя IBM Intelligent Information Management Джона Смита (John Smith), использование когнитивного подхода позволит компьютерам в будущем анализировать изображения на основе тысяч образцов изображений в базе данных. Например, мы хотим научить компьютер тому, как выглядит песчаный пляж. Для этого необходимо показать ему достаточно большое количество фотографий с разными пляжами в разных ракурсах. По этим образцам компьютер выделит такие специфические особенности, как распределение цветов, текстура, контуры. Далее процесс обучения можно усложнять. Когда компьютер уже будет узнавать пляж, можно будет научить его распознавать, что люди делают на пляже - загорают, строят песочные замки или играют в волейбол.<br>
Эту технологию можно использовать в медицине, особенно в дерматологии для своевременного определения рака кожи на ранних стадиях, когда симптомы внешне практически не видимы для человеческого глаза. Также с помощью «компьютерного зрения» в городах можно будет развернуть системы быстрого реагирования на различные ситуации, включая стихийные бедствия.
</div>
Вставьте его, как показано на скриншоте
Используйте скрипт:
<script>
$(document).ready(function(){
$('#imFooPad').css('height', '0px');
$('.more').click(function() {
if ($(this).text() == 'Читать полностью') {
$(this).text('Свернуть');
$(this).parent().css('height', '100%');
} else {
$(this).text('Читать полностью');
$(this).parent().css('height', '250px');
}
});
});
</script>
Вставьте скрипт, как показано на скриншоте
Используйте код стилей:
<style>
#content {
height: 250px;
overflow: hidden;
margin: 1%;
padding: 20px;
text-align: justify;
font-family: Century Gothic,Arial,Verdana,sans-serif;
text-shadow: 1px 1px 1px #C9C9C9;
color: #4A4949;
border: 5px double #e6ce9f;
-webkit-box-shadow:0 0 10px rgba(0,0,0,0.6);
-moz-box-shadow:0 0 10px rgba(0,0,0,0.6);
box-shadow:0 0 10px rgba(0,0,0,0.6);
-moz-border-radius:3px;
border-radius:3px;
}
h3 {
text-align:center;
}
.more {
text-decoration: underline;
float: right;
color: #880000;
font-size: 14px;
}
.more:hover {
font-weight: bold;
cursor: pointer;
}
</style>
Вставьте его, как показано на скриншоте
Сам проект здесь