Ich habe Probleme, mein erstes Jquery-Widget unter meinem Gürtel zu bekommen

  • Ich möchte den folgenden Schieberegler verwenden: http: // jqueryui .com / demos / slider / # range Ich möchte, dass alle Dateien lokal sind, sodass ich offline arbeiten kann. Im Moment versuche ich nur, eine Demo-Seite aufzurufen, die angezeigt wird nichts außer diesem Schieberegler. Ich glaube, mein Kampf ist: Welche JS, CSS-Dateien muss ich herunterladen / einschließen? Sobald ich das erste Mal in meinem Gürtel habe, sollte ich aus dem Rennen gehen.

    Danke für die Hilfe.

    edit:

    Also habe ich den Code heruntergeladen, meine HTML-Datei in das Verzeichnis gestellt, in dem sich die restlichen Ordner befinden, und ich bekomme nichts. Um ganz klar zu sein. Ich habe einen Ordner mit meiner HTML-Datei, CSS, Development-Bundle und JS-Ordner darin. Hier ist mein Code: Das Skript wurde aus der Jquery-Demo übernommen. Ich bin mir sicher, ich mache das WAYYYY komplizierter, als es sein muss. Vielen Dank.

     <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
    
        <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.16.custom.css">
        <script src="js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
        <script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
    
        <script>
        $(function() {
            $( "#slider-range" ).slider({
                range: true,
                min: 0,
                max: 500,
                values: [ 75, 300 ],
                slide: function( event, ui ) {
                    $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
                }
            });
            $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
                " - $" + $( "#slider-range" ).slider( "values", 1 ) );
        });
        </script>
    </head>
    
    <body>
    
    <div class="demo">
    
    <p>
        <label for="amount">Price range:</label>
        <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
    </p>
    
    <div id="slider-range"></div>
    
    </div>
    
    </body>
    </html>
     
    22 November 2011
    Leo
1 answer
  • Das JavaScript in Ihrem Skript-Tag wird vor dem HTML-Code in Ihrem Body-Tag ausgeführt, sodass jQuery diese Selektoren nicht auflösen kann. Warten Sie, bis der DOM geladen ist, bevor Sie den JS ausführen.

     $(document).ready(function(){
        //  $( "#slider-range" ) ...
        // $( "#amount" )...
    });
     

    Fwiw, für kleine Projekte wie diesen beginne ich fast immer mit einer Warnung ("Test") oder einer Konsole .log ("test") in dieser Dokumentbereitschaftsfunktion. So können Sie schnell und einfach feststellen, ob Ihre Bibliotheken geladen werden und Ihr JS von Anfang an ordnungsgemäß ausgeführt wird.

    22 November 2011
    Thomas