как воссоздать демонстрацию jQueryUI «Классы оверлеев и теней»

Question

Я пытаюсь воссоздать эффект 'Overlay и Shadow Classes', используемый здесь: http://jqueryui.com/themeroller/ с некоторым трудом.Я хотел бы применить его к одному элементу (только наложить этот элемент, центрировать содержимое на этом элементе и т. Д.), Как они это сделали;и я не могу найти ничего, что бы предположило, что они использовали какую-то функцию jQuery для этогоКажется, они просто использовали классы CSS.Должен ли я узнать все об их классах CSS и использовать их?или там есть быстрое решение jqueryui?

Answer 1

Ну, вы можете добиться эффекта с помощью CSS или JQuery. Но на самом деле это просто несколько простых классов CSS. Он использует очень простую концепцию позиционирования . Контейнер, содержащий ваш элемент, должен иметь relative позиционирование, а элемент внутри будет иметь absolute позиционирование. Когда элемент absolute расположен внутри контейнера relative, top: 0px и left: 0px внутреннего контейнера будут находиться в верхнем левом углу внешнего контейнера. Проверьте эту скрипку для очень простого примера.

Теперь причина, по которой вы можете использовать JQuery в этом случае, заключается в том, что вам нужно выполнить некоторые вычисления. В моей скрипке ширина моего контейнера является некоторой статической величиной, но если этот контейнер динамически изменит свой размер, вам нужно добавить некоторую обработку событий! Удачи.