2012-06-27 5 views
0

내 프로젝트에서이 흥미로운 장애물이 있습니다.페이지 탐색 기능이있는 HTML5 슬라이더

현재 저는 태블릿과 스마트 폰에서 실행되는 MVC3 프로젝트를 진행하고 있습니다. 페이지 탐색 기능이있는 HTML5 슬라이더가 포함되어 있습니다. 이 개념은 iPad의 "The Daily"앱과 매우 유사합니다.

http://youtu.be/KHILJBw-104

개념은 이후 비디오 0시 15분에서 온다.

HTML5 슬라이더를 사용하여 페이지를 탐색하고 싶습니다. 나는 슬라이드 막대를 밀어 때, 나는 HTML5 슬라이더 나 슬라이더의 값을 변경할 때마다 작업 "ViewFilter는"렌더링을 계속하지만

@using (Ajax.BeginForm("ViewFilter", new AjaxOptions { UpdateTargetId = "showpage" })){ 
    <input name="sliderStatus" id="sliderStatus" type="range" min="0" max="100" value="0" step="1" onchange="$(this.form).submit();" /> 
</div>} 

의 값의 변화를 감지 할 수 onchange를 사용합니다.

우리가 슬라이드 바를 밀면 릴리스 될 때만 값이 변경 될 수있는 방법을 생각해 볼 수 있습니까?

중요 : 태블릿 및 스마트 폰에서 Jquery 슬라이더는 태블릿 브라우저에서 드래그 할 수 없도록 작동하지 않습니다 (예 : Windows 8에서는 IE10, iPad에서는 Safari).

+0

나에게 질문을에 // 더 변경 이벤트를 스크롤 할 때마다 변경 사항을 사용하고 싶지 않으므로 d 폼이 제출됩니다. –

+0

흠 .... 예, 아니오. 왜냐하면 슬라이더를 끌고 놓을 때만 페이지를 렌더링하기를 원하기 때문입니다. –

+0

네,하지만 슬라이더에 마약을 쓸 때마다 onchange 이벤트가 발생합니다. –

답변

1

사용자가 슬라이드 한 다음 마우스를 놓은 후 이벤트가 발생하면 이런 생각이 들거나 마우스 오버 이벤트를 사용하도록 고려하거나 이벤트 시간 초과를 설정할 수 있습니다. 등은 변경 후 imidiatly을 발사하지로 시스템이 이벤트를 기다렸다가 실행됩니다 그래서 스크롤하는 데 걸리는 시간으로 시간 간격으로 onchnge 사용

https://developer.mozilla.org/En/Window.setInterval 세트 간격

$('#sliderStatus').mouseup(function() { 
    $(this.form).submit(); 
}); 
+0

작동합니다 !!! 고맙습니다. :) –

관련 문제