Я создал одностраничное приложение.Я использовал ColdFusion 2016, JQuery, JavaScript, HTML5 и Bootstrap 3. Я старался сделать его простым и пока все работает просто отлично.Одна вещь, которую я хотел бы изменить, - это способ загрузки файлов .html в мое приложение.Вот текущий пример кода:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/gif" href="animated_favicon1.gif">
<link rel="stylesheet" href="CSS/Home.css">
<cfif SysAdmin EQ 1><link rel="stylesheet" href="CSS/Admin.css"></cfif>
<!---*** Start: JQuery 3.3.1 version. ***--->
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!---*** End: JQuery 3.3.1 version. ***--->
<!---*** Start: Bootstrap 3.3.7 version files. ***--->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-confirmation/1.0.7/bootstrap-confirmation.min.js"></script>
<!---*** End: Bootstrap 3.3.7 version files. ***--->
</head>
<body>
<div id="main-container" class="container">
<nav class="navbar navbar-custom">
<div class="container-fluid">
<p class="navbar-text"><span class="glyphicon glyphicon-home"></span> <b>Welcome to Example Application!</b></p>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu<span class="caret"></span></a>
<ul id="main-menu" class="dropdown-menu">
<li class="active"><a href="/user-page" data-container="user-container">User</a></li>
<cfif SysAdmin EQ 1><li><a href="/admin-page" data-container="admin-container">Administrator</a></li></cfif>
</ul>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-user"></span>JohnM</a>
</li>
<li>
<a href="#" data-toggle="confirmation" data-popout="true" role="button" id="log_out">
<span class="glyphicon glyphicon-log-in"></span> Logout</a>
</li>
</ul>
</div>
</nav>
<div id="user-container"><cfinclude template="User.html"></div>
<cfif SysAdmin EQ 1><div id="admin-container"><cfinclude template="Admin.html"></div></cfif>
</div>
<cfinclude template="Modal.html">
<script language="javascript" src="JS/Home.js"></script>
<cfif SysAdmin EQ 1><script language="javascript" src="Admin.js"></script></cfif>
</body>
</html>
Тогда вот функция, которая управляет тем, какой контейнер будет отображаться на экране первым и как пользователь может переключаться и показывать другой контейнер:
$("#main-menu li a").on('click', mainMenu);
function mainMenu(e) {
e.preventDefault();
var itemID = $(e.target).attr('data-container');
$(this).parent().addClass('active').siblings().removeClass('active');
$('#main-container > div[id="' + itemID + '"]').show();
$('#main-container > div:not([id="' + itemID + '"])').hide();
}
При загрузке страницы этот код срабатывает:
$(document).ready(function(){
// Trigger on click function on the main menu element.
$('#main-menu').find('a[data-container="user-container"]').trigger('click');
});
Интересно, есть ли лучший способ загрузить .html контейнеры в JQuery?Я прочитал одну статью, где они показали небольшой каркас Sammy.js.Я не уверен, нужно ли мне это использовать или есть другие способы добиться этого.Если кто-нибудь может привести пример, это было бы здорово.Спасибо.