Компонент Javascript для эффекта отражения окна / панели? - PullRequest
0 голосов
/ 09 июля 2010

Я создаю прототип пользовательского интерфейса тонкого клиента, используя extjs, и ищу эффект, который будет имитировать переворачивание формы / панели для отображения другой формы / панели.Это для подробного представления для объекта, который имеет два основных набора свойств.

Я нашел гибкий компонент, который может это делать и даже имитировать четыре разные формы на гранях куба.

Просто более сексуальный, более увлекательный способ сделать то, что вы уже можете сделатьс вкладками.

Ответы [ 2 ]

3 голосов
/ 10 июля 2010

Этот конкретный эффект может быть еще недоступен для разных браузеров. Выполнение преобразований перспективы для данного элемента DOM возможно только двумя известными мне способами:

1) Специфичные для рендерера расширения, такие как -webkit-transform

Webkit.

2) Визуализация элемента DOM внутри элемента Canvas с последующим преобразованием этого элемента

Проблема с # 1 в том, что он явно не будет кросс-браузерным. Проблема с # 2 состоит в том, что вам более или менее нужно написать свой собственный полный рендерер разметки для canvas, чтобы действительно получить все в произвольном элементе DOM.

(OTOH, я бы не стал пытаться превзойти амбициозного и умного ниндзя JavaScript), поэтому, хотя я еще не видел этого, я не был бы полностью удивлен, если бы кто-то еще мог указать на что-то вроде это ...)

1 голос
/ 15 июля 2010

Я бы придерживался решения с вкладками, если вы хотите, чтобы ваш проект был выполнен в разумные сроки. Этого не существует для ExtJS - тот, что во Flex, делает 3D-эффект. Единственное решение - это просто разместить содержимое в 4 ячейках таблицы, которое будет скользить в поле зрения (в соответствии с направлением стрелки, которое вы использовали), внутри DIV, и установить свойство переполнения для скрытия, чтобы вы могли замаскировать другие ячейки и показывают одну ячейку за раз. Затем используйте функции анимации (fx), чтобы перемещать контент в поле зрения и, возможно, с помощью стрелок, на которые вы наводите курсор или нажимаете.

...