<div id="name_of_page">${Content.name}</div> <div id="info_of_page">${Content.info}</div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="Javascript" src="js/jquery-1.5.min.js"></script> <script language="JavaScript" src="js/jquery.tmpl.js"></script> <!----> <script language="JavaScript" src="js/jquery.tmplPlus.min.js"></script> <!----> <script language="JavaScript" src="js/jquery.json-2.2.min.js"></script> <!-- $.toJSON --> <title></title> <style type="text/css"> body { font: 11pt Arial, Helvetica, sans-serif; margin: 0; } h1 { font-size: 36px; margin: 0; color: #fc6; } h2 { margin-top: 0; } #header { padding: 10px; } #sidebar { float: left; border: 1px solid #eee; width: 20%; padding: 5px; margin: 10px 10px 20px 5px; } #sidebar p { margin-left:20px; } #content { margin: 10px 5px 20px 25%; padding: 5px; border: 1px solid #eee; } #footer { background: #eee; padding: 5px; color: #fff; clear: left; } .error { padding:10px; width:80%;background-color:#ff4f4f; } </style> </head> <body> <div id="header"><h1> - .</h1></div> <div id="sidebar"> <h2></h2> <p><a href="#"></a></p> <p><a href="#page/about"> </a></p> <p><a href="#page/contacts"></a></p> <p><a href="#page/somepage"> - </a></p> <p><a href="#user/login"></a></p> </div> <div id="content"> <h2> - </h2> <div id="content_wrap"></div><!-- --> </div> <div id="footer">© 1</div> </body> </html>
var user = {}; /** * hash # **/ function hash() { return document.location.hash.replace('#',''); } function load(u) { console.log('loading page '+ u +':'); $.ajax({ url: "/" + u,// , , //.. - index.php, // , type: "GET", data: "action=pageLoad&url="+u+"", // action=pageLoad - , JSON success: function(msg){// , - , , var arr = $.parseJSON(msg); console.log('success'); if (arr.my) {// , arr.my // user = { a: (arr.my.id)?true:false, id:arr.my.id, login: arr.my.login, site_login: arr.my.site_login, status: arr.my.status } } document.location.hash = u; render(arr, u); console.log("load template"); } }); } function render(data, url) { // , data - , ; url - main/page , user/login $("#content_wrap").show().html('');// html-, $.get("jstemp/"+ url +".html", function(template) {// html - console.log("Template finded at jstemp/"+ url +".html"); $.tmpl(template, { Content: data// tmpl , Content }).appendTo('#content_wrap');// #content_wrap $("#content_wrap").prepend("<script language='JavaScript' src='js/included.js' />");// . }); } $(function(){//, DOM if (hash()) {// var url = hash();// , # . } else { var url = 'main/page';// - } load(url);// . });
<?php if(isset($_GET['action'])&&$_GET['action']=='pageLoad'){ switch($_GET['url']) { case 'page/contacts': $arr = array('name'=>'', 'info'=>' , .'); break; case 'page/about': $arr = array('name'=>' ', 'info'=>' .'); break; case 'page/somepage': $arr = array('name'=>' ', 'info'=>' - '); break; case 'main/page': default: $arr = array('name'=>' ', 'info'=>' '); break; } echo json_encode($arr); } else { ?> Html , . <?php } ?>
Home page
All sorts of information
/** * */ $("a[href^='#']").unbind('click');// , . $("a[href^='#']").click(function(e){// - , href # var url = $("a:hover").attr('href').replace("#",""); if (page_url != url) { if (url) load(url); else load('main/page'); return false; } });
{{if Content.error}}<!-- , --> <div class="error login">${Content.error}</div> {{else}} <form class="form" id="login" action="" method="POST"> <div class="error" style="display:none;" id="message_login"></div><!-- id - message_[id__] --> <table> <tr> <td></td> <td><input name="username[login]" type="text" value="" /></td> </tr> <tr> <td></td> <td><input type="password" name="username[password]" value="" /></td> </tr> <br /> <tr> <td colspan="2"><input value="" style="width: 300px; height: 70px;" type="submit" /></td> </tr> </table> </form> {{/if}}
/** * */ $('form').submit(function() {// var form = $(this); var method = form.attr('method'); // method var id = form.attr('id'); // id $.ajax({ //url: , .. . type: method, data: "ajax=1&"+form.serialize(), // + ajax - , JSON success: function(msg){ var arr = $.parseJSON(msg); if (arr.message) $("#message_"+id).show().html(arr.message);// message( ), . if (arr.go) { // go - , - . if (arr.go == '' || arr.go == '/') arr.go = 'main/page'; page.load(arr.go);// } } }); return false; });
<?php error_reporting(0); session_start(); if(isset($_POST['username'])){// if(!$_SESSION['user']){// $user = $_POST['username']; if($user['login']!='test'){ // test, message echo json_encode(array('message'=>' '.$user['login'].' ')); } else {// $_SESSION['user'] = $user['login']; // . echo json_encode(array('go'=>'/')); } } else {// error echo json_encode(array('error'=>' .')); } } else if(isset($_GET['action'])&&$_GET['action']=='pageLoad'){ switch($_GET['url']) { case 'page/contacts': $arr = array('name'=>'', 'info'=>' , .'); break; case 'page/about': $arr = array('name'=>' ', 'info'=>' .'); break; case 'page/somepage': $arr = array('name'=>' ', 'info'=>' - '); break; case 'main/page': default: $arr = array('name'=>' ', 'info'=>' '); break; } echo json_encode($arr); } else { ?> html <? } ?>
Source: https://habr.com/ru/post/127376/
All Articles