Сохранение кода с сайта

Веб-мастеринг

Сохранение кода с сайта
Ø (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>

<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