1
Я новичок в JavaScript, и я создаю проект, который использует аналогичное боковое меню Facebook.Проект JavaScript, как вставить ссылку на другую страницу
В проекте имеются следующие файлы:
- index.html
- menu.html
- option1.html, option2.html и т.д.
В index.html есть кнопка, которая открывает боковое меню. Каждая опция X из меню открывает файл optionX.html, а панель заголовка такая же, включая кнопку MENU и логотип на ней.
Что мне нужно сделать, это создать ссылки и открыть другие файлы из optionX.html сохраняя панель заголовка ..
Это мои файлы:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Demo Menu</title>
</head>
<body>
<div id="menuprincipal">
<div id="wrapperMenu">
<div class="scroller">
<div id="contenidoMenu"></div>
</div>
</div>
</div>
<div id="cuerpo">
<div id="header"><a href="javascript:menu('menu');"><div class="btn">MENU</div></a><img class="logo" src="img/logo.png" /></div>
<div id="wrapper">
<div class="scroller">
<div id="contenidoCuerpo"></div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/fastclick.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
index.js
// Declaraci—n de variables globales
var myScroll, myScrollMenu, cuerpo, menuprincipal, wrapper, estado;
// Guardamos en variables elementos para poder rescatarlos despuŽs sin tener que volver a buscarlos
cuerpo = document.getElementById("cuerpo"),
menuprincipal = document.getElementById("menuprincipal"),
wrapper = document.getElementById("wrapper");
var xhReq = new XMLHttpRequest();
var app = {
// Constructor de la app
initialize: function() {
// Estado inicial mostrando capa cuerpo
estado="cuerpo";
// Creamos el elemento style, lo a–adimos al html y creamos la clase cssClass para aplicarsela al contenedor wrapper
var heightCuerpo=window.innerHeight-46;
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.cssClass { position:absolute; z-index:2; left:0; top:46px; width:100%; height: '+heightCuerpo+'px; overflow:auto;}';
document.getElementsByTagName('head')[0].appendChild(style);
// A–adimos las clases necesarias
cuerpo.className = 'page center';
menuprincipal.className = 'page center';
wrapper.className = 'cssClass';
// Leemos por ajax el archivos opcion1.html de la carpeta opciones
xhReq.open("GET", "opciones/opcion1.html", false);
xhReq.send(null);
document.getElementById("contenidoCuerpo").innerHTML=xhReq.responseText;
// Leemos por ajax el archivos menu.html de la carpeta opciones
xhReq.open("GET", "opciones/menu.html", false);
xhReq.send(null);
document.getElementById("contenidoMenu").innerHTML=xhReq.responseText;
// Creamos los 2 scroll mediante el plugin iscroll, uno para el menœ principal y otro para el cuerpo
myScroll = new iScroll('wrapper', { hideScrollbar: true });
myScrollMenu = new iScroll('wrapperMenu', { hideScrollbar: true });
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
// Ejecutamos la funci—n FastClick, que es la que nos elimina esos 300ms de espera al hacer click
new FastClick(document.body);
},
};
// Funci—n para a–adir clases css a elementos
function addClass(classname, element) {
var cn = element.className;
if(cn.indexOf(classname) != -1) {
return;
}
if(cn != '') {
classname = ' '+classname;
}
element.className = cn+classname;
}
// Funci—n para eliminar clases css a elementos
function removeClass(classname, element) {
var cn = element.className;
var rxp = new RegExp("\\s?\\b"+classname+"\\b", "g");
cn = cn.replace(rxp, '');
element.className = cn;
}
function menu(opcion){
// Si pulsamos en el bot—n de "menu" entramos en el if
if(opcion=="menu"){
if(estado=="cuerpo"){
cuerpo.className = 'page transition right';
estado="menuprincipal";
}else if(estado=="menuprincipal"){
cuerpo.className = 'page transition center';
estado="cuerpo";
}
// Si pulsamos un bot—n del menu principal entramos en el else
}else{
// A–adimos la clase al li presionado
addClass('li-menu-activo' , document.getElementById("ulMenu").getElementsByTagName("li")[opcion]);
// Recogemos mediante ajax el contenido del html segœn la opci—n clickeada en el menu
xhReq.open("GET", "opciones/opcion"+opcion+".html", false);
xhReq.send(null);
document.getElementById("contenidoCuerpo").innerHTML=xhReq.responseText;
// Refrescamos el elemento iscroll segœn el contenido ya a–adido mediante ajax, y hacemos que se desplace al top
myScroll.refresh();
myScroll.scrollTo(0,0);
// A–adimos las clases necesarias para que la capa cuerpo se mueva al centro de nuestra app y muestre el contenido
cuerpo.className = 'page transition center';
estado="cuerpo";
// Quitamos la clase a–adida al li que hemos presionado
setTimeout(function() {
removeClass('li-menu-activo' , document.getElementById("ulMenu").getElementsByTagName("li")[opcion]);
}, 300);
}
}
option1.html
<div class="borde-h1 color1"></div>
<h1>Title for Option 1</h1>
<p align="justify"><strong>Los grandes misterios están más cerca de lo que piensas. </strong><br/><br/>
menu.html
<ul id="ulMenu">
<li>Menu Principal</li>
<li>
<div class="borde-menu color1"></div>
<a href="javascript:menu('1');">
<div class="opcion">Introducción</div>
<div class="descripcion">Los grandes misterios están más cerca de lo que piensas</div>
</a>
</li>
<li>
<div class="borde-menu color2"></div>
<a href="javascript:menu('2');">
<div class="opcion">Ver enclaves por Comunidad </div>
<div class="descripcion">Lista de las comunidades autónomas para seleccionar sus enclaves</div>
</a>
</li>
<li>
<div class="borde-menu color3"></div>
<a href="javascript:menu('3');">
<div class="opcion">Opcion 3</div>
<div class="descripcion">Descripcion opcion</div>
</a>
</li>
<li>
<div class="borde-menu color4"></div>
<a href="javascript:menu('4');">
<div class="opcion">Opcion 4</div>
<div class="descripcion">Descripcion opcion</div>
</a>
</li>
<li>
<div class="borde-menu color5"></div>
<a href="javascript:menu('5');">
<div class="opcion">Opcion 5</div>
<div class="descripcion">Descripcion opcion</div>
</a>
</li>
<li>
<div class="borde-menu color6"></div>
<a href="javascript:menu('6');">
<div class="opcion">Opcion 6</div>
<div class="descripcion">Descripcion opcion</div>
</a>
</li>
<li>
<div class="borde-menu color1"></div>
<a href="javascript:menu('7');">
<div class="opcion">Opcion 7</div>
<div class="descripcion">Descripcion opcion</div>
</a>
</li>
<li>
<div class="borde-menu color2"></div>
<a href="javascript:menu('8');">
<div class="opcion">Opcion 8</div>
<div class="descripcion">Descripcion opcion</div>
</a>
</li>
<li>
<div class="borde-menu color3"></div>
<a href="javascript:menu('9');">
<div class="opcion">Opcion 9</div>
<div class="descripcion">Descripcion opcion</div>
</a>
</li>
<li>
<div class="borde-menu color4"></div>
<a href="javascript:menu('10');">
<div class="opcion">Opcion 10</div>
<div class="descripcion">Descripcion opcion</div>
</a>
</li>
</ul>
Я хочу, чтобы добавить ссылку в option1.html, который должен открыть HTML-файл, но сохраняя навигационную структуру, что означает сохранение строки меню с помощью кнопки меню и логотипа.
Я пробовал с обычным тегом <a href>, но, очевидно, страница не хранит строку меню.
Ну ... вы можете сделать' ' тэгом' HREF = "JavaScript : openfile ('option1.html') ", а затем создайте функцию' openfile'. Он должен выглядеть примерно так: 'location.replace (" http://mywebsite.com/ "+ passInParameter);' – Nathan