css-frame
/
buttonform.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<meta name="Keywords" content="" />
	<meta name="Description" content="" />
	<meta name="author" content="Kamly">
	<title>按钮/表单/表格</title>
	<link rel="stylesheet" type="text/css" href="css/normal.css" />
	<link rel="stylesheet" type="text/css" href="css/html5.css" />
	<link rel="stylesheet" type="text/css" href="css/base.css" />
	<link rel="stylesheet" type="text/css" href="css/grid.css" />

	<link rel="stylesheet" type="text/css" href="css/form.css" />

	<script  src="js/jquery-1.9.0.min.js" type="text/javascript"></script>

</head>
<body>
	<!--   4大类型 + 禁用     -->
	<div class="ui-grid-container">
		<button type="button" class="ui-btn">默认</button>
		<button type="button" class="ui-btn ui-btn-error">错误</button>
		<button type="button" class="ui-btn ui-btn-warning">警告</button>
		<button type="button" class="ui-btn ui-btn-primary">主要</button>
		<button type="button" class="ui-btn ui-btn-disabled">禁用</button>
	</div>

	<!--   多种类型适用    -->
	<div class="ui-grid-container" >
		<button class="ui-btn " type="button">我是一个基本按钮</button>
		<input class="ui-btn " value="input标签按钮" type="submit">
		<div class="ui-btn ">div标签按钮</div>
	</div>

	<!--  不同大小  块元素  -->
	<div class="ui-grid-container" >
		<button class="ui-btn ui-btn-xlarge" type="button">ui-btn-xlarge</button>
		<button class="ui-btn ui-btn-large" type="button">ui-btn-large</button>
		<button class="ui-btn ui-btn-medium" type="button">ui-btn-medium</button>
		<button class="ui-btn ui-btn-small" type="button">ui-btn-small</button>
		<button class="ui-btn ui-btn-xsmall" type="button">ui-btn-xsmall</button>
		<button class="ui-btn ui-btn-block" type="button">ui-btn-block</button>
	</div>


	<!--  图标  -->
	<div class="ui-grid-container">
		<button class="ui-btn">
			<b class="iconfont">&#126;</b>
			提交
		</button>
	</div>


	<!-- 修改了 iconfont.css 的两个属性：   font-size: 32px;  display: block;  -->
	<div class="ui-grid-container">
		<button class="ui-btn iconfont ui-btn-xlarge">
			<i class="ui-icon-more"></i>
			提交
		</button>
		<button class="ui-btn iconfont ui-btn-xlarge">
			<i class="ui-icon-add"></i>
			提交
		</button>
	</div>


	<!-- 表格基础样式  修改normal.css，94，修复th不继承text-align，默认左对齐 -->
	<div class="ui-grid-container">
		<table class="table">
		   <thead>
		     <tr class="">
		       <th>表格标题</th>
		       <th>表格标题</th>
		       <th>表格标题</th>
		     </tr>
		   </thead>
		   <tbody>
		     <tr>
		       <td>表格单元格</td>
		       <td>表格单元格</td>
		       <td>表格单元格</td>
		     </tr>
		     <tr>
		       <td>表格单元格</td>
		       <td>表格单元格</td>
		       <td>表格单元格</td>
		     </tr>
		   </tbody>
		 </table>
	</div>


	<!-- 表格基础样式  +  边框  -->
	<div class="ui-grid-container">
		<table class="table table-bordered">
		    <thead>
			     <tr class="">
			       <th>表格标题</th>
			       <th>表格标题</th>
			       <th>表格标题</th>
			     </tr>
		   </thead>
		   <tbody>
			     <tr>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			     </tr>
			     <tr>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			     </tr>
		   </tbody>
		 </table>
	</div>

	<!-- 表格基础样式  +  边框  + 自动换整行颜色 -->
	<div class="ui-grid-container">
		<table class="table table-bordered table-striped">
		    <thead>
			     <tr class="">
			       <th>表格标题</th>
			       <th>表格标题</th>
			       <th>表格标题</th>
			     </tr>
		   </thead>
		   <tbody>
			     <tr>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			     </tr>
			     <tr>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			     </tr>
		   </tbody>
		 </table>
	</div>

	<!-- 表格基础样式  +  边框  + 自动换整行颜色 + 状态-->
	<div class="ui-grid-container">
		<table class="table table-bordered table-striped">
		    <thead>
			     <tr class="danger">
			       <th>danger</th>
			       <th>表格标题</th>
			       <th>表格标题</th>
			     </tr>
		   </thead>
		   <tbody>
			     <tr class="warning">
			       <td>warning</td>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			     </tr>
			     <tr class="success">
			       <td>success</td>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			     </tr>
			     <tr class="info">
			       <td>info</td>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			     </tr>
			     <tr class="active">
			       <td>active</td>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			     </tr>
			     <tr>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			       <td>表格单元格</td>
			     </tr>
		   </tbody>
		 </table>
	</div>


	<!-- 表格基础样式  +  边框  + 自动换整行颜色 + 状态  +  表格高亮  -->

	<!-- input -->
		<div class="ui-grid-container">
            <form action="" >
            	<!-- input-normal -->
                <label for="" class="">input-normal</label>
                <br/>
                <div class="">
                	<div class="图标">
                	</div>
                    <div class="">
                        <input type="text" class="input-normal" maxlength="15" placeholder="学号：">
                    </div>
                </div>


            	<!-- input-s -->
                <br/>
                <label for="" class="">input-s</label>
                <br/>
                <div class="">
                    <div class="">
                        <input type="text" class="input-s" maxlength="15" placeholder="出生日期：">
                    </div>
                </div>


            	<!-- input-down -->
                <br/>
                <label for="" class="">input-down</label>
                <br/>
                <div class="">
                    <div class="">
                        <input type="text" class="input-down" maxlength="15" placeholder="出生日期：">
                    </div>
                </div>


            	<!-- input-count -->
                <br/>
                <label for="" class="">input-count</label>
                <br/>
                <div class="">
                    <div class="">
                        <input type="text" class="input-count" maxlength="15" placeholder="出生日期：">
                    </div>
                </div>

				<!-- radio  radio-group -->
                <br/>
				<div class="radio-group">
	                <div class="radio">
				        <input type="radio" value="1" name="sex" id="man">
				        <i class="radio-in"></i>
				    </div>
					<label  title="">123132hahaha</label>
			  	</div>
				<div class="radio-group">
				    <div class="radio">
				        <input type="radio" value="1" name="sex" id="feman">
				        <i class="radio-in"></i>
				    </div>
				    <label  title="">123132</label>
 				</div>


				<!-- radio  radio-group radio-inline-->
                <br/>
                <br/>
				<div class="radio-group radio-inline">
	                <div class="radio">
				        <input type="radio" value="1" name="sex" id="man">
				        <i class="radio-in"></i>
				    </div>
					<label  title="">123132</label>
			  	</div>
				<div class="radio-group radio-inline">
	                <div class="radio">
				        <input type="radio" value="1" name="sex" id="man">
				        <i class="radio-in"></i>
				    </div>
					<label  title="">123132</label>
			  	</div>
				<div class="radio-group radio-inline">
				    <div class="radio">
				        <input type="radio" value="1" name="sex" id="feman">
				        <i class="radio-in"></i>
				    </div>
				    <label  title="">123132</label>
 				</div>


			    <!-- checkbox  checkbox-group -->
			    <br/>
                <br/>
			    <div class="checkbox-group">
				    <div class="checkbox">
				        <span class="checkbox-in">✓</span>
				        <input type="checkbox" name="x" value="1">
				    </div>
    				<label title="">123132</label>
 				</div>
				<div class="checkbox-group">
				    <div class="checkbox">
				        <span class="checkbox-in">✓</span>
				        <input type="checkbox" name="x" value="1">
				    </div>
				    <label title="">啊哈哈</label>
				</div>

			    <!-- checkbox checkbox-group checkbox-inline -->
			    <br/>
                <br/>
			    <div class="checkbox-group checkbox-inline">
				    <div class="checkbox">
				        <span class="checkbox-in">✓</span>
				        <input type="checkbox" name="x" value="1">
				    </div>
    				<label title="">123132</label>
 				</div>
				<div class="checkbox-group checkbox-inline">
				    <div class="checkbox">
				        <span class="checkbox-in">✓</span>
				        <input type="checkbox" name="x" value="1">
				    </div>
				    <label title="">啊哈哈</label>
				</div>


				<!-- switch-group -->
				<br/>
                <br/>
                <div class="switch-group">
					<div class="switch">
				        <i class="switch-in"></i>
				        <span class="switch-hori"></span>
				        <input type="checkbox" value="1" id="switch-input" checked="checked">
				        <div>开关</div>
				    </div>
				</div>


				<!-- switch-inline -->
				<br/>
                <br/>
				<div class="switch-inline">
					<div class="switch">
				        <i class="switch-in"></i>
				        <span class="switch-hori"></span>
				        <input type="checkbox" value="1" id="switch-input" checked="checked">
				    </div>
					<label title="">啊哈哈hahaha</label>
				</div>


				<!-- fileup -->
				<br/>
                <br/>
			    <div class="fileup-container">
			        <div class="fileup">
			            <label for="input-file" class="fileup-in ui-btn">点击选择</label>
			            <input type="file" id="input-file">
			        </div>
			        <img src="" alt="">
			    </div>


				<!-- textarea -->
				<br/>
				<br/>
				<textarea name="" class="textarea"  ></textarea>

				<!-- textarea disabled -->
				<br/>
				<br/>
				<textarea name="" class="textarea" disabled="disabled" >禁止输入</textarea>


				<!-- select   这里的jq有bug，还没有修复-->
				<br/>
				<br/>
				<div class="select">
				    <div class="select-tri-t tri-t" ></div>
				    <div class="select-tri-b tri-b" ></div>
				    <label class="select-in"></label>
				    <select class="select-change" name="test" >
				        <option value="1">1111111</option>
				        <option value="2">22222</option>
				        <option value="3">33333</option>
				    </select>
				</div>


				<!-- btn -->
            	<br/>
                <br/>
                <div class="">
                    <input type="submit" class="ui-btn ui-btn-medium"  value="绑定信息">
                </div>
            </form>
        </div>


	<!-- 登录  样例    运用  m16 / ta-c -->
	<div class="ui-grid-container">
		<div class="paper m16 p16">
			<input type="text" name="user_name" id="user_name" class="input-normal" maxlength="15" placeholder="输入你的姓名" autofocus >
			<br/>
			<input class="laydate-icon input-normal mt8" style="" onclick="laydate()" placeholder="选择日期">
			<br/>
			<div class="ta-c">
				<div class="ui-btn ui-btn-large ui-btn-r mt16 mr8">确认</div>
				<div class="ui-btn ui-btn-large ui-btn-g mt16">取消</div>
			</div>
		</div>
   </div>


    <script>

			/*------------
			    radio
			------------*/

			$(".radio-group").click(function() {
			    $(this).addClass("radio-toggle").siblings().removeClass("radio-toggle");
			});

			/*--------------
	            checkbox
	        --------------*/

	        $(".checkbox-group").click(function() {
	            $(this).children(".checkbox").toggleClass("checkbox-toggle");  //存在就移除，没有就增加
	            // console.log($(this).find("input").prop("checked"))
	        })


	        /*--------------
	            switch
	        --------------*/

	        $(".switch").click(function() {
	            $(this).toggleClass("switch-toggle");
	            // console.log($(this).children("input").prop("checked"))
	        })

	         /*-------------
            	file
	        -------------*/
	        $(".fileup-container").on({ //文件域发生改变时
	            change: function() {
	                var img_url = getImgUrl(this.files[0]);
	                // console.log("img~~~~~~~" + img_url);
	                if (img_url) {
	                    $(".fileup-container>img").attr({
	                        "src": img_url
	                    }).css({
	                        "display": "block"
	                    });
	                }
	            }
	        }, ".fileup>input");

	        function getImgUrl(file) {
	            var url = null;
	            if (window.createObjectURL != undefined) { // basic
	                url = window.createObjectURL(file);
	            } else if (window.URL != undefined) { // mozilla(firefox)
	                url = window.URL.createObjectURL(file);
	            } else if (window.webkitURL != undefined) { // webkit or chrome
	                url = window.webkitURL.createObjectURL(file);
	            }
	            return url;
	        }


	         /*-------------
            	select
            	.val()   value=
            	.html()   text=
            	$('.select-change').find("option:selected").next().val()
            	$("select[name='test']").find("option[value='1']").html()
	        -------------*/
	         //向下是失败
	         $(".select-tri-b").click(function(event) {
	         	var old = $('.select-change').find("option:selected");
	            if( $('.select-change').find("option:selected").next().html() != undefined){
	            	$('.select-change').find("option:selected").next().attr("selected", true);
	            	old.removeAttr("selected");
	            }
	        });

	         //向上是失败
	        $(".select-tri-t").click(function(event) {
	         	var old = $('.select-change').find("option:selected");
	         	var id = old.attr("value") - 1;
	         	var newT = $("select[name='test']").attr("selected");
	         	console.log(newT.html());
	            if( newT.html() != undefined){
	            	$("select[name='test']").find("option[value='id']").attr("selected", true);
	            	old.removeAttr("selected");
	            }
	        });
    </script>
</body>
</html>