PhoneGet學習第二講

時間  2019-11-11
標籤 phoneget 學習 第二 简体版
原文   原文鏈接 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web</title>
<link href="css/jquery.mobile.structure-1.3.2.css" rel="stylesheet" type="text/css"/>
<link href="css/jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
</head>

<body>
<div data-role="page" id="page">
  <div data-role="header" data-theme="b">
    <h1>第一頁</h1>
  </div>
  <div data-role="content"> 
        <input type="text" name="name" id="base" value=""/>
        <label for="number-pattern">Number + [0-9]*pattern:</label>
        <input type="number" pattern="[0-9]*" id="number-pattern" value="" type="number"/>
        <label for="file">File:</label>
        <input type="file" id="file" value="" name="file"/>
        <label for="password">Password:</label>
        <input name="password" id="password" type="password" value="" autocomplete="off"/>
        <label for="textinput-hide" class="ui-hidden-accessible">Text</label>
        <input name="textinput-hide" id="textinput-hide" placeholder="請輸入您要搜索的信息" value="" type="text"/>
        
        <input disabled="disabled" name="textinput-disabled" id="textinput-disabled" placeholder="Text input" value="這個文本框是disabled的" type="text"/>
        
        <div data-role="fieldcontain">
        	<label for="name">用戶名：</label>
            <input type="text" name="name" id="name" placeholder="請輸入用戶名" value=""/>
            <label for="password">密碼：</label>
             <input type="password" name="password" id="password" value=""/>
             <input type="button" name="button" id="button" value="提交" data-inline="true"/>
             <input type="button" name="button" id="button" value="重置" data-inline="true"/>
             
             <label for="foo"></label>
             <select name="foo" id="foo">
             	<option value="a">A</option>
                <option value="b">B</option>
                <option value="c">C</option>
             </select> 
            
        </div>
         <div data-role="fieldcontain">
             	<label for="textarea">Textarea:</label>
                <textarea name="textarea" id="textarea"></textarea>
             </div>
             
             	
         <div data-role="fieldcontain">
         <label for="search">Search</label>
         <input type="search" name="search" id="search" value=""/>
         </div>
         <div data-role="fieldcontain">
         	<label for="range">range</label>
            <input type="range" name="silder" id="silder" value="40" min="0" max="100"/>
         </div>  
         <div data-role="fieldcontain">
         <label for="fill">fill</label>
         <input type="range" name="silder" id="silder" data-highlight="true" value="40" min="0" max="100"/>
         </div>
          <div data-role="fieldcontain">
         <label for="fill">fill</label>
         <input type="range" name="silder" id="silder" data-highlight="true"  data-mini="ture" value="40" min="0" max="100"/>
         </div>
         
         <div data-role="rangeslider">
         <label for="rangesilder1">rangesilder</label>
         <input type="range" name="rangesilder1" id="rangesilder1" data-highlight="true"  data-mini="ture" value="20" min="0" max="100"/>
          <label for="rangesilder2">rangesilder</label>
          <input type="range" name="rangesilder2" id="rangesilder2" data-highlight="true"  data-mini="ture" value="40" min="0" max="100"/>
         </div>
         
          <div data-role="rangeslider" data-mini="true">
         <label for="rangesilder1">rangesilder</label>
         <input type="range" name="rangesilder1" id="rangesilder1" data-highlight="true"  data-mini="ture" value="20" min="0" max="100"/>
          <label for="rangesilder2">rangesilder</label>
          <input type="range" name="rangesilder2" id="rangesilder2" data-highlight="true"  data-mini="ture" value="40" min="0" max="100"/>
         </div>
         
         
         <label for="slider2">Flip switch:</label>
         <select name="slider2" id="slider2" data-role="slider">
         	<option value="off">關</option>
            <option value="on">開</option>
          </select>
          <label for="slider2">Flip switch:</label>
         <select name="slider2" id="slider2" data-role="slider" data-mini="true">
         	<option value="off">關</option>
            <option value="on">開</option>
          </select>
          
          <fieldset data-role="controlgroup">
          	<legend>Checkboxes</legend>
            <input name="checkbox-1" id="checkbox-1" checked="" type="checkbox">
            <label for="checkbox-1" id="checkbox-1">Cheetos</label>
            <input name="checkbox-2" id="checkbox-2" checked="" type="checkbox">
            <label for="checkbox-2" id="checkbox-2">Cheetos</label>
            <input name="checkbox-3" id="checkbox-3" checked="" type="checkbox">
            <label for="checkbox-3" id="checkbox-3">Cheetos</label>
            <input name="checkbox-4" id="checkbox-4" checked="" type="checkbox">
            <label for="checkbox-4" id="checkbox-4">Cheetos</label>
          </fieldset>
          
          <fieldset data-role="controlgroup" data-mini="true">
          	<legend>Checkboxes</legend>
            <input name="checkbox-1" id="checkbox-1" checked="" type="checkbox">
            <label for="checkbox-1" id="checkbox-1">Cheetos</label>
            <input name="checkbox-2" id="checkbox-2" checked="" type="checkbox">
            <label for="checkbox-2" id="checkbox-2">Cheetos</label>
            <input name="checkbox-3" id="checkbox-3" checked="" type="checkbox">
            <label for="checkbox-3" id="checkbox-3">Cheetos</label>
            <input name="checkbox-4" id="checkbox-4" checked="" type="checkbox">
            <label for="checkbox-4" id="checkbox-4">Cheetos</label>
          </fieldset>
          
          <fieldset data-role="controlgroup">
          	<legend>Radio buttons</legend>
            
            <input name="radio-choice-1" id="radio-choice-1" value="choice-1"  checked="checked" type="radio"/>
            <label for="radio-choice-1">Cat</label>
             <label for="radio-choice-2">Dog</label>
            <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"   />
             <label for="radio-choice-3">Cat</label>
            <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"/>
            
          </fieldset>
          
          <fieldset data-role="controlgroup" data-type="horizontal">
          	<legend>Radio buttons</legend>
            
            <input name="radio-choice-1" id="radio-choice-1" value="choice-1"  checked="checked" type="radio"/>
            <label for="radio-choice-1">Cat</label>
             <label for="radio-choice-2">Dog</label>
            <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"   />
             <label for="radio-choice-3">Cat</label>
            <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"/>
            
          </fieldset>
          <br><br><br>
          <select name="select-choice-1" id="select-choice-1" data-inline="true">
          	<option value="aaaa">aaaaa</option>
            <option value="bbbb">bbbbb</option>
            <option value="cccc">ccccc</option>
            <option value="dddd">ddddd</option>
          </select>
          <select name="select-choice-1" id="select-choice-1" data-native-menu="false" data-inline="true">
          	<option value="aaaa">aaaaa</option>
            <option value="bbbb">bbbbb</option>
            <option value="cccc">ccccc</option>
            <option value="dddd">ddddd</option>
          </select>
          
          
          ------------------------------
          
          <label for="select-choice" class="select">Multi-select with optgroups.</label>
          <select name="select-choice" id="select-choice" multiple="multiple"
          data-native-menu="false" data-icon="grid" data-iconpos="left">
          <option>Choose a fes options:</option>
          <optgroup label="USPS1">
          	<option value="standard1" selected="">Standard:7 day1</option>
            <option value="standard2" selected="">Standard:7 day2</option>
            <option value="standard3" selected="">Standard:7 day3</option>
          </optgroup>
          <optgroup label="USPS2">
          	<option value="standard1" selected="">Standard:7 day1</option>
            <option value="standard2" selected="">Standard:7 day2</option>
            <option value="standard3" selected="">Standard:7 day3</option>
          </optgroup>
          </select>
  </div>
  <div data-role="footer">
    <h4>底部</h4>
  </div>
</div>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程