Как делать просматривать меню, который становился отвечающим современным требованиям бы с единственного файла?

Я хотел бы способствовать тому, чтобы мой просматривать меню смог становиться отвечающим современным требованиям с единственного файла.
Я объясняюсь: В моем Вебе у меня есть общее меню, это меню эта в файле, который называется nav.html каждый раз, когда я добавляю новую секцию к моему Вебу, только я должен направляться к этому файлу nav.html и там помещаю мою новую секцию. Это предотвращает меня хождения в каждую закладку Веба и одна помещает из-за одной новую секцию. Я хочу сделать то же самое, но с просматривать меню, который у меня есть. Если кто-то мог говорить мне, как способствовать тому, чтобы эта секция desplegable смогла обновлять с одной единственный файл, было бы гениальным. Он был бы единственным файлом, где я поместил бы каждую новую секцию.

Я помещаю то, что я использую сейчас:

<SCRIPT LANGUAGE="JavaScript">
    function salta(Sel)
    {
        if (Sel.ad.selectedIndex != 0)
        {
            document.location=Sel.ad.options[Sel.ad.selectedIndex].value
        }
    }
</SCRIPT>
<div>
    <form>
        <select name="ad" onchange="salta(this.form)">
            <option selected>Artículos:
            <option value=“articulo1.html”>ejemplo 1
            <option value="articulo2.html”>Ejemplo 2
        </select>
    </form>
</div>

То, что я хочу, состоит в том, чтобы иметь в каком-то месте файл, который я был бы легко actualizable. Если я добавляю статьи к моему desplegable, и сейчас уже у меня есть 8 статей, каждый раз, когда я помещаю новый файл, я оказываюсь обязанным открывать 8 статей, которые являются 8 файлами html различные. Когда у него будут 25, будешь являться жестянкой открывать все один из-за одного. Я думаю, что лучшим должен быть файл html или javascript, где было мое меню editable.

7
задан 26.07.2017, 08:40
2 ответа

Я вместо того, чтобы делать документ HTML, предлагаю тебе делать один script, который верит в desplegable, и я ввел это тебе, где ты хочешь. Немного такой как это: Такие

// deplegable.js
class miDesplegable {
  constructor({
    target = 'body', 
    opciones = [], 
    listener = new Function(), 
    nombre = ''} = {}) {

      this.target = $(target);
      this.form = $('<form/>');
      this.element = $('<select/>');
      this.element.attr('name', nombre);
      this.opcion_no_seleccionable = $('<option disabled selected>Otros artículos</option>');
      this.element.append(this.opcion_no_seleccionable);
      this.form.append(this.element);
    
      opciones.map(e=>{
        var opcion = $(`<option value="${e.value}">${e.titulo}</option>`);
        this.element.append(opcion);
      });

      this.listener = typeof listener === 'function' ? listener : new Function();
        
      this.element.on('change', this.listener.bind(null, this.element.get(0)));
    
      this.target.append(this.form);
  }
}
/*
----------------------------------------------------
Esto lo puedes poner dentro de un archivo "main.js" 
y llamarlo en los documentos HTML que necesites el 
desplegable.
----------------------------------------------------
*/
var listener = function(e){
  console.log(e.options[e.selectedIndex].value);
  // Aquí es donde abres la página, hay varias formas.

 //window.location.replace(e.options[e.selectedIndex].value);
 // window.location = e.options[e.selectedIndex].value;
 // window.open(e.options[e.selectedIndex].value); // Este abre en una pestaña nueva.
}

var desp = new miDesplegable({
  target : '#miDiv',
  opciones : [{
    titulo : 'UNO',
    value : '1'
  },{
    titulo : 'DOS',
    value : '2'
  },{
    titulo : 'TRES',
    value : '3'
  }],
  listener : listener
});

$('.animales').each((i, el)=>
  new miDesplegable({
    target : el,
    opciones : [{
      titulo : 'Perro',
      value : '1'
    },{
      titulo : 'Gato',
      value : '2'
    },{
      titulo : 'Loro',
      value : '3'
    }],
    listener : listener
  })
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- página_1.html -->
<p>Página 1</p>
<div id="miDiv"></div>

<!-- página_2.html -->
<p>Página 2</p>
<div class="animales"></div>
<div class="animales"></div>
<div class="animales"></div>

Как какие-то из этих вещей не функционируют в каких-то мореходах, ты можешь превращать этот cГіdigo в ES5 с aquГ - Babeljs.io

4
ответ дан 24.11.2019, 13:56
  • 1
    Tendr и # 225; s, что расположения в порядке твоих scripts каждого desplegable индивидуально или в файле (как ты предпочел) и в и # 241; adir divs, где ты хочешь desplegable. Я издал ответ. –  Jose Hermosilla Rodrigo 04.07.2016, 02:39
  • 2
    Ах и # 237; это у тебя есть! Итак, если не est и # 225; s привыкший к языку сценариев JavaScript, обязанности и # 237; схвати идти familiariz и # 225; ndote, хотя он будет понемногу, итак, в моем ответе есть c и # 243; я говорю, что он не f и # 225; cil интерпретирования сначала и используются какая-то функциональность новых спецификаций, вещи, которую нужно быть должным, и # 237; схвати изучать имея основание. Я жду, что я c и # 243; я говорю, что я воодушевил тебя пробовать давать ему возможность! =) –  Jose Hermosilla Rodrigo 05.07.2016, 02:04
  • 3
    Я vendr и # 237; когда добро знает, как способствовать тому, чтобы видели формы, предопределенной в desplegable t и # 237; tulo: " Другие art и # 237; зады: и quot;. –  Marc Lemien 05.07.2016, 10:39
  • 4
    С tag optgroup –  Jose Hermosilla Rodrigo 05.07.2016, 13:21
  • 5
    Сейчас, если @JoseHermosillaRodrigo спасибо!!! –  Marc Lemien 06.07.2016, 08:45

Я оставляю тебе пару альтернатив, основанных на том, что ты говоришь в нижних комментариях. Две похожие, состоят в имении HTML в файле desplegable.html и тогда загружать Ваш контент используя язык сценариев JavaScript (чтобы упрощать использование jQuery и метод load() но он мог бы делаться с чистым языком сценариев JavaScript и вызовом AJAX).

Общий в две альтернативы

Где ты хочешь, чтобы пошел список desplegable, помести один div он опустошил с id "desplegable" (из-за того, что поместил пример) таким образом:

<div id="desplegable"></div>

Тогда, после того, как он был загружен jQuery ты можешь грузить desplegable.html с методом похвалите следующего способа:

<script>
$("#desplegable").load("desplegable.html");
</script>

И это загрузит контент desplegable.html в элементе с id "desplegable".

Альтернатива 1: HTML + язык сценариев JavaScript

Если у тебя есть файл с кодом язык сценариев JavaScript, добавь функцию, которая была бы для redireccionar страница:

function salta(enlace) {
    if (enlace != "")
        document.location = enlace;
}

И твой файл desplegable.html был бы чем-то как это:

<select onchange="salta(this.value)">
    <option value="">Elige un artículo</option>
    <option value="articulo1.html">Artículo 1</option>
    <option value="articulo2.html">Artículo 2</option>
    <option value="articulo3.html">Artículo 3</option>
    <option value="articulo4.html">Artículo 4</option>
</select>

Альтернатива 2: HTML + CSS

В этой альтернативе ты не нуждаешься в том, чтобы иметь функцию язык сценариев JavaScript в твоем коде (кроме загружать страницу AJAX), потому что все будет сделано HTML и CSS. Контент desplegable.html мог бы быть чем-то как это (я делаю это выполнимым для того, чтобы ты увидел, что он симулирует список desplegable):

<ul id="desplegable">
	<li>Elige un artículo</li>
	<li><a href="articulo1.html">Artículo 1</a></li>
	<li><a href="articulo2.html">Artículo 2</a></li>
	<li><a href="articulo3.html">Artículo 3</a></li>
	<li><a href="articulo4.html">Artículo 4</a></li>
</ul>
<style type="text/css">
ul#desplegable {
	list-style:none;
	margin:0;
	padding:0;
	width:200px;
	height:25px;
	overflow:visible;
}
ul#desplegable li {
	display:none;
	height:25px;
	line-height:25px;
	position:relative;
	z-index:9;
	background:white;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
}
ul#desplegable li:nth-child(1) {
	display:block;
	border:1px solid #ccc;
}
ul#desplegable li:nth-child(1):after {
	content:"+";
	float:right;
	margin-right:7px;
}
ul#desplegable:hover li {
	display:block;
}
ul#desplegable li:last-child {
	border-bottom:1px solid #ccc;
}
ul#desplegable li a {
	display:block;
}
ul#desplegable li a:hover {
	background:#f0f0f0;
}
</style>

И как это ссылки уже ты не нуждался бы ни в каком коде дополнительный язык сценариев JavaScript. В самом деле, мог бы добавлять CSS в твой собственный файл CSS и ты способствовал бы тому, чтобы просматривать меню был загружен быстрее. Только ты был бы должен настраивать это.

3
ответ дан 24.11.2019, 13:56
  • 1
    men и # 250; в моем Вебе я функционирует верно habr и # 233; скопированный плохо aqu и # 237; и поэтому ты не видишь, что я функционировал хорошо. Но я ничего не спрашиваю на функционировании desplegable. Вопрос имеет в виду строить другой тип navegaci и # 243; n из-за которой мочь обновлять men и # 250; каждый раз, когда есть новый файл с одного и #250; nico место, не будучи должен копировать desplegable в каждом secci и # 243; n/pesta и # 241; в Веб. –  Marc Lemien 03.07.2016, 10:00
  • 2
    @MarcLemien Ok, я понимаю. Пара вопросов: и #191; C и # 243; mo ты хочешь, чтобы был виден конечный результат? и #191; ты хочешь, что men и # 250; произведитесь начиная со списка desplegable или ты можешь менять прямо HTML внутри? (быть и # 237; в м и # 225; s c и # 243; способ делать один ul и в и # 241; adir CSS без необходимости JS, adem и # 225; s ты позволять и # 237; чтобы укрывать уровни, если бы он был необходим) –  Alvaro Montoro♦ 03.07.2016, 15:40
  • 3
    То, что я хочу, он состоит в том, чтобы иметь в alg и # 250; n место файл, который я был бы f и # 225; cilmente actualizable. Если я иду в и # 241; adiendo art и # 237; зады, и сейчас уже я имею 8 по отношению к моему desplegable art и # 237; зады каждый раз, когда я помещаю новый файл, я оказываюсь обязанным открывать 8 art и # 237; зады, которые являются 8 файлами html различные. Когда у него будут 25, будешь являться 1 жестянкой. Я думаю, что лучшее должно состоять в том, чтобы иметь файл html где est и # 233; мое меню, которое я в этот файл ему может помещать каждый раз новый art и # 237; зад. И что это осталось отраженным в каждом pesta и # 241; куда есть art и # 237; зады. Если есть 25 файлов html в этих 25 файлах быть должным и # 237; an появляться каждый раз новый art и # 237; зад. –  Marc Lemien 03.07.2016, 19:36
  • 4
    #191; Из-за qu и # 233; у тебя есть art и # 237; зады в 8 файлах html различные? Мне кажется, что проблема - м и # 225; s c и # 243; mo ты считаешь структурированным веб сайт, что c и # 243; mo делать men и # 250;. Как ты это объясняешь, я не понимаю из-за qu и # 233; у тебя нет базы данных, которая содержала бы art и # 237; зады и производить все .html с одним и #250; nico файл на сервере (и равный для men и # 250; s и desplegables) –  Alvaro Montoro♦ 03.07.2016, 19:54
  • 5
    Я сделал Веб туз и # 237;. Проблема нет ни одного, меня в порядке эксперт и # 237; Веб, у меня есть маршруты, которые способствуют кафедральному собору. То, что я хочу сделать, который может делаться и это и #250; nico, что искал, как. Я не хочу базы данных они мне не нравятся ни ни для чего, ни php. Я не буду менять весь Веб на cosita. –  Marc Lemien 03.07.2016, 20:01

Теги

Похожие вопросы