jquery 모바일의 전체 너비 슬라이더?

Question

몇 가지 버튼과 슬라이더가 포함 된 간단한 jquery 모바일 사이트가 있습니다. 버튼은 전체 수평 공간을 채우기 위해 펼쳐지지만 슬라이더는 그렇지 않습니다. 그것은 매우 clunky 느낀다. jquery-mobile 슬라이더를 전체 수평 공간을 채우기 위해 감추는 방법이 있습니까?

<div data-role="page"> 
    <div data-role="header"> 
     <h1>header</h1> 
    </div> 
    <div data-role="content"></div> 
    <div data-role="content" data-position="fixed" data-theme="a"> 
     <form> 
      <input type="range" name="slider" id="slider-0" value="50" min="0" max="100"/> 
     </form> 
     <a id="button-1" href="#" data-role="button">Button</a> 
     <a id="button-2" href="#" data-role="button">Button</a> 
    </div> 
</div> 

사이드 노트 :이 코드에는 data-role = "content"가있는 두 개의 div가 포함됩니다. 그게 나를 곤경에 빠지게 할거야? jquery-mobile은 슬라이더를 바닥 글에 넣는 것을 좋아하지 않지만 슬라이더가 표시 영역의 하단에 고정 된 바닥 글처럼 작동해야합니다.

Answer 1

일관된 화면 크기를 타겟팅하는 경우 매우 간단합니다. 기본적으로 JQM 1.1RC2에서는 슬라이더 막대에 65 %를 사용하고 있습니다. 그러나 슬라이더 앞의 입력 필드는 50px로 고정됩니다. .ui-slider 너비로 재생 해보면 화면 크기에 따라 다르게 보일 수 있으므로 더 조심하십시오.

div.ui-slider{width:80%;}

는 아마 80 % 같은 당신을 위해 잘 작동합니다. 당신의 두 번째 부분에 관해서는 나는 그것을 밖으로 테스트하고 우리에게 알려주는 것을 전혀 모른다.