본문 바로가기
----- IT -----/jQuery Moblie

jQuery Mobile - Form themes(폼 테마)

by 대소니 2011. 6. 10.
5가지 테마를 사용한 예제 입니다.

<h2>Body swatch A</h2>
<div class="ui-body ui-body-a">

<div data-role="fieldcontain">
<label for="name-a">Text Input:</label>
<input type="text" name="name" id="name-a" value=""  />
</div>

<div data-role="fieldcontain">
<label for="switch-a">Flip switch:</label>
<select name="switch-a" id="switch-a" data-role="slider">
    <option value="off">Off</option>
    <option value="on">On</option>
</select>
</div>

<div data-role="fieldcontain">
<label for="slider-a">Slider:</label>
<input type="range" name="slider" id="slider-a" value="0" min="0" max="100"  />
</div>


<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font styling:</legend>
<input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" />
<label for="checkbox-6a">b</label>
<input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom" />
<label for="checkbox-7a"><em>i</em></label>
<input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom" />
<label for="checkbox-8a">u</label>   
</fieldset>
</div>

<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
    <input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" />
    <label for="radio-choice-1a">Cat</label>
    <input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2"  />
    <label for="radio-choice-2a">Dog</label>
    <input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3"  />
    <label for="radio-choice-3a">Hamster</label>
    <input type="radio" name="radio-choice-1" id="radio-choice-4a" value="choice-4"  />
    <label for="radio-choice-4a">Lizard</label>
</fieldset>
</div>

<div data-role="fieldcontain">
<label for="select-choice-a" class="select">Choose shipping method:</label>
<select name="select-choice-a" id="select-choice-a">
    <option value="standard">Standard: 7 day</option>
    <option value="rush">Rush: 3 days</option>
    <option value="express">Express: next day</option>
    <option value="overnight">Overnight</option>
</select>
</div>



<h2>Body swatch B</h2>
<div class="ui-body ui-body-b">

<div data-role="fieldcontain">
<label for="name-b">Text Input:</label>
<input type="text" name="name" id="name-b" value=""  />
</div>

<div data-role="fieldcontain">
<label for="switch-b">Flip switch:</label>
<select name="switch-b" id="switch-b" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>

<div data-role="fieldcontain">
<label for="slider-b">Slider:</label>
<input type="range" name="slider" id="slider-b" value="0" min="0" max="100"  />
</div>


<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font styling:</legend>
<input type="checkbox" name="checkbox-6b" id="checkbox-6b" class="custom" />
<label for="checkbox-6b">b</label>
<input type="checkbox" name="checkbox-7b" id="checkbox-7b" class="custom" />
<label for="checkbox-7b"><em>i</em></label>
<input type="checkbox" name="checkbox-8b" id="checkbox-8b" class="custom" />
<label for="checkbox-8b">u</label>   
</fieldset>
</div>

<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1b" value="choice-1" />
<label for="radio-choice-1b">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2b" value="choice-2"  />
<label for="radio-choice-2b">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3b" value="choice-3"  />
<label for="radio-choice-3b">Hamster</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4b" value="choice-4"  />
<label for="radio-choice-4b">Lizard</label>
</fieldset>
</div>

<div data-role="fieldcontain">
<label for="select-choice-b" class="select">Choose shipping method:</label>
<select name="select-choice-b" id="select-choice-b">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>

</select>
</div>

</div><!-- /body-b -->



<h2>Body swatch C</h2>
<div class="ui-body ui-body-c">

<div data-role="fieldcontain">
<label for="name-c">Text Input:</label>
<input type="text" name="name" id="name-c" value=""  />
</div>

<div data-role="fieldcontain">
<label for="switch-c">Flip switch:</label>
<select name="switch-c" id="switch-c" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>

<div data-role="fieldcontain">
<label for="slider-c">Slider:</label>
<input type="range" name="slider" id="slider-c" value="0" min="0" max="100"  />
</div>

<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font styling:</legend>
<input type="checkbox" name="checkbox-6c" id="checkbox-6c" class="custom" />
<label for="checkbox-6c">b</label>
<input type="checkbox" name="checkbox-7c" id="checkbox-7c" class="custom" />
<label for="checkbox-7c"><em>i</em></label>
<input type="checkbox" name="checkbox-8c" id="checkbox-8c" class="custom" />
<label for="checkbox-8c">u</label>   
</fieldset>
</div>

<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1c" value="choice-1" />
<label for="radio-choice-1c">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2c" value="choice-2"  />
<label for="radio-choice-2c">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3c" value="choice-3"  />
<label for="radio-choice-3c">Hamster</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4c" value="choice-4"  />
<label for="radio-choice-4c">Lizard</label>
</fieldset>
</div>

<div data-role="fieldcontain">
<label for="select-choice-c" class="select">Choose shipping method:</label>
<select name="select-choice-c" id="select-choice-c">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>

</div><!-- /body-c -->



<h2>Body swatch D</h2>
<div class="ui-body ui-body-d">

<div data-role="fieldcontain">
<label for="name-d">Text Input:</label>
<input type="text" name="name" id="name-d" value=""  />
</div>

<div data-role="fieldcontain">
<label for="switch-d">Flip switch:</label>
<select name="switch-d" id="switch-d" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>

<div data-role="fieldcontain">
<label for="slider-d">Slider:</label>
<input type="range" name="slider" id="slider-d" value="0" min="0" max="100"  />
</div>

<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font styling:</legend>
<input type="checkbox" name="checkbox-6d" id="checkbox-6d" class="custom" />
<label for="checkbox-6d">b</label>
<input type="checkbox" name="checkbox-7d" id="checkbox-7d" class="custom" />
<label for="checkbox-7d"><em>i</em></label>
<input type="checkbox" name="checkbox-8d" id="checkbox-8d" class="custom" />
<label for="checkbox-8d">u</label>   
</fieldset>
</div>

<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1d" value="choice-1" />
<label for="radio-choice-1d">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2d" value="choice-2"  />
<label for="radio-choice-2d">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3d" value="choice-3"  />
<label for="radio-choice-3d">Hamster</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4d" value="choice-4"  />
<label for="radio-choice-4d">Lizard</label>
</fieldset>
</div>

<div data-role="fieldcontain">
<label for="select-choice-d" class="select">Choose shipping method:</label>
<select name="select-choice-d" id="select-choice-d">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>

</div><!-- /body-d -->



<h2>Body swatch E</h2>
<div class="ui-body ui-body-e">

<div data-role="fieldcontain">
<label for="name-e">Text Input:</label>
<input type="text" name="name" id="name-e" value=""  />
</div>

<div data-role="fieldcontain">
<label for="switch-e">Flip switch:</label>
<select name="switch-e" id="switch-e" data-role="slider">
    <option value="off">Off</option>
    <option value="on">On</option>
</select>
</div>

<div data-role="fieldcontain">
<label for="slider-e">Slider:</label>
<input type="range" name="slider" id="slider-e" value="0" min="0" max="100"  />
</div>

<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font styling:</legend>
<input type="checkbox" name="checkbox-6e" id="checkbox-6e" class="custom" />
<label for="checkbox-6e">b</label>
<input type="checkbox" name="checkbox-7e" id="checkbox-7e" class="custom" />
<label for="checkbox-7e"><em>i</em></label>
<input type="checkbox" name="checkbox-8e" id="checkbox-8e" class="custom" />
<label for="checkbox-8e">u</label>   
</fieldset>
</div>

<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
    <input type="radio" name="radio-choice-1" id="radio-choice-1e" value="choice-1" />
    <label for="radio-choice-1e">Cat</label>
    <input type="radio" name="radio-choice-1" id="radio-choice-2e" value="choice-2"  />
    <label for="radio-choice-2e">Dog</label>
    <input type="radio" name="radio-choice-1" id="radio-choice-3e" value="choice-3"  />
    <label for="radio-choice-3e">Hamster</label>
    <input type="radio" name="radio-choice-1" id="radio-choice-4e" value="choice-4"  />
    <label for="radio-choice-4e">Lizard</label>
</fieldset>
</div>

<div data-role="fieldcontain">
<label for="select-choice-e" class="select">Choose shipping method:</label>
<select name="select-choice-e" id="select-choice-e">
    <option value="standard">Standard: 7 day</option>
    <option value="rush">Rush: 3 days</option>
    <option value="express">Express: next day</option>
    <option value="overnight">Overnight</option>

</select>
</div>

</div><!-- /body-e -->


댓글