Отображать веб-страницы в динамических вкладках

Содержание

Вопрос или проблема
Ответ или решение
Проблема и требования
Альтернативные решения
Заключение

Вопрос или проблема

Сайт, с которым я работаю, включает в себя много просмотра отчетов. Требование к дизайну таково, что когда пользователь выбирает открыть другую страницу [из панели навигации]; вместо замены существующей страницы нужно добавить новую динамическую вкладку и отобразить ее в новой вкладке. Это сделано для того, чтобы пользователь мог быстро перемещаться между вкладками и просматривать необходимые отчеты.

Теперь я не говорю об открытии ссылок в новой вкладке браузера, а на той же странице с динамической вкладкой, где пользователь может просто быстро перемещаться между открытыми динамическими вкладками [веб-страницами].

Это ранее было реализовано с помощью Smart GWT Tabs, но теперь мы хотим отказаться от Smart GWT, поэтому ищем более подходящую альтернативу для реализации того же. Вот быстрое изображение, которое я отредактировал, чтобы донести свои мысли. В начале есть одна вкладка [домашняя страница], затем добавляются вкладки, на которые можно переключаться позже по мере нажатия на ссылки. Содержимое веб-страниц, которое необходимо открыть во вкладках, будет в основном состоять из множества вложенных таблиц и содержать достаточно много javascript для выполнения различных других функций с отображаемой информацией.

Динамические вкладки

Каковы мои наилучшие варианты для достижения этого, кроме SmartGWT, или мне следует придерживаться его? Если возможно, пожалуйста, укажите, где я мог бы узнать об этом?

ejTab, который является частью Essential Studio for JavaScript, может создавать динамические вкладки. Простой пример, показывающий это:ссылка

Весь набор контролей доступен бесплатно через программу лицензии для сообщества, если вы соответствуете требованиям. Примечание: Я работаю в Syncfusion.

Я написал что-то подобное несколько лет назад для личного использования.

Моя 🍴 Рецепты страница выглядит так:

которая переключается обратно на стандартный HTML список:

И еще один, Ответы на Quora от Рэя Баттерворта идут на 4 уровня глубже:
Верх -> Религия → Библия → Святцы -> ответы

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

Ответ или решение

Для отображения веб-страниц в динамических вкладках на вашем сайте, где ведется активный просмотр отчетов, потребуется реализовать решение, обеспечивающее возможность переключения между вкладками, не перезагружая всю страницу. Рассмотрим несколько подходов к этой задаче, а также альтернативные библиотеки для реализации функционала вкладок, помимо Smart GWT.

Проблема и требования

Основная цель заключается в том, чтобы при выборе пользователем новой страницы из навигационной панели открывать её в новой динамической вкладке. Это позволит пользователю эффективно переключаться между различными отчетами, не теряя при этом контекст текущего просмотра.

Ключевые элементы, которые следует учесть:

Необходимо, чтобы пользователь мог открывать несколько отчетов, каждый из которых будет отображаться на своей вкладке.
Содержимое вкладок в основном будет состоять из вложенных таблиц и JavaScript для обработки пользовательских действий и динамического отображения данных.

Альтернативные решения

Использование библиотеки jQuery UI Tabs:
- jQuery UI предоставляет компонент вкладок, который можно настроить для динамического добавления новых вкладок. Это позволяет создавать интерфейсы с вкладками с минимальными усилиями.
- Преимущества: Легкость в использовании, большое сообщество и обширная документация.
- Реализация:
```
<div id="tabs">
<ul id="tab-list"></ul>
</div>
```
```
$(function() {
$("#tabs").tabs();

function addTab(title, url) {
 var id = "tab-" + title;
 $("#tab-list").append("<li><a href='#" + id + "'>" + title + "</a></li>");
 $("#tabs").append("<div id='" + id + "'></div>");

 $("#" + id).load(url);
 $("#tabs").tabs("refresh");
}

// Пример добавления вкладки
addTab("Отчет 1", "report1.html");
});
```
Использование библиотеки Syncfusion ejTab:
- Библиотека Syncfusion предлагает компонент ejTab, который поддерживает динамическое создание вкладок. Этот компонент можно интегрировать в проект, используя элементы управления JavaScript.
- Преимущества: Доступ к расширенному функционалу и бесплатная лицензия для квалифицированных пользователей.
- Ссылки:
  - Пример использования ejTab
  - Сообщество Syncfusion

Пользовательская реализация с использованием Vanilla JavaScript:

Если вы хотите избежать зависимостей от сторонних библиотек, можно реализовать динамические вкладки с помощью чистого JavaScript. Это потребует больше времени на разработку, но даст полное понимание работы с DOM.

Пример:

<div class="tabs">
<button class="tablink" onclick="openTab(event, 'Home')">Home</button>
<button class="tablink" onclick="openTab(event, 'Report1')">Report 1</button>
</div>

<div id="Home" class="tabcontent">Home content...</div>
<div id="Report1" class="tabcontent" style="display:none;">Report 1 content...</div>

<script>
function openTab(evt, tabName) {
 var i, tabcontent, tablinks;
 tabcontent = document.getElementsByClassName("tabcontent");
 for (i = 0; i < tabcontent.length; i++) {
   tabcontent[i].style.display = "none";  
 }
 tablinks = document.getElementsByClassName("tablink");
 for (i = 0; i < tablinks.length; i++) {
   tablinks[i].className = tablinks[i].className.replace(" active", "");
 }
 document.getElementById(tabName).style.display = "block";  
 evt.currentTarget.className += " active";
}
</script>

Заключение

Реализация динамических вкладок для отображения отчетов – это важная часть пользовательского интерфейса, которая может значительно улучшить опыт использования вашего веб-приложения. В зависимости от требований проекта и желаемой гибкости в разработке, у вас есть несколько подходящих решений. Рекомендуется рассмотреть использование готовых библиотек, таких как jQuery UI или Syncfusion, если времени на разработку ограничено.

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