2013-06-04 3 views
7

Ich bin neu in Jquery und Bootstrap, und ich kann sie nicht dazu bringen, nett miteinander zu spielen. Ich habe eine Seite mit Bootstrap-Dropdown-Menüs und jquery-Schiebereglern. Allerdings kann ich nicht beide zur gleichen Zeit arbeiten.Skript Reihenfolge für Jquery mit Bootstrap

Bootstrap-Dropdown-Listen arbeiten mit dieser Datei, und Schieber

<html lang="en"> 
<head> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" /> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script> 
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <script src="/js/slider_input.js"></script> 
</head> 

<body> 
.... 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
    <script src="/bootstrap/js/bootstrap.min.js"></script> 

</body 
</html 

durch wie die vorletzte Zeile entfernen brechen so:

Sliders Arbeit und Bootstrap-Dropdown-Listen brechen

<html lang="en"> 
<head> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" /> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script> 
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <script src="/js/slider_input.js"></script> 
</head> 

<body> 
.... 

    <script src="/bootstrap/js/bootstrap.min.js"></script> 

</body 
</html 

Antwort

7

oh ja jetzt sehe ich Entschuldigung. Sie müssen zuerst Ihre eigentliche JQuery laden, ansonsten wird die UI auch nicht funktionieren. So sollte dies der Kopf

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
<script src="/js/slider_input.js"></script> 

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> 

Auch in html5 müssen Sie das wegzulassen 'type = "text/javascript"', wie die Bootstrap-on, auch consisten sein, also wenn Sie es auf der anderen Seite haben, fügen Sie es auch dem Bootstrap hinzu, es hat mit Laderegeln zu tun.

1

Nicht sicher, aber es scheint, dass Ihre Bootstrap-Version eine neuere erfordert Version von jQuery ordnungsgemäß ausgeführt wird, versuchen zu ersetzen:

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script> 

mit

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 

und lassen es dann in Ihrem Körper.

Lassen Sie mich wissen, was dann passiert.

Hinweis:Sie jemals nicht geladen zwei jQuerys, werden sie brechen und die Arbeits Ihrer Funktionen stoppen, und vor allem, wenn Sie Ajax auf Ihrer Webseite.

+0

Einer von denen ist für jqueryui und einer ist von jquery, brauche ich nicht beide? – bcoop713

+0

Versucht es trotzdem und es ist immer noch kaputt :( – bcoop713

+0

oh yeah Jetzt sehe ich Entschuldigung. Sie müssen zuerst Ihre tatsächliche jquery laden, sonst UI wird auch nicht funktionieren. So sollte dies der Kopf sein