|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
29.12.2011, 01:49 | #1 |
Форумчанин
Регистрация: 10.02.2009
Сообщений: 815
|
[HTML+CSS] "Нарезать" win-подобную форму
Доброго времени суток!
Встречал не раз подобный функционал и красоту (см. вложение). Теперь когда нужно сделать красивый и удобный веб интерфейс своей программе - решил сделать нечто подобное. Интересует общий метод "построения" таких элементов (не считая js обработки событий и прочего) как это делается? div-ами или здоровенной табличкой с идеально состыкованными кусками, настройкой фона ячеек/растягиваением изображений? (имеется ввиду всё кроме содержимого "формы"). Предполагаю что создание javascript функционала не будет большой проблемой (нужен минимум: перемещение и сворачивание). скрин с http://prime.fmsoft.net/demo/ucdemo.dll -> forms (не сочтите за рекламу) P.S. я вижу это так P.P.S. Chrome Developer Tools показывает около полумилиарда вложенных div'ов >_<, правда этот продукт имеет много возможностей, а я планирую сделать конкретный и окончательный вид. Спасибо за отзывы! Последний раз редактировалось Lime; 29.12.2011 в 02:13. |
29.12.2011, 11:45 | #2 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Не существует "правильного" метода построения таких окон.
Я лично раньше делал через jQuery - UI, последнее время пишу свои под определенную задачу (проще свои стили делать, чем подпиливать стандартные) на дивах. Обычная структура: окно, внутри: заголовок, контент, управляющие кнопки, 8 дивов для ресайза.
Alar, верни репу!
|
29.12.2011, 19:17 | #3 |
Форумчанин
Регистрация: 10.02.2009
Сообщений: 815
|
Даже если не передёргивать в очередной раз стиль Aero (это вроде он) то всёравно я вижу окно именно windows подобным, тоесть заголовок, 3 управляющих, контент, края и углы для ресайза.
Постараюсь воспроизвести и продолжу тему. Пытаюсь реверсить пример с http://jqueryui.com/demos/dialog/#default там div'ы для ресайзов пустые и те которые по сторонам перекрывают z-index'ом друг друга, а их в свою очередь перекрывают "угловые" div'ы. Потерь в дизайне нет - они невидимые/прозрачные. А я хочу сделать чтобы эти области кроме функционала содержали часть дизайна - фон в виде куска формы из темы aero. я так понял что достаточно будет расчленить форму на отрезки как тут: То есть 4 угловых (с закруглениями) и 4ре повторяющихся со строн прямоугольной формы (левый правый нижний и "заголовок") т.к. их можно сделать png картинками с полупрозрачностью. А управляющие кнопочки можно будет вставить поверх absolut'ным div'ом) p.s. а там как-то умудряются использовать вот такое желтый z-index 100,зелёный 101, красный 102 если сделать аналогично с управляющими то получится такое неприятное наложение: Последний раз редактировалось Lime; 29.12.2011 в 21:07. |
29.12.2011, 21:47 | #4 |
Форумчанин
Регистрация: 10.02.2009
Сообщений: 815
|
Вспомнил о отрицательных значениях при указании позиций
http://limesoft.narod.ru/mw.htm оцените пожэалуйста, и тут-же вопрос, почему не видно рамки основного? вроде Код:
|
30.12.2011, 09:23 | #5 | |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Цитата:
Только вот не вижу смысла рубить дизайн: все нормальные браузеры поддерживают css3, для ие до 9ки можно юзануть pie, ибо в данном случае нет смысла делать разработку без js. У прозрачных дивов также есть дополнительное преимущество — комфортное изменение размеров кликабельной области независимо от форм дизайна. Можно сделать зону попадания курсора от 16px и убрать из этой области тень. С css3 проще изменять дизайн, да и код грузится намного быстрее, чем тонна картинок, пусть даже и через спрайты. Для отображения будут служить только 4 блока, чем меньше их кол-во, тем выше шанс, что ничего не поедет
Alar, верни репу!
Последний раз редактировалось Naive; 30.12.2011 в 09:26. |
|
01.01.2012, 14:17 | #6 |
Форумчанин
Регистрация: 10.02.2009
Сообщений: 815
|
http://limesoft.narod.ru/win7/win7.htm вот что получилось Пока макет.
Ещё немного помухлевать с прозрачностью надо наверно зы: maximize div просто скрыт. |
02.01.2012, 12:32 | #7 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Красиво получилось=)
п.с. адекватный драг&дроп я делал следующим образом: 1. при зажатии клавиши обнуляется выделение (clearSelection) 2. создается слой во весь экран поверх всего контента, на него вешается 2 события: a. mousemove и b. mouseup 3. return false =) a. mousemove: двигаем блок b. mouseup: уничтожаем верхний слой.
Alar, верни репу!
|
02.01.2012, 12:32 | #8 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
дабл пост, пардон.
Alar, верни репу!
Последний раз редактировалось Naive; 02.01.2012 в 12:56. |
02.01.2012, 13:33 | #9 |
Старожил
Регистрация: 28.01.2009
Сообщений: 21,000
|
перемещение не ахти работает, если резко мышей двинуть.
Хорошо поставленный вопрос это уже половина ответа. | Каков вопрос, таков ответ.
Программа делает то что написал программист, а не то что он хотел. Функции/утилиты ждут в параметрах то что им надо, а не то что вы хотите. |
02.01.2012, 13:53 | #10 | |
Форумчанин
Регистрация: 10.02.2009
Сообщений: 815
|
Понимаю, пока ещё не успел создать соотв. тему в JavaScript разделе.
Цитата:
p.s. мой браузер (Maxthon 3.1.7) помешан на перетаскивании инфы (даже не выделенной мышкой) и в моём примере это очень заметно (на локальной версии даже очистка заголовка не помогла) тогда как в Dem'ке такого нет . В остальных только тестирую. --- P.S. Получилось адекватное перетаскивание, всо всём бли виноваты обработчики событий Код:
В состоянии down курсор всёравно превращается в I Последний раз редактировалось Lime; 02.01.2012 в 14:30. |
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Как можно создать поисковую систему на подобии "GOOGLE"? HTML, CSS | Antoha93 | HTML и CSS | 3 | 22.01.2014 00:53 |
Вывести название соответствующей карты вида "шестерка бубен", "дама червей","туз треф" и т.п. | воваава | Помощь студентам | 3 | 01.12.2011 12:50 |
Как обойти "преобразование типа из "string" в "float" невозможно" | lexluter1988 | Помощь студентам | 1 | 07.08.2010 12:23 |
при вводе на листе "магазин"- код товара появлялось "описание" товара из "склада" с "продажной ценой" | aleksei78 | Microsoft Office Excel | 13 | 25.08.2009 12:04 |