Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem
WebHelp.pl Warsztat Porady Jak zintegrować demo z JSFiddle z własną stroną?

Warsztat / Porady

Jak zintegrować demo z JSFiddle z własną stroną?

Rafał Kukawski 18 lutego 2015 komentarze ()

JSFiddle jest popularnym narzędziem do przygotowywania dema jakiejś funkcjonalności, którą możemy się łatwo dzielić z innymi. Na Webhelpie często korzystamy z tej formy udostępniania kodu. Niestety, wielu początkujących webmasterów ma kłopot z uruchomieniem skopiowanego kodu z JSFiddle na własnej stronie. Przygotowałem krótki poradnik jak sobie z tym radzić.

W poradniku będziemy wspomagać się prostym przykładem.

Interfejs JSFiddle jest podzielony na 5 części. Mamy 3 „okienka” z kodem, jedno „okienko” z wynikiem działania kodu, oraz kolumnę po lewej stronie edytora z możliwością konfiguracji przykładu.

Krótka powtórka z HTMLa

Tradycyjny dokument HTML posiada poniższą strukturę

Kod: Zaznacz cały
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>forum.webhelp.pl</title>
  <!-- TUTAJ BĘDZIEMY WSTAWIAĆ KOD Z JSFIDDLE -->
</head>
<body>
  <!-- TUTAJ BĘDZIEMY WSTAWIAĆ KOD Z JSFIDDLE -->
</body>
</html>

W tej strukturze możemy wyróżnić 2 główne sekcje – głowę oraz ciało strony. Głową jest wszystko począwszy od <head> aż po </head>. Podobnie z ciałem, które zaczyna się od <body> a kończy </body>.

W przestrzenie pomiędzy tymi znacznikami będziemy wstawiać kody skopiowane z jsfiddle.

Kod HTML

Jeśli w „okienku” HTML widzimy jakąś treść, to wstawiamy ją do ciała dokumentu, zwykle w miejsce gdzie chcemy widzieć rezultat działania skryptu. Z podanego przykładu kopiujemy zatem cały kod do dokumentu…

Kod: Zaznacz cały
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>forum.webhelp.pl</title>
</head>
<body>
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
  <div id="d">d</div>
  <div id="e">e</div>
</body>
</html>

Arkusze stylów

Dalej, sprawdzamy czy pole na arkusz stylów ma jakąś zawartość. Jeśli tak, to wstawiamy ją do głowy dokumentu, otaczając znacznikiem <style>

Kod: Zaznacz cały
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>forum.webhelp.pl</title>
  <style>
    div { display: none; background: red; margin: 10px; }
  </style>
</head>
<body>
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
  <div id="d">d</div>
  <div id="e">e</div>
</body>
</html>

Zamiast wklejać kod CSS prosto do dokumentu HTML, można pomyśleć o stworzeniu dodatkowego pliku style.css i podlinkować go w dokumencie znacznikiem <link>

Kod: Zaznacz cały
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>forum.webhelp.pl</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
  <div id="d">d</div>
  <div id="e">e</div>
</body>
</html>

Przykłady na jsfiddle mogą posiadać więcej arkuszy stylów, ale o tym w dalszej części poradnika.

Detale konfiguracji

Na samej górze panelu konfiguracji mamy 2 listy. W pierwszej wybieramy biblioteki JavaScriptowe, których wymaga przygotowany przykład.

Jeśli widzimy w liście wybraną opcję inną niż No-Library (pure JS), musimy udać się na stronę danej biblioteki i sprawdzić jak ją zainstalować na stronie.

jQuery

Bardzo częstym wyborem jest jQuery. W przypadku tej biblioteki odwiedzamy jQuery.com, klikamy na duży przycisk pobierania, który przekieruje do odpowiedniej podstrony. Tam znajdziemy, między innymi link do code.jquery.com/jquery/, który pozwala odnaleźć dowolną wersję biblioteki.

Z powyższej strony kopiujemy adres do wersji minified wybranego wydania jQuery i wstawiamy go do naszego dokumentu w znaczniku <script>

Kod: Zaznacz cały
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>forum.webhelp.pl</title>
  <style>
    div { display: none; background: red; margin: 10px; }
  </style>
  <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
  <div id="d">d</div>
  <div id="e">e</div>
</body>
</html>
Proponuję skrypty wstawiać poniżej arkuszy stylów.

Pod listą z wyborem jQuery widoczne są zwykle kolejne kontrolki, które pozwalają dołączać popularne biblioteki bazujące na jQuery lub rozszerzające możliwości jQuery.

Jeśli wybrana jest biblioteka jQuery UI, to odwiedzamy stronę code.jquery.com/ui/ i kopiujemy do naszego dokumentu adresy plików dla wybranej przez nas wersji. jQuery UI dostarczany jest w 2 częściach - kod JavaScript + arkusz stylów. Proponuję wstawić arkusz stylów powyżej własnego arkusza, zaś kod JavaScript zaraz pod kodem wstawiającym jQuery.

Kod: Zaznacz cały
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>forum.webhelp.pl</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <style>
    div { display: none; background: red; margin: 10px; }
  </style>
  <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
</head>
<body>
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
  <div id="d">d</div>
  <div id="e">e</div>
</body>
</html>

Dodatkowe pliki zasobów

Panel konfiguracji zawiera sekcję nazwaną External Resources. Klikamy tę nazwę, żeby rozwinąć i sprawdzamy, czy mamy wylistowane tam dodatkowe pliki. Jeśli znajdziemy tam adresy arkuszy stylów, wstawiamy je poniżej arkuszy bibliotek, ale powyżej kodu z okienka „CSS”.

Podobnie wszelkie linki do plików JavaScript, wstawiamy poniżej kodów wstawionych wcześniej bibliotek.

Kod: Zaznacz cały
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>forum.webhelp.pl</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <!-- TUTAJ WSTAWIAMY DODATKOWE ARKUSZE STYLÓW ZNACZNIKIEM <link> -->
  <style>
    div { display: none; background: red; margin: 10px; }
  </style>
  <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
  <!-- TUTAJ WSTAWIAMY DODATKOWE SKRYPTY JS -->
</head>
<body>
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
  <div id="d">d</div>
  <div id="e">e</div>
</body>
</html>

Kod JavaScript

W końcu, po wszystkich przygotowaniach, możemy zająć się kodem z „okienka” JavaScript. W jaki sposób wstawimy zaprezentowany tam kod, zależy od wyboru w drugiej liście konfiguracji. Można sobie uprościć życie i dla każdego przypadku wstawić ten kod zaraz przed </body>. Sposób ten powinien działać dla 99% przypadków.

Kod: Zaznacz cały
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>forum.webhelp.pl</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <!-- TUTAJ WSTAWIAMY DODATKOWE ARKUSZE STYLÓW ZNACZNIKIEM <link> -->
  <style>
    div { display: none; background: red; margin: 10px; }
  </style>
  <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
  <!-- TUTAJ WSTAWIAMY DODATKOWE SKRYPTY JS -->
</head>
<body>
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
  <div id="d">d</div>
  <div id="e">e</div>

  <script>
jQuery(function ($) {
    function toggle (what) {
        var what = arguments[0];
        var args = [].slice.call(arguments, 1);
        args.push(arguments[0]);
        
        $(what).fadeIn().delay(3000).fadeOut(function () {
            toggle.apply(null, args);
        });
    }
    
    toggle("#a", "#b", "#c", "#d", "#e");
});
  </script>
</body>
</html>

Ale jeśli chcemy być dokładni to…

onLoad

Jeśli druga lista ma wybrane onLoad, to wstawiamy skrypt do głowy dokumentu, poniżej wstawionych bibliotek, dodatkowo otaczając kod paroma instrukcjami.

Kod: Zaznacz cały
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>forum.webhelp.pl</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <!-- TUTAJ WSTAWIAMY DODATKOWE ARKUSZE STYLÓW ZNACZNIKIEM <link> -->
  <style>
    div { display: none; background: red; margin: 10px; }
  </style>
  <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
  <!-- TUTAJ WSTAWIAMY DODATKOWE SKRYPTY JS -->
  <script>
    window.addEventListener("load", function () {
// TUTAJ KOD Z OKIENKA JAVASCRIPT
    }, false);
  </script>
</head>
<body>
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
  <div id="d">d</div>
  <div id="e">e</div>
</body>
</html>

Jeśli kod z okienka JavaScript bazuje na jQuery, zamiast kodu z addEventListener można skorzystać z

Kod: Zaznacz cały
jQuery(window).load(function () {
// TUTAJ KOD Z OKIENKA JAVASCRIPT
});

onDomready

Jeśli w drugiej liście wybrana została opcja onDomready, zadanie będzie praktycznie identyczne z onLoad, z tym, że dodatkowe instrukcje będą miały nieco inną postać.

Kod: Zaznacz cały
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>forum.webhelp.pl</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <!-- TUTAJ WSTAWIAMY DODATKOWE ARKUSZE STYLÓW ZNACZNIKIEM <link> -->
  <style>
    div { display: none; background: red; margin: 10px; }
  </style>
  <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
  <!-- TUTAJ WSTAWIAMY DODATKOWE SKRYPTY JS -->
  <script>
    document.addEventListener("DOMContentLoaded", function () {
// TUTAJ KOD Z OKIENKA JAVASCRIPT
    }, false);
  </script>
</head>
<body>
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
  <div id="d">d</div>
  <div id="e">e</div>
</body>
</html>

Tutaj tak samo, jeśli kod z okienka JavaScript bazuje na jQuery, możemy użyć

Kod: Zaznacz cały
jQuery(function ($) {
// TUTAJ KOD Z OKIENKA JAVASCRIPT
});

zamiast opcji z addEventListener.

No wrap - in <head>

Tutaj sprawa jest jeszcze prostsza – kod wstawiamy do głowy dokumentu bez żadnych dodatkowych instrukcji

Kod: Zaznacz cały
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>forum.webhelp.pl</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <!-- TUTAJ WSTAWIAMY DODATKOWE ARKUSZE STYLÓW ZNACZNIKIEM <link> -->
  <style>
    div { display: none; background: red; margin: 10px; }
  </style>
  <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
  <!-- TUTAJ WSTAWIAMY DODATKOWE SKRYPTY JS -->
  <script>
// TUTAJ KOD Z OKIENKA JAVASCRIPT
  </script>
</head>
<body>
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
  <div id="d">d</div>
  <div id="e">e</div>
</body>
</html>

No wrap - in <body>

Ostatnia opcja jest identyczna z moją propozycją uniwersalnego rozwiązania – czyli wstawić kod zaraz nad znacznikiem </body>.

Bardziej skomplikowane sprawy

W powyższym poradniku celowo pominąłem pozostałe opcje jsfiddle zawarte w panelach Fiddle Options oraz Languages.

Pierwsza z wymienionych kategorii wymaga od nas dokonania zmian w szablonie dokumentu, zaś druga wymaga przepuszczenia kopiowanych kodów przez specjalne narzędzia, konwertujące kod CoffeeScript, JavaScript 1.7 i SCSS do JavaScriptu i CSS.

Masz pytania lub wątpliwości? Odwiedź nasze forum dyskusyjne.

Rafał Kukawski

Programista, webmaster. Szczególnie upodobał sobie JavaScript i technologie klienckie, choć strona serwera i bazy danych nie stanowią tajemnicy. Tworzy też aplikacje na urządzenia mobilne. kukawski.pl.


Komentarze


HTML CSS JavaScript PHP bazy danych MySQL Flash grafika framework hosting domeny pozycjonowanie wordpress Facebook