Дизайн интерфейса
Модератор: immortal
Re: Дизайн интерфейса
Работа проверена в браузере Google Chrome - писал выше! (на все не хватает времени - кроссбраузерность еще предстоит)
Главные отличия (описывал выше - организация кода, это тоже очень важно)
На картинке выше также показан концепт разрабатываемого шаблона (замена текущему)
Главные отличия (описывал выше - организация кода, это тоже очень важно)
На картинке выше также показан концепт разрабатываемого шаблона (замена текущему)
Re: Дизайн интерфейса
> Тогда вот так
Да, по поведению это то, что нужно. И это можно использовать для своих табов без проблем.
Но как это поведение интегрировать в стандартные табы MajorDoMo? Нужно чтобы так вели себя стандартные табы (вкладки), которые сейчас выстраиваются в 2 (3-4...) ряда.
Да, по поведению это то, что нужно. И это можно использовать для своих табов без проблем.
Но как это поведение интегрировать в стандартные табы MajorDoMo? Нужно чтобы так вели себя стандартные табы (вкладки), которые сейчас выстраиваются в 2 (3-4...) ряда.
Re: Дизайн интерфейса
Очень просто в MDM табы на jQueryUI (можно обнаружить в templates_alt выше выкладывал шаблон) и в моем примере также - просто есть дополнительный скрипт ui.tabs.paging.js и код
$(function($) {
$('#example').tabs(); - есть и в MDM табах
$('#example').tabs('paging', { cycle: true, follow: true } ); - необходимо добавить после
});
вот и все, будут проблемы вечером сам внедрю в выложу в данной теме...
$(function($) {
$('#example').tabs(); - есть и в MDM табах
$('#example').tabs('paging', { cycle: true, follow: true } ); - необходимо добавить после
});
вот и все, будут проблемы вечером сам внедрю в выложу в данной теме...
Re: Дизайн интерфейса
Добавил
$('#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 эта гадость не перекрывается.
$('#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 (3.51 КБ) 11925 просмотров
Re: Дизайн интерфейса
На монотонном светлом фоне, два цветных пятна это благо, с точки зрения дизайна интерьера, такие акцентные пятнаAlex писал(а): 2. Зелёный и красный табы непонятно откуда (не из css) получают стиль, который их зачем то растягивает. Из css эта гадость не перекрывается.
Re: Дизайн интерфейса
lavstudia, все вопросы по табам снимаются, всё работает, спасибо за помощь!
Re: Дизайн интерфейса
Концепт дизайна
Фишка в том, что у вас всегда перед глазами актуальная информация в реальном времени (шапка). «Интеллект» умного дома может по своему желанию переключать наборы информеров на актуальные с его точки зрения или проблемные. Инцидент исчерпан — автоматически переключится на выбранный вами набор или на выбранный им набор (в зависимости от настроек).
В этой же области может вести с вами диалог. Он вам сообщение или картинку — вы ему команду. Текстовую или мышкой. Интер-фейс, так сказать. (Ведь дом то _умный_, не забыли?)
Нижняя (белая) часть окна предназначена для «вдумчивой» работы. Выбираете категорию и вся информация, разбитая на подкатегории, как на ладони.
Количество вкладок теперь не ограничено — они выстраиваются в одну строку и прокручиваются.
Фишка в том, что у вас всегда перед глазами актуальная информация в реальном времени (шапка). «Интеллект» умного дома может по своему желанию переключать наборы информеров на актуальные с его точки зрения или проблемные. Инцидент исчерпан — автоматически переключится на выбранный вами набор или на выбранный им набор (в зависимости от настроек).
В этой же области может вести с вами диалог. Он вам сообщение или картинку — вы ему команду. Текстовую или мышкой. Интер-фейс, так сказать. (Ведь дом то _умный_, не забыли?)
Нижняя (белая) часть окна предназначена для «вдумчивой» работы. Выбираете категорию и вся информация, разбитая на подкатегории, как на ладони.
Количество вкладок теперь не ограничено — они выстраиваются в одну строку и прокручиваются.
- Вложения
-
- d.png (114.07 КБ) 11784 просмотра
Re: Дизайн интерфейса
Очень красиво ,логично и УМНО , ведь дом то УМНЫЙ!!
Ждем кодов.....
Ждем кодов.....
Мои проекты здесь...https://connect.smartliving.ru/profile/41/blog213.htm
Если вам помогло какое-либо мое сообщение - не ленитесь пользоваться кнопкой СПАСИБО.
Если вам помогло какое-либо мое сообщение - не ленитесь пользоваться кнопкой СПАСИБО.
Re: Дизайн интерфейса
+1 Ждем кодовadzam писал(а):Очень красиво ,логично и УМНО , ведь дом то УМНЫЙ!!
Ждем кодов.....