Developer's Notes: How to use expander in html5

Здравствуйте, уважаемые читатели. Сегодня мы рассмотрим разные варианты использования expander-а в вашем ASP.NET приложении, рассмотрев несколько тестовых примеров. Для начала создадим новый проект ASP.NET Web Application и назовем его "ExpanderSample", как показано на рисунке ниже.

Затем указываем проект MVC с предложенных вариантов.

Далее нам необходимо добавить Bootstrap через NuGet Package Manager.

Также ставим себе Twitter Bootstrap, чтобы воспользоваться встроенными возможностями для реализация expander.

После этого заходим в папку Views\Home и открываем файл Index.cshtml.

Затем берем и все удаляем из этого файла и добавляем следующий код:

<span> Expander sample </span>

</div>

</div>

Теперь посмотрим, как это выглядит на экране.

После нажатия на кнопку получим следующий результат:

Внимательный читатель заметит, что наша иконка как была "+", так и осталась. Как вы понимаете, в реальном проекте нам такое использовать не разрешат. Нужно как-то выходить из ситуации. Для этого нам понадобится использовать JavaScript. Сначала мы изменим div .row

<span> Expander sample </span>

</div>

Затем добавим саму функцию selectionPartExpanderClick().

function sectionPartExpanderClick() {

var expander = document.getElementById("expandPartLink");

if (expander.className != 'icon-plus-sign') {

expander.setAttribute('class', 'icon-plus-sign'); // '+'

} else {

expander.setAttribute('class', 'icon-minus-sign'); // '-'

}

</script>

После этого запустим сайт и убедимся, что у нас все работает.

Ниже приведен весь исходный код, если у вас вдруг что-то не сработает.

<span> Expander sample </span>

</div>

</div>

function sectionPartExpanderClick() {

var expander = document.getElementById("expandPartLink");

if (expander.className != 'icon-plus-sign') {

expander.setAttribute('class', 'icon-plus-sign'); // '+'

} else {

expander.setAttribute('class', 'icon-minus-sign'); // '-'

}

</script>

А теперь рассмотрим вариант, который мне нравится больше всего, поскольку для него нужно использовать библиотеку jQuery. Поставить ее можно через NuGet Package Manager, как показано на рисунке ниже.

Наш пример выглядит следующим образом:

.sectionPartExpander {

}

.physicalPartDetails

{

display:none;

background-color:white;

}

</style>

<span> Expander sample </span>

</div>

</div>

$(document).ready(function () {

$(document).on('click', '.row div.sectionPartExpander', function (event) {

event.preventDefault();

var expander = $(this);

var physicalPartDetails = $("#demo");

var physicalPartDetailsOpened = physicalPartDetails.is(":visible");

if (!physicalPartDetailsOpened) {

physicalPartDetails.show();

} else {

physicalPartDetails.hide();

}

var $chevronDown = $(expander).find("i.icon-plus-sign");

var $chevronUp = $(expander).find("i.icon-minus-sign");

$chevronDown.removeClass("icon-plus-sign").addClass("icon-minus-sign");

$chevronUp.removeClass("icon-minus-sign").addClass("icon-plus-sign");

});

</script>

Обратите внимание на наш div #demo. Я убрал в нем стиль collapse, который был, и написал свой. Это сделано для того чтобы продемонстрировать, что такой подход будет работать даже без использования bootstrap. Например, в проекте, в котором я использовал данный подход, Bootstrap не был установлен. Вся основная логика реализована в JS блоке через jQuery синтаксис. Мы подписались на событие click, а затем смотрим, виден ли наш блок #demo; если виден, то мы его прячем, если нет, то показываем. То же самое мы делаем для иконок, которые предназначены для показывания стрелок экспандера. Мне больше нравятся все-таки экспандеры, которые открываются вверх-вниз или вправо-влево, как показано на рисунке ниже.

В раскрытом виде это выглядит вот так:

Исходный код с использованием такого экспандера можно увидеть здесь.

<span> Expander sample </span>

</div>

$(document).ready(function () {

$(document).on('click', '.row div.sectionPartExpander', function (event) {

event.preventDefault();

var expander = $(this);

var physicalPartDetails = $("#demo");

var physicalPartDetailsOpened = physicalPartDetails.is(":visible");

if (!physicalPartDetailsOpened) {

physicalPartDetails.show();

} else {

physicalPartDetails.hide();

}

var $chevronDown = $(expander).find("i.icon-chevron-down");

var $chevronUp = $(expander).find("i.icon-chevron-up");

$chevronDown.removeClass("icon-chevron-down").addClass("icon-chevron-up");

$chevronUp.removeClass("icon-chevron-up").addClass("icon-chevron-down");

});

Правда есть еще более интересный вариант: использовать Bootstrap Glyphicon Components. Как это будет выглядеть, можно посмотреть на примере ниже.

Теперь давайте посмотрим несколько примеров с новыми иконками glyphicon. Подход их использования аналогичный тому, который мы рассмотрели выше.

<span id="plusIconTest" class="glyphicon glyphicon-collapse-down"> Expander sample glyphicon-collapse-down icon as a link: </span>

</div>

</div>

<p>Collapse-down icon: <span class="glyphicon glyphicon-collapse-down"></span></p>

<p>Collapse-up icon: <span class="glyphicon glyphicon-collapse-up"></span></p>

<p>Minus-sign icon: <span class="glyphicon glyphicon-minus-sign"></span></p>

<p>Chevron-right icon: <span class="glyphicon glyphicon-chevron-right"></span></p>

<p>Chevron-left icon: <span class="glyphicon glyphicon-chevron-left"></span></p>

$(document).ready(function () {

$(document).on('click', '.row div.sectionPartExpander', function (event) {

event.preventDefault();

var expander = $(this);

var physicalPartDetails = $("#demo");

var physicalPartDetailsOpened = physicalPartDetails.is(":visible");

if (!physicalPartDetailsOpened) {

physicalPartDetails.show();

} else {

physicalPartDetails.hide();

}

var collapseDown = $(expander).find("span.glyphicon-collapse-down");

var collapseUp = $(expander).find("span.glyphicon-collapse-up");

collapseDown.removeClass("glyphicon-collapse-down").addClass("glyphicon-collapse-up");

collapseUp.removeClass("glyphicon-collapse-up").addClass("glyphicon-collapse-down");

});

</script>

Ну и выглядит это чудо вот так:

Работает, правда, только первый expander, остальные только для того, чтобы вы могли видеть, как это использовать.

Итоги

В этой статье мы рассмотрели самые разнообразные варианты реализации expander в своем HTML-приложении. Мы только не упомянули вариант с использованием плагина для jQuery jquery-expander, примеры использования которого можно посмотреть здесь: demo. Исходники к статье вы можете посмотреть в конце статьи. Надеюсь, данные примеры помогут вам быстрее решить, какой подход вам больше по душе.

Исходники: How to use Expander in HTML.

Developer's Notes

Pages

Thursday, May 21, 2015

How to use expander in html5

No comments:

Post a Comment