Немного фона:
Я разрабатываю трекер для своей компании, к которому у каждого представителя будет доступ, чтобы помочь отслеживать ежедневную статистику, такую как звонки, время, потраченное после телефонного звонка, прежде чем снова быть доступным, доход и различные продажи, которые мы должны сделать. Каждый день состоит из четырех "туров" или контрольных точек в течение дня регистрации статистики. На этом этапе я завершил часть представительского трекера, но у меня возникли проблемы с отображением данных от каждого представителя на странице просмотра менеджера. Я думаю, что я хотел бы сделать четыре вкладки для представления каждого тура, а пятый - для просмотра итогов. Как я могу построить таблицу, подобную этой, используя собственный JavaScript, CSS и HTML? Ближе всего я чувствую, что я пришел к решению, чтобы использовать <iframe></iframe>
и отображать четыре отдельные страницы PHP внутри, но я также думаю, что это может быть безвкусным и неудобным.
Я начал с этого некоторое время назад; он дает представление о том, что я хочу сделать, хотя в этом примере есть только четыре вкладки.
Я сделал ручку для этого без Javascript в современных браузерах.
Я использую радио и метки для отображения разных таблиц. Он использует SASS, Haml и Bootstrap для базового стиля, но вы можете просмотреть скомпилированные HTML и CSS, нажав "(Haml)" и "(SCSS)",
http://codepen.io/jakealbaugh/pen/qsryx/
Здесь скучная скрипка скомпилированного CSS и HTML: http://jsfiddle.net/aHjnY/2/
<div class="container">
<!-- hidden radios. first is checked -->
<input checked='true' id='radio-1' name='tables' type='radio'>
<!-- more unchecked inputs for each table here -->
<!-- id='radio-1' becomes id='radio-2' and so on -->
<!-- button group for labels -->
<div class='btn-group'>
<label for='radio-1'>
Table 1
</label>
<!-- other labels for each input here -->
<!-- for='radio-1' becomes for='radio-2' and so on -->
</div>
<div class='table-container' id='radio-1-table'>
<table>
<!-- table content -->
</table>
</div>
<!-- more table containers here -->
<!-- id='radio-1-table' becomes id='radio-2-table' and so on -->
</div> <!-- close main container -->
.container {
position: relative;
}
.table-container {
opacity: 0;
position: absolute;
right: 2%;
left: 2%;
}
input[type="radio"] {
/* hiding all radios */
display: none;
}
/* do the following for each radio/table/label */
input[type="radio"]#radio-1:checked ~ #radio-1-table {
/* showing the right table when radio is checked */
opacity: 1;
transition: opacity 500ms ease-in-out;
}
input[type="radio"]#radio-1:checked ~ .btn-group > label[for="radio-1"] {
/* styling current label */
color: #333;
background-color: #ebebeb;
border-color: #adadad;
}
/* keep going for each radio and table */
а. Используйте вкладки jquery. Отлично подходит для вашего дела. б. Если вы не хотите вставлять jquery в jquery, используйте логику jquery: для каждой вкладки и отображения javascript/скрыть их содержимое. Вы можете сделать это со всем кодом в одной программе (не рекомендуется, но возможно), или использовать ajax-вызовы и разные программы. Для записи: перед временем ajax я использовал успех iframe для каждой страницы. Теперь звучит неловко, но было время, когда это было правильное решение.