我把下载的例子简化了一下,把不用的内容都删除了,想试一下我想要的结果,但有二个问题:
1. 怎么去掉'确认'和'取消'二个按钮,点击数字即相当于确认选择
2. 上面那个下拉框(就是id="demo"的那个只显示Select的下拉框)总是存在,我想了几个办法想去掉它,没有成功.去掉后就没有需要的效果了
当然,给加style="display:none"是可以,但是否就应该这样?
3. 真正需要输入值的input框,没有改变.这个可不行.
我发现,对于date, datetime, time是真正输入到了input框,而对于select和list等,原来的例子是让人感觉到是输入到了input框中,但实际是一个假象,它把input隐藏了.输入没有真正写到input中.谁有好方法?
我可能试的不对? 谁有好的方法?或建议,或提示我一下.
源码:
<!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 日期时间选择控件( SnoopyChen修改增加中文支持 ceo@vmeitime.com )</title>
<script src="dev/jquery-1.9.1.js"></script>
<script src="dev/js/mobiscroll.core-2.5.2.js" type="text/javascript"></script>
<script src="dev/js/mobiscroll.core-2.5.2-zh.js" type="text/javascript"></script>
<link href="dev/css/mobiscroll.core-2.5.2.css" rel="stylesheet" type="text/css" />
<script src="dev/js/mobiscroll.android-2.5.1.js" type="text/javascript"></script>
<link href="dev/css/mobiscroll.android-2.5.1.css" rel="stylesheet" type="text/css" />
<script src="dev/js/mobiscroll.select-2.5.1.js" type="text/javascript"></script>
<style type="text/css">
input, select {
width: 100px;
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;
}
</style>
<script type="text/javascript">
$(function () {
var opt = {}
opt.select = {preset : 'select'};
$('select.changes').bind('change', function() {
$(".demos").hide();
$("#demo_select").show();
$('#test_select').val('').scroller('destroy').scroller($.extend(opt[$('#demo').val()], {
theme: 'android',
mode: 'scroller',
display: 'modal',
lang: 'zh',
}));
});
$('#demo').trigger('change');
});
</script>
</head>
<body>
<div class="content">
<div>
<select name="demo" id="demo" class="changes">
<option value="select" >Select</option>
</select>
</div>
输入值:<input type="text" name="test_default" id="test_default" />
<div data-role="fieldcontain" class="demos fieldcontain" id="demo_select">
<label for="test_select" class="ui-input-text">Click here to try</label>
<select id="test_select" class="demos" data-role="none">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
</div>
</body>
</html>
我上传了我下载的代码,谁可试一下.另外,里面的test1.html就是上面的我试的代码.test2.html是我还想试的代码.其它都是原来的代码.
附件(150.3KB) mobiscroll.rar※ 修改:·darlingpeng 于 Aug 4 19:30:35 2015 修改本文·[FROM: 221.204.231.*]
※ 来源:·水木社区
http://www.newsmth.net·[FROM: 221.204.231.*]
修改:darlingpeng FROM 221.204.231.*
FROM 221.204.231.*