Я использовал компоненты вкладок Semantic UI в одном из моих проектов Codeigniter. Вот настройки.
main_view.php
<div class="ui pointing secondary menu">
<a class="active item" data-tab="tab1">Tab 1</a>
<a class="item" data-tab="tab2">Tab 2</a>
<a class="item" data-tab="tab3">Tab 3</a>
</div>
<div class="ui container">
<div class="ui bottom attached active tab" data-tab="tab1"></div>
<div class="ui bottom attached tab" data-tab="tab2"></div>
<div class="ui bottom attached tab" data-tab="tab3"></div>
</div>
<script type="text/javascript">
$(function() {
$('.ui.menu > .item').tab({
context: 'parent',
auto: true,
history: true,
parseScripts: false,
ignoreFirstLoad: false,
cache: false,
path: baseURL
});
});
</script>
tab1.php / tab2.php / tab3.php
<div class="container">
<?= $data; ?>
</div>
Main_View.php (контроллер)
public function index_get(){
$this->load->view('setting');
}
public function tab1_get(){
$data = 'tab 1';
$this->load->view('tab1', $data);
}
public function tab2_get(){
$data = 'tab 2';
$this->load->view('tab2', $data);
}
public function tab3_get(){
$data = 'tab 3';
$this->load->view('tab3', $data);
}
routes.php
$route['main'] = 'main_view';
$route['main/tab1'] = 'main_view/tab1';
$route['main/tab2'] = 'main_view/tab2';
$route['main/tab3'] = 'main_view/tab3';
Все отлично работает с URL-адресами, как это
http://localhost/main#/tab1
http://localhost/main#/tab2
http://localhost/main#/tab3
Но он просто показывает мне содержимое вкладки (без панели вкладок), когда я пытаюсь удалить хеш в URL. Я также попытался использовать historyType: ‘state’ во вкладке js config, но все еще не работает. Как я могу запретить или перенаправить пользователям доступ только к дочерним страницам?
Задача ещё не решена.
Других решений пока нет …