Дизайн интерфейса

Использование системы в различных ситуациях, вопросы программирования сценариев.

Модератор: immortal

lavstudia
Сообщения: 31
Зарегистрирован: Вт фев 04, 2014 9:29 am
Благодарил (а): 0
Поблагодарили: 4 раза

Re: Дизайн интерфейса

Сообщение lavstudia » Пт мар 21, 2014 12:11 pm

Работа проверена в браузере Google Chrome - писал выше! (на все не хватает времени - кроссбраузерность еще предстоит)
Главные отличия (описывал выше - организация кода, это тоже очень важно)

На картинке выше также показан концепт разрабатываемого шаблона (замена текущему)
Alex
Сообщения: 2357
Зарегистрирован: Пт апр 20, 2012 12:53 pm
Благодарил (а): 42 раза
Поблагодарили: 262 раза

Re: Дизайн интерфейса

Сообщение Alex » Пт мар 21, 2014 12:34 pm

> Тогда вот так

Да, по поведению это то, что нужно. И это можно использовать для своих табов без проблем.

Но как это поведение интегрировать в стандартные табы MajorDoMo? Нужно чтобы так вели себя стандартные табы (вкладки), которые сейчас выстраиваются в 2 (3-4...) ряда.
lavstudia
Сообщения: 31
Зарегистрирован: Вт фев 04, 2014 9:29 am
Благодарил (а): 0
Поблагодарили: 4 раза

Re: Дизайн интерфейса

Сообщение lavstudia » Пт мар 21, 2014 12:53 pm

Очень просто в MDM табы на jQueryUI (можно обнаружить в templates_alt выше выкладывал шаблон) и в моем примере также - просто есть дополнительный скрипт ui.tabs.paging.js и код
$(function($) {
$('#example').tabs(); - есть и в MDM табах
$('#example').tabs('paging', { cycle: true, follow: true } ); - необходимо добавить после
});

вот и все, будут проблемы вечером сам внедрю в выложу в данной теме...
Alex
Сообщения: 2357
Зарегистрирован: Пт апр 20, 2012 12:53 pm
Благодарил (а): 42 раза
Поблагодарили: 262 раза

Re: Дизайн интерфейса

Сообщение Alex » Пт мар 21, 2014 4:40 pm

Добавил

$('#tabs').tabs('paging', {cycle:false, follow:false});

и

.ui-state-default.ui-tabs-paging-next.ui-tabs-paging-disabled {background: #cc0000; }
li.ui-state-default.ui-tabs-paging-next {background: #00cc00;}
.ui-state-default.ui-tabs-paging-prev.ui-tabs-paging-disabled {background: #0000cc; }
li.ui-state-default.ui-tabs-paging-prev {background: #cc00cc; }

Почти получилось, осталось 2 проблемы.

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

2. Зелёный и красный табы непонятно откуда (не из css) получают стиль, который их зачем то растягивает. Из css эта гадость не перекрывается.
Вложения
1.png
1.png (3.51 КБ) 11331 просмотр
binladin
Сообщения: 143
Зарегистрирован: Чт фев 06, 2014 9:32 pm
Благодарил (а): 0
Поблагодарили: 5 раз

Re: Дизайн интерфейса

Сообщение binladin » Пт мар 21, 2014 8:12 pm

Alex писал(а): 2. Зелёный и красный табы непонятно откуда (не из css) получают стиль, который их зачем то растягивает. Из css эта гадость не перекрывается.
На монотонном светлом фоне, два цветных пятна это благо, с точки зрения дизайна интерьера, такие акцентные пятна :lol: Только синхронизировать их с цветом обоев на стенах и будет полный фэншуй ;)
Alex
Сообщения: 2357
Зарегистрирован: Пт апр 20, 2012 12:53 pm
Благодарил (а): 42 раза
Поблагодарили: 262 раза

Re: Дизайн интерфейса

Сообщение Alex » Пт мар 21, 2014 10:44 pm

lavstudia, все вопросы по табам снимаются, всё работает, спасибо за помощь!
Alex
Сообщения: 2357
Зарегистрирован: Пт апр 20, 2012 12:53 pm
Благодарил (а): 42 раза
Поблагодарили: 262 раза

Re: Дизайн интерфейса

Сообщение Alex » Сб мар 22, 2014 10:24 pm

Концепт дизайна

Фишка в том, что у вас всегда перед глазами актуальная информация в реальном времени (шапка). «Интеллект» умного дома может по своему желанию переключать наборы информеров на актуальные с его точки зрения или проблемные. Инцидент исчерпан — автоматически переключится на выбранный вами набор или на выбранный им набор (в зависимости от настроек).

В этой же области может вести с вами диалог. Он вам сообщение или картинку — вы ему команду. Текстовую или мышкой. Интер-фейс, так сказать. (Ведь дом то _умный_, не забыли?)

Нижняя (белая) часть окна предназначена для «вдумчивой» работы. Выбираете категорию и вся информация, разбитая на подкатегории, как на ладони.

Количество вкладок теперь не ограничено — они выстраиваются в одну строку и прокручиваются.
Вложения
d.png
d.png (114.07 КБ) 11190 просмотров
Аватара пользователя
adzam
Сообщения: 602
Зарегистрирован: Сб дек 08, 2012 10:28 pm
Откуда: Кишинев
Благодарил (а): 20 раз
Поблагодарили: 138 раз

Re: Дизайн интерфейса

Сообщение adzam » Вс мар 23, 2014 8:11 am

Очень красиво ,логично и УМНО , ведь дом то УМНЫЙ!!
Ждем кодов.....
Мои проекты здесь...https://connect.smartliving.ru/profile/41/blog213.htm
Если вам помогло какое-либо мое сообщение - не ленитесь пользоваться кнопкой СПАСИБО.
arturmon
Сообщения: 155
Зарегистрирован: Сб июл 07, 2012 11:42 pm
Благодарил (а): 3 раза
Поблагодарили: 3 раза

Re: Дизайн интерфейса

Сообщение arturmon » Пн мар 24, 2014 7:51 am

adzam писал(а):Очень красиво ,логично и УМНО , ведь дом то УМНЫЙ!!
Ждем кодов.....
+1 Ждем кодов ;)
Alex
Сообщения: 2357
Зарегистрирован: Пт апр 20, 2012 12:53 pm
Благодарил (а): 42 раза
Поблагодарили: 262 раза

Re: Дизайн интерфейса

Сообщение Alex » Пт мар 28, 2014 5:41 pm

Вести из лабораторий. :)
Вложения
des.png
des.png (95.66 КБ) 10901 просмотр
За это сообщение автора Alex поблагодарил:
Anton (Пн янв 11, 2016 5:05 pm)
Рейтинг: 1.16%
Ответить