<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>Mobiscroll</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="dev/js/mobiscroll.core-2.6.2.js" type="text/javascript"></script>
<script src="dev/js/mobiscroll.core-2.6.2-hu.js" type="text/javascript"></script>
<script src="dev/js/mobiscroll.core-2.6.2-de.js" type="text/javascript"></script>
<script src="dev/js/mobiscroll.core-2.6.2-es.js" type="text/javascript"></script>
<script src="dev/js/mobiscroll.core-2.6.2-fr.js" type="text/javascript"></script>
<script src="dev/js/mobiscroll.core-2.6.2-it.js" type="text/javascript"></script>
<script src="dev/js/mobiscroll.core-2.6.2-no.js" type="text/javascript"></script>
<script src="dev/js/mobiscroll.core-2.6.2-pt-BR.js" type="text/javascript"></script>
<script src="dev/js/mobiscroll.core-2.6.2-zh.js" type="text/javascript"></script>
<script src="dev/js/mobiscroll.core-2.6.2-nl.js" type="text/javascript"></script>
<script src="dev/js/mobiscroll.core-2.6.2-tr.js" type="text/javascript"></script>
<script src="dev/js/mobiscroll.core-2.6.2-ja.js" type="text/javascript"></script>
<link href="dev/css/mobiscroll.core-2.6.2.css" rel="stylesheet" type="text/css" />
<link href="dev/css/mobiscroll.animation-2.6.2.css" rel="stylesheet" type="text/css" />
<script src="dev/js/mobiscroll.datetime-2.6.2.js" type="text/javascript"></script>
<script src="dev/js/mobiscroll.list-2.6.2.js" type="text/javascript"></script>
<script src="dev/js/mobiscroll.list-2.6.2.js" type="text/javascript"></script>
<script src="dev/js/mobiscroll.select-2.6.2.js" type="text/javascript"></script>
<script src="dev/js/mobiscroll.android-2.6.2.js" type="text/javascript"></script>
<link href="dev/css/mobiscroll.android-2.6.2.css" rel="stylesheet" type="text/css" />
<script src="dev/js/mobiscroll.android-ics-2.6.2.js" type="text/javascript"></script>
<link href="dev/css/mobiscroll.android-ics-2.6.2.css" rel="stylesheet" type="text/css" />
<script src="dev/js/mobiscroll.ios-2.6.2.js" type="text/javascript"></script>
<link href="dev/css/mobiscroll.ios-2.6.2.css" rel="stylesheet" type="text/css" />
<script src="dev/js/mobiscroll.jqm-2.6.2.js" type="text/javascript"></script>
<link href="dev/css/mobiscroll.jqm-2.6.2.css" rel="stylesheet" type="text/css" />
<link href="dev/css/mobiscroll.sense-ui-2.6.2.css" rel="stylesheet" type="text/css" />
<script src="dev/js/mobiscroll.wp-2.6.2.js" type="text/javascript"></script>
<link href="dev/css/mobiscroll.wp-2.6.2.css" rel="stylesheet" type="text/css" />
<!--Includes-->
<style type="text/css">
body {
padding: 0;
margin: 0;
font-family: arial, verdana, sans-serif;
font-size: 12px;
background: #ddd;
}
input, select {
width: 100%;
padding: 5px;
margin: 5px 0;
border: 1px solid #aaa;
box-sizing: border-box;
border-radius: 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-border-radius: 5px;
}
.header {
border: 1px solid #333;
background: #111;
color: white;
font-weight: bold;
text-shadow: 0 -1px 1px black;
background-image: linear-gradient(#3C3C3C,#111);
background-image: -webkit-gradient(linear,left top,left bottom,from(#3C3C3C),to(#111));
background-image: -moz-linear-gradient(#3C3C3C,#111);
}
.header h1 {
text-align: center;
font-size: 16px;
margin: .6em 0;
padding: 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.content {
padding: 15px;
background: #fff;
}
.car {
position: relative;
height: 100%;
}
.car img {
height: 28px;
display: block;
margin: 0 auto;
}
.car .img-cont {
width: 80px;
height: 28px;
text-align: center;
float: left;
position: relative;
top: 50%;
margin-top: -14px;
}
.car span {
float: left;
}
</style>
<script type="text/javascript">
$(function () {
var curr = new Date().getFullYear();
var opt = {
}
opt.date = {preset : 'date'};
opt.datetime = { preset : 'datetime', minDate: new Date(2012,3,10,9,22), maxDate: new Date(2014,7,30,15,44), stepMinute: 5 };
opt.time = {preset : 'time'};
opt.tree_list = {preset : 'list', labels: ['Region', 'Country', 'City']};
opt.image_text = {preset : 'list', labels: ['Cars']};
opt.select = {preset : 'select'};
<!--Script-->
$('select.changes').bind('change', function() {
var demo = $('#demo').val();
$(".demos").hide();
if (!($("#demo_"+demo).length))
demo = 'default';
$("#demo_" + demo).show();
$('#test_'+demo).val('').scroller('destroy').scroller($.extend(opt[$('#demo').val()], { theme: $('#theme').val(), mode: $('#mode').val(), display: $('#display').val(), lang: $('#language').val() }));
});
$('#demo').trigger('change');
});
</script>
</head>
<body>
<div class="header">
<h1>Mobiscroll</h1>
</div>
<div class="content">
<div>
<label for="theme">Theme</label>
<select name="theme" id="theme" class="changes">
<option value="default">Default</option>
<option value="android">Android</option>
<option value="android-ics light">Android ICS Light</option>
<option value="android-ics">Android ICS</option>
<option value="ios">iOS</option>
<option value="jqm">Jquery Mobile</option>
<option value="sense-ui">Sense UI</option>
<option value="wp light">Windows Phone Light</option>
<option value="wp">Windows Phone</option>
<!--Themes-->
</select>
</div>
<div>
<label for="mode">Mode</label>
<select name="mode" id="mode" class="changes">
<option value="scroller">Scroller</option>
<option value="clickpick">Clickpick</option>
<option value="mixed">Mixed</option>
</select>
</div>
<div>
<label for="display">Display</label>
<select name="display" id="display" class="changes">
<option value="modal">Modal</option>
<option value="inline">Inline</option>
<option value="bubble">Bubble</option>
<option value="top">Top</option>
<option value="bottom">Bottom</option>
</select>
</div>
<div>
<label for="language">Language</label>
<select name="language" id="language" class="changes">
<option value="">English</option>
<option value="hu">Magyar</option>
<option value="de">Deutsch</option>
<option value="es">Espa�ol</option>
<option value="fr">Fran�ais</option>
<option value="it">Italiano</option>
<option value="no">Norsk</option>
<option value="pt-BR">Pr Brasileiro</option>
<option value="zh">Chinese</option>
<option value="nl">Nederlands</option>
<option value="tr">T�rk�e</option>
<option value="ja">Japanese</option>
<!--Lang-->
</select>
</div>
<div>
<label for="demo">Dem
JQuery Mobile开发需要用到的选择框类汇总
1星 需积分: 18 74 浏览量
2014-05-14
18:01:59
上传
评论
收藏 87KB ZIP 举报 
mobiscroll-2.6.2.zip （36个子文件） 
index-jquery-2.6.2.html 9KB
js 
mobiscroll.custom-2.6.2.min.js 43KB index-jquery-2.6.2-dev.html 11KB css 
wp_icons_light.png 5KB wp_icons.png 5KB mobiscroll.custom-2.6.2.min.css 37KB dev js mobiscroll.ios-2.6.2.js 308B mobiscroll.core-2.6.2-it.js 2KB mobiscroll.core-2.6.2.js 39KB mobiscroll.core-2.6.2-pt-BR.js 2KB mobiscroll.jqm-2.6.2.js 1KB mobiscroll.core-2.6.2-tr.js 2KB mobiscroll.select-2.6.2.js 12KB mobiscroll.list-2.6.2.js 15KB mobiscroll.core-2.6.2-hu.js 2KB mobiscroll.android-ics-2.6.2.js 396B mobiscroll.core-2.6.2-zh.js 1KB mobiscroll.core-2.6.2-es.js 2KB mobiscroll.android-2.6.2.js 233B mobiscroll.core-2.6.2-no.js 2KB mobiscroll.core-2.6.2-fr.js 2KB mobiscroll.datetime-2.6.2.js 28KB mobiscroll.core-2.6.2-nl.js 2KB mobiscroll.core-2.6.2-ja.js 1KB mobiscroll.core-2.6.2-de.js 2KB mobiscroll.wp-2.6.2.js 2KB css mobiscroll.core-2.6.2.css 9KB wp_icons_light.png 5KB mobiscroll.animation-2.6.2.css 13KB wp_icons.png 5KB mobiscroll.android-ics-2.6.2.css 5KB mobiscroll.android-2.6.2.css 2KB mobiscroll.wp-2.6.2.css 10KB mobiscroll.ios-2.6.2.css 9KB mobiscroll.sense-ui-2.6.2.css 2KB mobiscroll.jqm-2.6.2.css 2KB资源评论
guest3652014-06-04压缩包里只有一个组件mobiscrol，为什么不直接把组件名列出，而是使用“JQuery Mobile开发需要用到的选择框类汇总”来忽悠大家？
