jquery mobile demo

浏览数：41 / 时间：2015年06月09日 
<!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>

<body>

<div data-role="page" id="home">

    <header data-role="header">
        <h1>jQuery Mobile Demo</h1>
    </header>

    <div data-role="content">

    <div data-role="fieldcontain">
        <label for="text">文本输入框</label>
        <input type="text" name="text" id="text" value=""  />
    </div>

    <div data-role="fieldcontain">
        <label for="textarea">文本输入域</label>
        <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
    </div>

    <div data-role="fieldcontain">
        <label for="search">搜索输入框</label>
        <input type="search" name="search" id="search" value="" />
    </div>
    
    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup">
            <legend>单选框:</legend>
            <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" />
            <label for="radio-choice-1">蓝</label>
            <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
            <label for="radio-choice-2">绿</label>
            <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
            <label for="radio-choice-3">黑</label>
        </fieldset>
    </div>

    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup">
            <legend>复选框</legend> 
            <input type="checkbox" name="blue" id="effect1" class="custom" /> 
            <label for="effect1">效果1</label>
            <input type="checkbox" name="green" id="effect2" class="custom" />
            <label for="effect2">效果2</label>
            <input type="checkbox" name="pink" id="effect3" class="custom"  />
            <label for="effect3">效果3</label>
        </fieldset>
    </div>
    
    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-type="horizontal">
            <legend>复选框</legend> 
            <input type="checkbox" name="horizon-blue" id="horizon-effect1" class="custom" /> 
            <label for="horizon-effect1">效果1</label>
            <input type="checkbox" name="horizon-green" id="horizon-effect2" class="custom" />
            <label for="horizon-effect2">效果2</label>
            <input type="checkbox" name="horizon-pink" id="horizon-effect3" class="custom"  />
            <label for="horizon-effect3">效果3</label>
        </fieldset>
    </div>
        
    <div data-role="fieldcontain">
        <label for="select-choice-1" class="select">选择列表</label>
        <select data-native-menu="false" name="select-choice-1" id="select-choice-1">
            <option value="12h">12小时</option>
            <option value="1d">一天</option>
            <option value="2d">两天</option>
            <option value="week">一周</option>
        </select>
    </div>
    
    <div data-role="fieldcontain">
        <label for="select-choice-2" class="select">多项选择列表</label>
        <select data-native-menu="false" multiple="multiple" name="select-choice-2" id="select-choice-2">
            <option value="12h">12小时</option>
            <option value="1d">一天</option>
            <option value="2d">两天</option>
            <option value="week">一周</option>
        </select>
    </div>
    
    <div data-role="fieldcontain">
        <label for="select-choice-3" class="select">分组选择列表</label>
        <select data-native-menu="false" name="select-choice-3" id="select-choice-3">
            <optgroup label="Group1">
                <option value="12h">12小时</option>
                <option value="1d">一天</option>
                <option value="2d">两天</option>
                <option value="week">一周</option>
            </optgroup>
            <optgroup label="Group2">
                <option value="1m">一个月</option>
                <option value="1q">一季度</option>
                <option value="1y">一年</option>
            </optgroup>
        </select>
    </div>

    <div data-role="fieldcontain">
        <label for="slider">开关</label>
        <select name="slider" id="slider" data-role="slider">
            <option value="off">关闭</option>
            <option value="on">开启</option>
        </select> 
    </div>

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

    </div>

    <footer data-role="footer">
        <h2>Demo By <a href="http://kayosite.com" target="_blank" style="text-decoration: none; ">Kayo</a></h2>
    </footer>

</div>

</body> 
</html>

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style com log src java html http si class style com log src java html http si

相关文章

随机文章

您可能还喜欢

您可能还喜欢