<!doctype html>
<html lang="en">
<head>
<title>testall</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/prettycheckable.css" rel="stylesheet" >
<link href="css/select2.css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap.file-input.js"></script>
<script type="text/javascript" src="js/prettycheckable.min.js"></script>
<script type="text/javascript" src="js/select2.js"></script>
<style type="text/css">
<!--
.style1 {
color: #ff0000;
font-size: 18px;
}
.style2 {color: #ff0000}
.style3 {
font-weight: bold;
-->
</style>
</head>
<body style="margin:auto 50px;">
<span class="style1">一、fileupload(bootstrap.file-input) </span><br>
<span class="style2">js:</span><br>
jquery-2.0.3.min.js<br>
bootstrap.min.js<br>
bootstrap.file-input.js<br>
<span class="style2">css:</span><br>
bootstrap.min.css<br>
<!-- change the wording using a title tag -->
<input type="file" title="search for a file to add 1" class="btn-primary">
<br>
<input type="file" title="search for a file to add 2" class="btn btn-primary">
<input type="file" title="search for a file to add 3" class="btn-primary">
<input type="file" title="search for a file to add 4" class="btn-primary">
disable the styling:
<!-- disable the styling -->
<input type="file" data-bfi-disabled>
<script type="text/javascript">
$('input[type=file]').bootstrapfileinput();
</script>
<br><br><br>
<span class="style1"><strong>二、checkbox&radio(prettycheckable) </strong></span><br>
prettycheckable.min.js<br>
prettycheckable.css<br>
<span class="style2">checkbox:</span><br>
<input type="checkbox" class="myclass" value="1" id="answer" name="answer" data-color="green"/>
<input type="checkbox" class="myclass" value="2" id="answer" name="answer" data-color="red"/>
<span class="style2">radio:</span><br>
第一組：<br>
<input type="radio" class="myradio" value="1" id="myradio" name="radio" data-color="green"/>
<input type="radio" class="myradio" value="2" id="myradio" name="radio" data-color="red"/>
<br>第二組：<br>
<input type="radio" class="myradio" value="1" id="myradio2" name="radio2" data-color="green"/>
<input type="radio" class="myradio" value="2" id="myradio2" name="radio2" data-color="red"/>
<script>
$().ready(function(){
$('input.myclass').prettycheckable({
color: 'red'
});
$('input.myradio').prettycheckable({
<span class="style3">三、select（select2） </span><br>
select2.js<br>
select2.css<br>
<span class="style2">select2多選下拉： </span><br>
<select class="multipleselect" multiple style="width:300px">
<option value="1">mustard</option>
<option value="2">ketchup</option>
<option value="3">relish</option>
</select>
<option value="1">mustard2</option>
<option value="2">ketchup2</option>
<option value="3">relish2</option>
$('select.multipleselect').select2();
<span class="style2">select2單選下拉： </span><br>
<select id="e1" style="width:300px" class="mysingleselect">
<option ></option>
<optgroup label="第一組">
<option value="1">11111111111111</option>
<option value="2">22222222222222</option>
</optgroup>
<optgroup label="第二組">
<option value="3">33333333333333</option>
<option value="4">44444444444444</option>
<select>
<br><br>
<optgroup label="第三組">
<option value="1">55555555555555</option>
<option value="2">66666666666666</option>
<optgroup label="第四組">
<option value="3">77777777777777</option>
<option value="4">88888888888888</option>
$(document).ready(function() { $("select.mysingleselect").select2({
placeholder: "select a state",
allowclear: true
}); });
</body>
</html>
效果如下：
最新内容請見作者的github頁：http://qaseven.github.io/