Архив метки: usability

Дизайн: jQuery плагин "Удобная кнопка удаления"

Собрался с силами и таки написал реализацию концепта более юзабельной кнопки удаления.)

Как это выглядит

Как это работает можно посмотреть на отдельной странице плагина. Там же можно скачать исходные коды и минифицированную версию плагина.

Как это устроено

Для начала примем, что кнопка удаления — это ссылка-кнопка с GET-параметрами для удаления какого-либо объекта из базы данных. Ссылка будет что-то типа такой: «http://example.ru/?action=delete&item_id=9000«.

При инициализации старая кнопка удаляется и на её месте с помощью абсолютного позиционирования размещается новая кнопка-ссылка со ссылкой для удаления, указанной в параметрах. Также добавляется скрытый элемент — панель с диалогом подтверждения удаления.

При нажатии на кнопку удаления из-под неё выдвигается панель с диалогом подтверждения удаления. Размещение элементов друг над другом возможно благодаря использованию связки CSS-аттрибутов: у кнопки удаления

position: absolute; z-index: 10

и у панели

position: absolute; z-index: 1