Имя: Пароль:
IT
Веб-мастеринг
Сохранение кода с сайта
Ø (Asmody 01.08.2017 10:32)
0 Штурман
 
01.08.17
07:52
Как сохранить локально код по ссылке: http://jsfiddle.net/17779w0q/
?
1 Остап Сулейманович
 
01.08.17
07:55
(0) Гы.
Ctrl-A  Ctrl-C  Блокнот  Ctrl-V
2 Штурман
 
01.08.17
07:56
(1) xD

надо чтобы локально работало в том числе ))
3 Остап Сулейманович
 
01.08.17
07:57
(2) Локально нужен ВЕБ-сервер. И правильно опубликовать html, css и script. И все будет работать
4 Штурман
 
01.08.17
08:01
(3) зачем веб-сервер?

Там код только html, JS и CSS

все локально должно работать без всяких серверов
5 Остап Сулейманович
 
01.08.17
08:02
+ (3) У тебя есть 4-е окошка.
Первое из них - html. Но не полный. Для работы без обвязки сайта нужно дополнить.
Второе - css. В локальный html на него нужно будет добавить линк. Или положить внутрь html в тег <style>.
Третье - скрипт. Аналогично css.

Вот сложи все в кучу и оно вполне себе локально будет работать.
6 Остап Сулейманович
 
01.08.17
08:03
(4) А... точно. ВЕБ-сервер не обязательно.
7 Штурман
 
01.08.17
08:03
(5) так я не знаю как, вот и спрашиваю
8 Pentosh
 
01.08.17
08:19
(7)
<!DOCTYPE html>
<html>
<head>
  <style>
   .ui-menu {
     width: 250px;
   }
  </style>
</head>
<body>

  <ul id="menu">
  </ul>

  <script>
   //сюда вставить то что в окне js написано
  </script>

</body>
</html>

открываем блокнот, копируем это туда, сохраняем с расширением .html, профит

P.S. Или не о том вопрос?
9 Pentosh
 
01.08.17
08:20
(8) + еще нужно jQuery подключить и повесить код js на событие onload (но это не обязательно, наверное)
10 Штурман
 
01.08.17
08:23
(8) вставил, отрыл в браузере - что-то не работает

код:

<html>
<head>
  <style>
   .ui-menu {
     width: 250px;
   }
  </style>
</head>
<body>

  <ul id="menu">
  </ul>

  <script>
   $(function() {

  var data = {
    menu: [{
      name: 'Croatia',
      link: '0',
      sub: null
    }, {
      name: 'England',
      link: '1',
      sub: [{
        name: 'Arsenal',
        link: '0-0',
        sub: null
      }, {
        name: 'Liverpool',
        link: '0-1',
        sub: null
      }, {
        name: 'Manchester United',
        link: '0-2',
        sub: null
      }]
    }, {
      name: 'Germany',
      link: '3',
      sub: [{
        name: 'Bayern Munich',
        link: '3-1',
        sub: null
      }, {
        name: 'Borrusia Dortmund',
        link: '3-2',
        sub: null
      }]
    }]
  };
  var getMenuItem = function(itemData) {
    var item = $("<li>")
      .append(
        $("<a>", {
          href: '#' + itemData.link,
          html: itemData.name
        }));
    if (itemData.sub) {
      var subList = $("<ul>");
      $.each(itemData.sub, function() {
        subList.append(getMenuItem(this));
      });
      item.append(subList);
    }
    return item;
  };

  var $menu = $("#menu");
  $.each(data.menu, function() {
    $menu.append(
      getMenuItem(this)
    );
  });
  $menu.menu();
});

  </script>

</body>
</html>
11 Pentosh
 
01.08.17
08:28
(10) jQuery нужно подключить, в (0) версия 1.9.1, но по сути можно и новую, не сломается.

заходите на сайт jquery и читаете как подключить
можно скачать и подключить локально
можно через ссылку (cdn)
12 Джо-джо
 
01.08.17
08:30
Денвер, не?
13 Штурман
 
01.08.17
08:36
(11) Подключил таким кодом:
<script type="text/javascript" src="js/jquery-1.9.1.min.js">

как советуют тут: http://hi-blog.ru/web/jquery/podklyuchaem-biblioteku-jquery-k-vashemu-sajta/

опять не работает
14 Pentosh
 
01.08.17
08:37
(13) а у вас есть папка js рядом с созданным файлом html и в ней файлик jquery-1.9.1.min.js
15 Pentosh
 
01.08.17
08:40
т.е. вам нужно либо скачать jQuery либо подключить по ссылке (см. статью которую читали, ниже, после заголовка "Как подключить библиотеку jQuery с внешних источников")
16 Штурман
 
01.08.17
08:49
(15) хм, написал так:
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js">;

тоже не работает (
17 Остап Сулейманович
 
01.08.17
08:50
Подключить JQuery просто
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>;
18 Остап Сулейманович
 
01.08.17
08:52
Вот как подключить скрипт - я не знаю.
Классика выглядит так :

<ul id="menu" style="width:250px" onload="DoMenu()">

Как в ява подключаются анонимные функции - нужно почитать. Или переписать скрипт на классический вызов.
19 Штурман
 
01.08.17
08:55
(18) короче видимо все-таки бардак с этим скриптом с того сайта

Может кто скинет самую простую менюшку на яве с использованием JSON?

что-то в инете нормального примера для чайников нет
20 Pentosh
 
01.08.17
08:55
(16) у вас sctipt не закрыт, да и ссылка дает ответ 404
сделайте как в (17), должно работать (только в head нужно, т.е. <head> текстИз(17)</head>)

(18) не, там такое не нужно, конструкция $(function()) начнет работу сама по готовности документа
21 Остап Сулейманович
 
01.08.17
08:56
Вот так вот :
//***************
<html>
<title>Тут заголовок</title>
<!--
подключим jquery. Правда не локально. Для "локально" скачать и правильно прописать путь
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>;
<body>
<ul id="menu" style="width:250px" onload="DoMenu()">
</ul>
</body>
<script>
    $(function () {

        var data = {
            menu: [{
                name: 'Croatia',
                link: '0',
                sub: null
            }, {
                name: 'England',
                link: '1',
                sub: [{
                    name: 'Arsenal',
                    link: '0-0',
                    sub: null
                }, {
                    name: 'Liverpool',
                    link: '0-1',
                    sub: null
                }, {
                    name: 'Manchester United',
                    link: '0-2',
                    sub: null
                }]
            }, {
                name: 'Germany',
                link: '3',
                sub: [{
                    name: 'Bayern Munich',
                    link: '3-1',
                    sub: null
                }, {
                    name: 'Borrusia Dortmund',
                    link: '3-2',
                    sub: null
                }]
            }]
        };
        var getMenuItem = function (itemData) {
            var item = $("<li>")
                .append(
                $("<a>", {
                    href: '#' + itemData.link,
                    html: itemData.name
                }));
            if (itemData.sub) {
                var subList = $("<ul>");
                $.each(itemData.sub, function () {
                    subList.append(getMenuItem(this));
                });
                item.append(subList);
            }
            return item;
        };

        var $menu = $("#menu");
        $.each(data.menu, function () {
            $menu.append(
                getMenuItem(this)
            );
        });
        $menu.menu();
    });
</script>
<html>
******************

меню прорисовывается (скрипт онлоад отрабатывает). Нет определения онклик.
22 Pentosh
 
01.08.17
08:57
(19) разбирайтесь иначе ничему не научитесь, тем более что ответ уже дан
23 Штурман
 
01.08.17
08:58
(21) заработало, но выводит лишь ссылки

•Croatia
•England?Arsenal
?Liverpool
?Manchester United

•Germany?Bayern Munich
?Borrusia Dortmund


а само выпадающего меню нет
24 Штурман
 
01.08.17
08:59
(20) скрипт закрыт, между ним код
а 404 нету - http://code.jquery.com/jquery-2.1.3.min.js
25 Штурман
 
01.08.17
08:59
(22) а чего почитать и где разобраться в этом чайнику?
26 Остап Сулейманович
 
01.08.17
09:06
На вот пример : https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_navbar_dropdown2
Правда на голом css.

ЗЫ. А куда ты там собрался JSON приспособить?
27 Pentosh
 
01.08.17
09:08
(23) +1, тоже нет такого эффекта как в примере из (0).
по сути, не удивительно, ведь маловато кода для такой минюхи (по идее css нужно еще, или хотябы события при наведении мышки на пункт меню), с другой стороны мб это jquery понимает что так построить нужно, но не уверен.
Откуда пример взяли, или сами наваяли?

Не знаю что почитать, сам еще чайник)
28 Штурман
 
01.08.17
09:10
(26) у меня задача - сделать меню, используя JSON

в общем без разницы какое, главное чтобы JSON было и кнопки большие
29 Остап Сулейманович
 
01.08.17
09:13
(27) Я так понимаю, что где-то в недрах jquery все есть. Нужно только правильно класс для менюхи задать. А для этого нужен правильный css. Что такое "правильный" и где его взять - нужно спрашивать у спецов по jquery.
Пример сам накидал. Но jquery не знаю. Да в (0) и вопрос так не стоял. Там спросили как сохранить код. Что собственно вот.
30 Pentosh
 
01.08.17
09:18
(28) ну и гуглите как сделать
запросы в гугол:
1) Как распарсить Json js
2) Как сделать выпадающее меню js css

по сути все сводиться к тому, что нужно построить


(29) я вкурил почему строит именно так, там не только jquery подключен, а jquery UI, по этому он такую менюху и рисует

Автор, читайте документацию библиотеки jquery UI, возможно найдете что нужно
31 Штурман
 
01.08.17
09:23
(30) а можно без всяких JQuery и прочих библиотек, просто сделать обычную менюшку на JSON и HTML?
32 Остап Сулейманович
 
01.08.17
09:26
(28) Коротко и на буржуинском :
1. Работа с JSON https://www.w3schools.com/js/js_json.asp (преобразование JSON в объекты JAVA)
2. Вывод в документ https://www.w3schools.com/js/js_output.asp
33 Pentosh
 
01.08.17
09:27
(31) можно, гуглите как, пример вам в (26) дали, а сами элементы страницы создавайте таким же макаром как в (0), но используя только нативный JS (гуглите как создавать элементы в DOM документе и вкладывать их в родительские элементы)
34 Остап Сулейманович
 
01.08.17
09:28
(31) Статику - можно. Выпадающие блоки - как минимум нужно добавить css. Голый html этого не умеет.
35 Pentosh
 
01.08.17
09:28
(33) нативный* = ванильный
36 Штурман
 
01.08.17
09:30
(34) а просто статику без выпадающих блоков, чтобы обычные прямоугольники были вокруг названия меню на чем примерно делают?
37 Остап Сулейманович
 
01.08.17
09:34
(36) на css. Но ноги растут от тега style.
Просто style нужно прописывать каждый раз, а с помощью css в html просто указать нужный селектор или комбинацию.
https://www.w3schools.com/css/css_howto.asp
38 Остап Сулейманович
 
01.08.17
09:36
+ (37) Для ленивых (или уже познавших дзен) существуют куча фреймворков.
39 Filin
 
01.08.17
10:21
(0) Ну я бы посмотрел в инструментах разработчика содержимое iframe "result"- по идее там вся твоя страница со всеми зависимостями.
40 Filin
 
01.08.17
10:24
(39) + Вот твоя страница отдельно - сохраняй - http://fiddle.jshell.net/17779w0q/show/
41 Вафель
 
01.08.17
10:30
(0) Нужно жи-куери-уи отдельно сохранить. тогда будет работать
42 Asmody
 
модератор
01.08.17
10:32
google://html+css+javascript+для+идиотов

тема не отражает суть сообщения