0
기존 JSFiddle을 수정하고이를 fork했습니다. 이 코드를 MVC 응용 프로그램의 .cshtml로 변환하려고합니다. 이 질문은 사람들이 Onload 또는 $ document.ready()를 사용하지 않기 때문에 문제가 발생했다는 것과 비슷한 질문을 읽었습니다. 나는 내 상황에서 그렇게 생각하지 않습니다.JSFiddle의 코드를 브라우저에서 사용하려면 어떻게해야합니까?
내 문서의 헤드는 다음과 같습니다:
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css" />
<link rel="stylesheet" href="~/CSS/slider.css" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
@*<script src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js"></script>*@
CSS의 외부 파일이며, 좋아하는이 같습니다
이.slide {
margin-top: 20px;
margin-left: 20px;
width: 400px;
background: red;
}
.slide-back {
position:absolute;
height:100%;
}
은 $ document.ready의 자바 스크립트 코드는()입니다 다음과 같이
<script>
$(document).ready(function() {
var doUpdate = function (event, ui) {
alert('doUpdate1'); //This fires.
$('#slide1 .slide-back').remove();
$($('#slide1 a').get().reverse()).each(function (i) {
var bg = '#fff';
if (i == 1) {
bg = '#00f';
} else if (i == 2) {
bg = '#0f0';
} else if (i == 3) {
bg = '#f00';
} else if (i == 4) {
bg = '#0ff';
}
$('#slide1').append($('<div></div>').addClass('slide-back').width($(this).offset().left - 5).css('background', bg));
});
};
$('#slide1').slider({
slide: doUpdate,
change: doUpdate,
min: 0,
max: 1000,
values: [200, 500, 800]
});
doUpdate();
});
</script>
페이지의 머리 부분과 본문 부분에이 코드를 넣으려고했습니다. 페이지가로드 될 때마다 경고가 발생하지만 스크롤 막대가 나타나면 슬라이더에 하나의 손잡이 만있는 일반적인 회색 색상입니다. JSFiddle에는 다채로운 슬라이더에 세 개의 손잡이가 있습니다.
JQueryUI에 대한 참조가 누락되었을 수 있다고 생각하여 머리에 추가했습니다.
<script src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js"></script>
그냥 상황을 악화시킵니다. 내가 거기에있을 때, 나는 콘솔에 아무런 오류없이 빈 페이지를 얻는다. 내가 무엇이 더 필요한지 나는 모른다. 아무도 내가 잘못 가고 있다고 말할 수 있습니까?
JSFiddle은 Here입니다.
[mcve]를 게시 할 수 있습니까? – evolutionxbox