Какой рейтинг вас больше интересует?
|
Главная / Главные темы / Тэг «интерфейса»
Хак cкользящая панель - Portamento 2013-09-19 16:01:12
Оригинальная скользящая панель - Portamento , где основное функционирование завязана на ...
+ развернуть текст сохранённая копия
Оригинальная скользящая панель - Portamento , где основное функционирование завязана на использовании Jquery плагина Portamento. Сам плагин написан программистом Крисом Нобелем, главная особенность - это динамически передвигающийся по мере прокрутки слой с вашим содержимым. Скользящая панель - Portamento удобна для показа рекламного блока новостей, а также меню сайта, главным образом потому, что он всегда перед глазами. Установка проста и выполняется за пару шагов: 1. Скачиваем архив [isnt-logged] Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам hak_portamento.zip (46.96 Kb)[/is-logged]
2. Раскладываем содержимое по папкам
portamento.js (или portamento-min.js) -> templates/YOURTEMPLATE/js/
3. Открываем main.tpl, в head вставляем
Код: <script src="{tpl_url}/js/portamento.js"></script>
4. Добавим CSS стили. Portamento оборачивает панель в элемент с ID = portamento_container.
#portamento_container обеспечивает правильное положение панели, устанавливая ей свойство position:absolute.
Панель получает класс fixed, когда она скользит. Поэтому для нее надо установить свойство position:fixed.
Например:
Код: #portamento_container {
float:right;
position:relative;
}
#portamento_container #example {
float:none;
position:absolute;
}
#portamento_container #example.fixed {
position:fixed;
}5. Настроить панель.
Для начала нам нужно понять в каких пределах будет "ездить" наш слой (панель).
Для такой разметки, чтобы слой #r-slide ездил внутри слоя #right-side
в main.tpl вставляем код
Код: <script>
$('#r-slide').portamento({wrapper: $('#right-side'), gap: 10});
</script>
Portamento можно настроить за счет входных данных:
wrapper - элемент необходимый, чтобы ограничивать перемещение боковой панели. Боковая панель не может выйти за его границы. По умолчанию используется элемент .
gap - количество пикселов между верхней границе области обзора и боковой панелью. По умолчанию имеет значение 10.
disableWorkaround - отключает использование обходного способа для старых браузеров. Панель будет выводиться, но не будет скользить при прокручивании страницы.
Тэги: lightbox,, overlay, диалоги,, интерфейс,, меню, навигация
STICKY FOOTER - СКОЛЬЗЯЩЕЕ ФУТЕР МЕНЮ 2013-09-16 13:16:56
Футер представлен в двух вариациях: фиксированной длинны и во всю ширину. Построен футер на CSS + JS ...
+ развернуть текст сохранённая копия
Футер представлен в двух вариациях: фиксированной длинны и во всю ширину. Построен футер на CSS + JS. javascript используется для усовершенствования футера, как при наведении мыши на элементы или при клике. Это означает, что если в браузере отключен javascript, он будет прекрасно работать во всех браузерах, но без эффектов. Так же присутствуют некоторые CSS3 функции, такие как закругленные углы и тени текста, так, что если пользователь зайдет с какого нибудь Internet Explorer (версий 6, 7 и 8), функциональность футера не будет нарушена. Установка: 1. Скачать архив [isnt-logged] Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам stickyfooter.zip (78.48 Kb)[/is-logged]
2. Залить файлы на сервер в папку шаблона согласно их директориям, в случае замены (ну вряд ли конечно) сделать бекап файлов.
3. Открыть main.tpl и в head вставить:
Код: <script type="text/javascript" src="{tpl_url}/js/hoverintent.js"></script>
<script type="text/javascript" src="{tpl_url}/js/footer.js"></script>
<script type="text/javascript">
$(document).ready(function($){
$('#footer').stickyFooter({
speed : 'fast',
effect : 'hover_fade',
showhidefooter : 'show',
hide_speed : 1000,
hide_delay : 2000
});
});
</script>
Опции опишу ниже.
4.Вставляем код перед /body
Код: <ul id="footer" class="footer_fixed">
<li id="footer_home"><a href="http://ngcmshak.ru/">Dark5ider.ru</a></li>
<li id="footer_home"><a href="#"><img src="{tpl_url}/images/footer_home.png" alt="Домой" /></a></li>
<li><a href="#" class="dropup">Большой блок</a><!-- Блок 3: Большой -->
<div class="footer_dropup drop10columns">
<div class="col_10">
<h4>Большой блок</h4>
</div>
<div class="col_5">
<p>Используйте один из любых 6 включенных JQuery эффектов, чтобы показать содержание блока, показываться может как при наведении мыши , так и при щелчке, с 3 различными стилями: fade, slide или toggle.
<p>В правой части находятся <a href="http://ngcmshak.ru/">соц. значки</a> с тултипом (стоит плагин hoverIntent, я бы лично советовал BootStrap)</p>
</div>
<div class="col_5">
<p class="black_box">В футере встроен ряд стилей для вывода информации, такие как: заголовки, списки, абзацы с иконками, (это темное поле), таблицы и изображения! Все эти элементы оформлены в CSS, вы можете использовать соответствующий класс в HTML..
</p>
</div>
<div class="clear"></div>
<div class="col_2">
<ul>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
</ul>
</div>
<div class="col_2">
<ul>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
</ul>
</div>
<div class="col_3">
<h5>Текст с иконкой</h5>
<p class="calendar">Это параграф с иконкой календаря</p>
<p class="note">Это параграф с иконкой заметки</p>
<p class="archive">Это параграф с иконкой архива</p>
<p class="search">Это параграф с иконкой поиска</p>
<p class="help">Это параграф с иконкой помощи.</p>
</div>
<div class="col_3">
<h5>И еще</h5>
<p class="delete">Это параграф с иконкой удаления</p>
<p class="favorite">Это параграф с иконкой избранного</p>
<p class="lock">Это параграф с иконкой блокировки.</p>
<p class="briefcase">Это параграф с иконкой портфеля.</p>
<p class="user">Это параграф с иконкой пользователя.</p>
</div>
</div>
</li><!-- Конец Блок 3 -->
<li><a href="#" class="dropup">Изображения</a><!-- Блок 4: Изображения -->
<div class="footer_dropup drop6columns">
<div class="col_6">
<h4>Простой параграф с изображением</h4>
<img src="img/asset01.jpg" class="imgshadow img_left" alt="" />
<p>Значение слова Простой по Ожегову:<br />
Не сложный, не трудный, легко доступный пониманию, осуществлению.
Самый обыкновенный не выделяющийся среди других.
Однородный по составу, не составной.
Не лучшего качества, грубый по обработке.
</p>
<p>Как-то случайно, без особого намерения.
Добродушный, простодушный, не церемонный.
Глуповатый, недалекий.
Безыскуственный, незамысловатый.
Без лишних сложностей, без церемоний.
</p>
<hr />
<h4>Еще один параграф с изображением</h4>
<img src="img/asset02.jpg" class="imgshadow img_left" alt="" />
<p>Значение слова Простой по Ожегову:<br />
Не сложный, не трудный, легко доступный пониманию, осуществлению.
Самый обыкновенный не выделяющийся среди других.
Однородный по составу, не составной.
Не лучшего качества, грубый по обработке.
</p>
<p>Как-то случайно, без особого намерения.
Добродушный, простодушный, не церемонный.
Глуповатый, недалекий.
Безыскуственный, незамысловатый.
Без лишних сложностей, без церемоний.
</p>
</div>
</div>
</li><!-- Конец Блок 4 -->
<li><a href="#" class="dropup">Текст, Таблицы и списки</a><!-- Блок 5: Текст, Таблицы и списки -->
<div class="footer_dropup drop8columns">
<div class="col_8">
<h4>Дополнительные списки</h4>
</div>
<div class="col_2">
<ol class="num">
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
</ol>
</div>
<div class="col_2">
<ol class="num2">
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
</ol>
</div>
<div class="col_2">
<ul class="list">
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
</ul>
</div>
<div class="col_2">
<ul class="list2">
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">еще...</a></li>
</ul>
</div>
<div class="col_8">
<hr />
</div>
<div class="col_4">
<p class="dark">Некоторые психиатры, изучая сущность шизофрении, обращают внимание...</p>
<p class="brown">Некоторые психиатры, изучая сущность шизофрении, обращают внимание...</p>
<p class="yellow">Некоторые психиатры, изучая сущность шизофрении, обращают внимание...</p>
<p class="red">Некоторые психиатры, изучая сущность шизофрении, обращают внимание...</p>
<p class="blue">Некоторые психиатры, изучая сущность шизофрении, обращают внимание...</p>
<p class="green">Некоторые психиатры, изучая сущность шизофрении, обращают внимание...</p>
</div>
<div class="col_4">
<h4>Таблица</h4>
<p>Темная таблица хорошо сочетается с общим стилем футера.</p>
<table id="table_dark" cellspacing="0">
<tr><th>Заголовок</th><th>Заголовок</th><th>Заголовок</th></tr>
<tr><td>текст</td><td>текст</td><td>текст</td></tr>
<tr><td>текст</td><td>текст</td><td>текст</td></tr>
<tr><td>текст</td><td>текст</td><td>текст</td></tr>
<tr><td>текст</td><td>текст</td><td>текст</td></tr>
</table>
</div>
</div>
</li><!-- Конец Блок 5 -->
<li id="social"><!-- Блок 6: Соц сети -->
<ul>
<li><a href="#" class="tooltip"><img src='{tpl_url}/images/icons/twitter.png' alt="" class="footer_icon" /><span>Twitter</span></a></li>
<li><a href="#" class="tooltip"><img src='{tpl_url}/images/icons/rss.png' alt="" class="footer_icon" /><span>RSS</span></a></li>
<li><a href="#" class="tooltip"><img src='{tpl_url}/images/icons/flickr.png' alt="" class="footer_icon" /><span>Flickr</span></a></li>
<li><a href="#" class="tooltip"><img src='{tpl_url}/images/icons/facebook.png' alt="" class="footer_icon" /><span>Facebook</span></a></li>
</ul>
</li><!-- Конец Блок 6 -->
</ul>
<a id="footer_trigger" class="active" href="#"></a><!-- Кнопка свернуть -->
5. Готово.
Настройка:
speed : ставим насколько быстро "drop ups" показывается. Варианты: slow, normal, fast или значение в миллисекундах, пример: speed : 500
effect : Эффект показа "drop ups": 'hover_fade', 'hover_slide', 'hover_toggle', 'click_fade', 'click_slide' или 'click_toggle'
showhidefooter : Футер может быть скрыт или открыт, когда страница загрузилась, 'show' его покажет, ну и соответственно 'hide' скроет. hide с параметрами:
hide_speed : время (в миллисекундах) за которое футер "скрывается"
hide_delay : время (в миллисекундах) через которое футер "скрывается"
Тэги: css,, lightbox,, overlay, диалоги,, интерфейс,, меню, навигация,
8 причин, по которым пользователи не заполняют форму регистрации 2013-09-13 17:43:28
Регистрация на сайте — это большая ответственность для большинства людей. Пользователи, которые ...
+ развернуть текст сохранённая копия
Регистрация на сайте — это большая ответственность для большинства людей. Пользователи, которые регистрируются на вашем сайте, дают свою персональную информацию, доверяя ее вашему ресурсу. Большинство сегодняшних пользователей более обеспокоены тем, кому они передают свою личную информацию. Виртуальный мир кишит хакерами и спамерами, но кто может обвинить их? Если вы не видели много форм регистраций, то ваша форма — препятствие для пользователя. Ниже изложено 8 основных причин, по которым пользователи не заполняют формы регистрации.
Читать дальше →
Тэги: веб-дизайн, веб-формы, дизайн, интерфейсы, переводы, регистрации, форма
мы вырастаем из асфальта в южном бутово, или крах концепции flat design 2013-09-12 12:03:37
+ развернуть текст сохранённая копия
 К счастью, мы можем датировать смерть «новой архитектуры» точным моментом времени. «Новая архитектура» умерла шумно... «Новая архитектура» умерла в Сент-Луисе, Миссури, 15 июня 1972 г. в 3:32 пополудни (или около того), когда пользовавшийся дурной славой квартал Прютт-Айгоу, а точнее, несколько его корпусов были взорваны динамитом. Это был coup de grace <...>
Прютт-Айгоу был сооружен в соответствии с наиболее прогрессивными идеалами СИАМ (Международные Конгрессы Современных Архитекторов); в 1951 г. проекту была присуждена награда Американского Института Архитекторов. Квартал состоял из элегантных 14-этажных блоков с рациональными «висячими улицами» (которые были безопасны в отношении автомашин, но, как выяснилось, небезопасны в отношении преступности), полными «солнца, пространства и зелени» — того, что Ле Корбюзье называл «тремя основными радостями урбанизма» (вместо традиционных улиц, садов и полуобщественных пространств, которые он отвергал). В квартале было предусмотрено разделение пешеходного и транспортного движения, значительное игровое пространство иместное обслуживание типа прачечных, яслей и центров общения — все это разумная замена традиционных образцов. Кроме того, пуристский стиль архитектуры, ее стерильная чистота, ее больничные метафоры были предназначены для того, чтобы привить посредством хорошего примера соответствующие добродетели жителям. Хорошая форма должна была обеспечить хорошее содержание или, по крайней мере, хорошее наполнение; разумная планировка абстрактного пространства призвана была способствовать здоровому поведению. // Ч. Дженкс. Язык архитектуры постмодернизма (курсив мой — О. П.)   Однако уже в середине 1960-х годов квартал превратился в гетто. Дворники перестали убирать мусор. Окна никто не стеклил. Пришлось установить антивандальные двери и светильники. Полиция стала отказываться приезжать по вызову в район. В течение 1969 года из-за высокой стоимости содержания, городские власти подняли стоимость аренды жилья в «Прюитт-Игоу» в три раза. Массовая неуплата счетов привела в итоге к коммунальной трагедии — в одном из домов из-за отсутствия ремонта прорвало канализацию. В 1970 году город объявил квартал зоной бедствия и начал отселение жильцов. Власти решили, что людей легче выселить, чем ремонтировать инфраструктуру. В 1972 году начался снос района. Первыми были взорваны три здания. Снос первых домов был показан по национальному телевидению. Кадры отражали неудачу программы по строительству государственного жилья. // Почему в США не строят типовые дома, как в СССР 
Тэги: архитектура, дженкс, интерфейс, модернизм
Новости в SLIDE BOXе 2013-09-11 00:39:41
Новости (Топ ,Последние,Случайные) в SLIDE BOXе Будем использовать плагин xnews 1. ...
+ развернуть текст сохранённая копия
Новости (Топ ,Последние,Случайные) в SLIDE BOXе Будем использовать плагин xnews 1. Скачиваем архив [isnt-logged] Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам slaid.zip (8.13 Kb)[/is-logged] и заливаем в папку с шаблоном со слиянием папок ,но без замены
2. Открываем файл main.tpl вставляем в код перед /body
Код: <div id="rp_list" class="rp_list">
<ul>
{{ callPlugin('xnews.show', {'extractEmbeddedItems' : true, 'order' : 'last', 'count': '6', 'template' : 'xnews3'}) }}
</ul>
<span id="rp_shuffle" class="rp_shuffle"></span>
</div>
<script type="text/javascript" src="{{ tpl_url }}/js/sliderelated.js"></script>
3. В шаблоне main.tpl до /head подключаем стили:
Код: <link rel="stylesheet" href="{tpl_url}/css/sliderelated.css" type="text/css" media="screen"/>4. Соответственно в sliderelated.css настраиваем стили под ваши нужды
Вроде все пользуемся.
Тэги: lightbox, overlay, диалоги,, интерфейс,
Главная / Главные темы / Тэг «интерфейса»
|
Взлеты Топ 5
Падения Топ 5
|
