Как разделить страницу и показать вещи под ней?

Question

Я уже достиг этого в своем приложении для iPhone, но я хочу знать, возможно ли это на HTML-странице, возможно, с использованием CSS-эффектов или подобного.

Как вы можете видетьтекущий вид разделен, нижняя часть смещена вниз, а под ним виден другой вид.У меня есть страница, на которой я хотел бы примерить это.Любые идеи, если это возможно, и какие-либо особенности относительно того, как я могу это сделать?Я совершенно новичок в кодировании HTML, поэтому, пожалуйста, будьте спокойны со мной.:)

Заранее спасибо!

Answer 1

здесь обновление, более похожее на iphone

http://jsfiddle.net/mFeyn/1/

он пропустит треугольник в нижней части папки при нажатии и вычислит высоту контейнера при наличии более 4 значков.

Answer 2

Вот пример для начала http://jsfiddle.net/Cquhj/

Несколько вещей, которые можно взять из этой схемы:

1. Элемент middle имеет свойство overflow: hidden; и height: 0px.
2. Значок trigger имеет событие, которое превращает height элемента middle в нужный размер.

Edit:
Мне очень нравятся приведенные ресурсы и ответы, и я бы добавил это в список http://wiki.forum.nokia.com/index.php/Mobile_Design_Pattern:_Accordion_Menu

Answer 3

Вот пример кода, который может дать вам немного больше, если вы планируете эмулировать поведение папки iOS 4 с помощью jQuery.

Вид в основном разбит на строки, и я поигрался с атрибутом css позиции фона, чтобы создать иллюзию разделения фона.

http://jsfiddle.net/hKHWL/

Answer 4

Да, это абсолютно возможно, ничего необычного, и CSS определенно понадобится.

На самом деле, ваш вопрос очень общий и ответ будет таким: изучение HTML и CSS и их комбинации.из двух для создания стандартных совместимых макетов веб-страниц.Возможно, вы захотите прочитать и о блочной модели.Чтобы решить вашу проблему, вам нужно знать об использовании, позиционировании и перемещении серии <div> с для достижения желаемого макета.

Если вы хотите добавить анимацию, например, некоторую часть плавающего разделенного видаВ таком случае вам также понадобится Javascript.

Возможные отправные точки для вашего исследования SO:
Почему бы не использовать таблицы для разметки в HTML?
https://stackoverflow.com/search?q=css+div+column

Answer 5

Я знаю, что это старый пост / вопрос ... но я делаю это с динамическими высотами и позициями здесь:

http://webkit -os.pixelass.com / iframe / (работает только в Chrome и Safari) Я использую jQuery и два div с одним и тем же изображением. Динамическая позиция означает ... вы можете переместить папку в другую позицию или страницу. Динамическая высота означает ... высота относится к числу строк значков в папке.

Папка даже открывается выше и ниже, если содержимое слишком высокое для отображения ниже. (открытие папки из дока пока не работает)

Answer 6

Это очень возможно, но все равно, что спросить: «Я хочу программировать Civilization, и я довольно новичок в C; как мне это сделать?» ; -)

Я бы настоятельно рекомендовал подобрать хорошую книгу "DHTML" (динамический HTML). Например, мне очень понравился этот, из SitePoint: http://www.sitepoint.com/books/dhtml1/

Если вы не любите покупать книги, такие сайты, как SitePoint и AListApart, безусловно, тоже могут что-то объяснить, но не в том формате, в котором они организованы.

Удачи.