2013-10-25 3 views
0

J- 쿼리 UI 및 Javascript를 처음 사용합니다. 내 HTML 페이지에는 EDIT USER 버튼이 있습니다. EDIT USER 버튼을 클릭하면 jQuery UI dialog-form이 열립니다. 입력 양식은 입력 필드 (텍스트 필드, 선택 필드)로 구성됩니다. 대화 상자 형식의 입력 필드에 대한 값은 동적으로 추가됩니다.jQuery UI 대화 상자 입력 필드가 모바일에서 작동하지 않습니다.

완벽하게 브라우저 (데스크톱)에서 작동하지만 모바일에서는 입력 필드 대화 상자 양식이 초점을 맞출 수 없습니다. 텍스트 필드를 탭하면 대화 상자가 위아래로 움직입니다. 탭을 선택하면 모바일에서 빈 화면이 표시됩니다. 내가 추가 한

스크립트 :

<div id="dialog-form" title="Edit User" > 
      <form> 
       <fieldset> 

        <label>Name</label> 
        <input type="text" id="UserName" disabled="disabled" class="text ui-widget-content ui-corner-all input-large" /> 
        <input type="text" id="UserId" style="display:none;"/> 

        <label>Staff Name</label> 
        <input type="text" id="StaffName" class="text ui-widget-content ui-corner-all input-large" /> 

        <label>Password</label> 
        <input type="text" id="PassWord" class="text ui-widget-content ui-corner-all input-large" /> 

        <label>Imei No</label> 
        <input type="text" id="ImeiNo" class="text ui-widget-content ui-corner-all input-large"/> 

        <label>User Role</label> 
        <select id="userroles" ><option value="Select UserRoles">Select UserRoles</option> 
        </select><br/> 

      </fieldset> 
     </form> 
</div> 

대화 형태가 초기화 : 같은

<script src="../js/jquery-2.0.0.min.js" type="text/javascript"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"> 
</script> 
<script src="../js/jquery.ui.touch-punch.min.js"></script> 

대화 형식 보인다

$("#dialog-form").dialog({ 
    autoOpen: false, 
    height: 300, 
    width: 550, 
    modal: true, 
    buttons: { 
     "Submit": function() { 
      submit(); 
     }, 
     Cancel: function() {       
      $(this).dialog("close"); 
     } 
     }, 
     close: function() {      
      $(this).dialog("close"); 
     } 

}); 

누구든지 나를 도울 수 있습니다.?

+0

jquery-ui 모바일 지원 포함 : http://touchpunch.furf.com/ – orhanhenrik

+0

모바일 (iPhone 5)에서 잘 작동합니다. http://jsfiddle.net/IrvinDominin/Bbspy/ –

+0

@lzzey : 잊지 마세요. 그것을 추가하십시오. i는 이미 touchpunch를 포함합니다. –

답변

0

모바일에서의 심각한 테스트와 인터넷 서핑을 한 후, 이전 버전의 Android 모바일에서 Bootstrap 모달 및 jQuery UI 대화 상자 양식이 올바르게 (완벽하게) 작동하지 않는다는 것을 알게되었습니다.

관련 문제