JqueryUI slider nicht angezeigt

Ich versuche einen optionalen slider auf meiner app, ich habe die jquery-Schieberegler, der jqueryUI, aber es funktioniert nicht auf meiner web-Seite.

Der html-Code wird generiert per php und dem $('#slider').Schieberegler() ist der Aufruf in meinem js

Lasse ich den code hier :

/CSS/

#slide{
    display: none;
    position: absolute;
    float: left;
    height: 14px;
    width: 200px;
    top: 35px;
    /*background-color: rgba(102, 102, 102, 0.90);*/
    padding : 10px;
    z-index: 2;
}

/HTML/

<div id="wrapper" data-role="content">

<div id="slide"><div id="slider"></div></div>

</div>

/*JAVASCRIPT */

$(document).on("click","#page-slider",function(){
    $('#slide').toggle("slow");
    $('#slider').slider();
});

Wenn jemand sieht, dass das problem oder hat eine Idee, es wird großartig.

Danke im Voraus

InformationsquelleAutor pcharb | 2012-03-09
  1. 15

    Haben Sie die jQuery UI-CSS geladen? Ohne Sie wird es schaffen, den regler HTML, aber du wirst nichts sehen, weil es keine CSS-Datei für Sie.

    <link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css' rel='stylesheet' type='text/css'>

    Zweitens, warum sind Sie initialisieren die regler in eine Klick-Funktion? Sie sollten nur müssen dies tun, einmal auf Dokument bereit:

    $(document).ready( function() {
    $('#slider').slider();

    $(document).on("click","#page-slider",function(){
        $('#slide').toggle("slow");
    });
});

    Beispiel ohne CSS: http://jsfiddle.net/jtbowden/Ehr8y/

    Beispiel mit CSS: http://jsfiddle.net/jtbowden/Ehr8y/4/

    Es ist der gleiche code, aber in dem zweiten Beispiel, ich lade die Basis-jquery UI CSS-Dateien. Wenn Sie einen Blick auf die Quelle des einen, ohne CSS, Sie werden sehen:

    <div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
    <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a>
</div>

    So, klar .slider() ausgeführt.

    • Ich kann nicht initialisiert den regler() auf dem Dokument bereit, da das javascript geladen wird, bevor das slider-element in html. Ich merke, dass es initialisieren, auf die click-Funktion ist nicht gut, aber ich will nur sehen, es einmal ein Update das andere problem nach
    • Das macht keinen Sinn. Der springende Punkt bei der $(document).ready() ist, dass das Skript nicht ausgeführt, bis alle Elemente geladen sind. Wenn Sie es tun richtig, diese sollte funktionieren.
    • wenn Sie rufen Sie $('#slider').Schieberegler(), es produzieren <div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" - > aber für mich ist es die Herstellung dieses <div id="slider" class="ui-slider-Schalter"></div> <div class="ui-slider ui-btn-down-c-ui-btn-corner-all" role="application">
    • Ah, Sie sind unter Verwendung von jQuery Mobile. Siehe: jsfiddle.net/jtbowden/Q7aUV/2
    • Ich hasse diese Art von dummen Fehler. Jquery mobile war wohl zu laden nur auf einem mobilen Gerät, aber es war nicht, Es war nur, weil dieser. Danke für deine schnelle Antwort
    • Sicher. Klicken Sie auf das Häkchen bei " meine Antwort bitte. Annahme von Antworten stellt sicher, dass die Leute Ihre Fragen in der Zukunft.

    InformationsquelleAutor Jeff B
Schreibe einen Kommentar