首页 > 代码库 > mui input用法
mui input用法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link rel="stylesheet" href="http://www.mamicode.com/css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="http://www.mamicode.com/css/modile.css" />
<script src="http://www.mamicode.com/js/jquery-1.10.2.min.js"> </script>
<script src="http://www.mamicode.com/js/jquery.mobile-1.4.5.min.js"> </script>
<style>
input:focus{
border:none !important;
}
input[type=date] {
background-color:transparent;
border: none;
FILTER: alpha(opacity=0); /*androd*/
appearance:none; /*下拉框去掉右侧图标*/
-moz-appearance:none;
-webkit-appearance:none;
}
.ui-btn, label.ui-btn {
font-weight: normal;
border-width: 1px;
border-style: solid;
}
.ui-btn-icon-left:after, .ui-btn-icon-right:after, .ui-btn-icon-top:after, .ui-btn-icon-bottom:after, .ui-btn-icon-notext:after {
content: "";
position: absolute;
display: block;
width: 0px;
height: 22px;
}
.click{
width: 100px;
height: 50px;
background-color: red;
}
.tap{
width: 100px;
height: 50px;
background-color: blue;
}
.taphold{
width: 100px;
height: 50px;
background-color: palegreen;
}
</style>
</head>
<body>
<div data-role="page" id="page">
<div data-role="content">
<form action="">
<div class="my-label"> <label for="ageb">年纪</label></div>
<div class="my-control">
<select name="" id="">
<option value="http://www.mamicode.com/1">一年级</option>
<option value="http://www.mamicode.com/2">二年级</option>
<option value="http://www.mamicode.com/3">三年级</option>
<option value="http://www.mamicode.com/4">四年级</option>
</select>
</div>
<div class="my-label">
<label for="texta">简单描述</label>
</div>
<div class="my-control">
<textarea name="texta" rows="" cols=""></textarea>
</div>
<fieldset data-role="controlgroup">
<legend>性别</legend>
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="http://www.mamicode.com/male">
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="http://www.mamicode.com/female">
</fieldset>
<label for="day">您可以选择多天：</label>
<select name="day" id="day" multiple="multiple" data-native-menu="false">
<option>天</option>
<option value="http://www.mamicode.com/mon">星期一</option>
<option value="http://www.mamicode.com/tue">星期二</option>
<option value="http://www.mamicode.com/wed">星期三</option>
<option value="http://www.mamicode.com/thu">星期四</option>
<option value="http://www.mamicode.com/fri">星期五</option>
<option value="http://www.mamicode.com/sat">星期六</option>
<option value="http://www.mamicode.com/sun">星期日</option>
</select>
<div class="my-label">
<label for="data">出发日期</label>
</div>
<div class="my-control">
<input type="date" data-role="none" value="http://www.mamicode.com/2017-04-21" />
</div>
</form>
<div id="page">pageinit</div>
<p class="click"></p>
<p class="tap"></p>
<p class="taphold"></p>
</div>
<div data-role="footer">
<fieldset data-role="fieldcontain">
<label for="day">选择天</label>
<select name="day" id="day" data-native-menu="false">
<option value="http://www.mamicode.com/mon">星期一</option>
<option value="http://www.mamicode.com/tue">星期二</option>
<option value="http://www.mamicode.com/wed">星期三</option>
<option value="http://www.mamicode.com/thu">星期四</option>
<option value="http://www.mamicode.com/fri">星期五</option>
<option value="http://www.mamicode.com/sat">星期六</option>
<option value="http://www.mamicode.com/sun">星期日</option>
</select>
</fieldset>
</div>
</div>
/body>
<script>
$(document).on("pageinit","#page",function(){
console.log("页面加载完成")
})
$(".click").on("click",function(){
$(this).hide()
})
/* 点击触发*/
$(".tap").on("tap",function(){
$(this).hide()
})
/*taphold长按超过1秒时间*/
$(".taphold").on("taphold",function(){
alert("删除")
})
/*swipe水平滑动超过30px触发的事件*/
$("#page").on("swipe",function(){
alert("滑动")
})
</script>
</html>
上面input结合媒体查询使用
.my-control,.my-label{ display: inline-block !important; }
.my-label{ color:gray; }
@media all and (min-width:768px ) {
.my-label{ width: 25%; }
.my-control{ width: 73%; }
}
@media all and (min-width:500px ) and (max-width:767px) {
.my-label{ width: 36%; }
.my-control{ width: 68%; }
}
@media all and (min-width:350px ) and (max-width:499px) {
.my-label{ width: 27%; }
.my-control { width: 70%; }
}
@media all and (max-width:350px ) {
.my-label{ width: 30%; }
.my-control{ width: 63%; }
}
mui input用法