RobotBaram.net
  Home
  About Me
  Life is...
  Gallery
  Project
  Program
  Guest Book  
Login
Life is
 





출처> Naver webappdev 카페

----------------------------------------------------------------------------------------------

안녕하세요

 

우선 이곳에 딴동네님께서 올려주신 jquery mobile을 너무 잘 봤습니다.

 

jqm을 이제 막 시작해볼려고 하는데, 폼양식에 대해 궁금한게 있습니다.

 

<label>아이디 : </label><input type='text' ~ /> 이런식으로 텍스트박스 크기를 주지 않고 만들면

 

모바일웹에선 자동으로 아이디와 텍스트박스가 두줄로 되는데,

 

버튼의 가로배열 처럼 (data-inline="true") 자동으로 한줄로 배열시켜주는 기능이 없을까요?

 

아니면 폰마다 다른 웹페이지 넓이값을 읽어와서 직접 크기조절하는등의 방법밖에는 없을까요?

 

감사합니다.







소스 :

  1. <!DOCTYPE html>
  2.     <head>
  3.        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4.     <title>Page Title</title>
  5.        <meta name="apple-mobile-web-app-capable" content="yes"/>
  6.     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
  7.        <style>
  8.         .test1
  9.         {
  10.             display:inline !important;
  11.         }
  12.         .nameInputBox
  13.         {
  14.             width:200px  !important;
  15.         }
  16.     </style>
  17.     <script-x src="http://code.jquery.com/jquery-1.4.3.min.js"></script-x>
  18.     <script-x src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script-x>
  19. </head>
  20.  
  21.    
  22.     <div data-role="page" id="page_main" >
  23.    
  24.         <div data-role="header"  data-position="inline">
  25.         <h1>text input</h1>
  26.         </div>
  27.         <div data-role="content"  >
  28.                
  29.                      <div>
  30.                 <label for="name1" class="test1">name : </label>
  31.                  <input type="text" name="name1" id="name1" value=""   class="test1 nameInputBox"  placeholder="이름입력:"/>
  32.                 </div>
  33.          </div>
  34.          
  35.     </div>
  36. </body>
  37. </html>

 
   
작성일 : 11-02-08 12:35