root
/
f1-jxyh-php-8525


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按钮组件</title>
		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
	</head>
	<body class="pear-container">
		<div class="layui-row layui-col-space10">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-header">
						开发环境 
					</div>
					<div class="layui-card-body">
						Pear Button 参考 Element UI 样式 ，提供 Button 服务
					</div>
				</div>
			</div>
			<div class="layui-col-md12">
				<div class="layui-collapse">
					<div class="layui-colla-item">
						<h2 class="layui-colla-title">显示代码</h2>
						<div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								&lt;link rel="stylesheet" href="component/pear/css/pear.css" />
								或
								&lt;link rel="stylesheet" href="component/pear/css/pear-module/button.css" />
							</pre>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-header">
						简单使用
					</div>
					<div class="layui-card-body">
						<button class="pear-btn">Default Button</button>&nbsp;&nbsp;
						<button class="pear-btn pear-btn-primary">Primary Button</button>&nbsp;&nbsp;
						<br>
						<br>
						<button class="pear-btn pear-btn-primary"> Button-Primary</button>&nbsp;&nbsp;
						<button class="pear-btn pear-btn-success"> Button-Success</button>&nbsp;&nbsp;
						<button class="pear-btn pear-btn-danger"> Button-danger</button>&nbsp;&nbsp;
					</div>
				</div>
			</div>
			<div class="layui-col-md12">
				<div class="layui-collapse">
					<div class="layui-colla-item">
						<h2 class="layui-colla-title">显示代码</h2>
						<div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								<button class="pear-btn"> Default Button </button>
								<button class="pear-btn" dashed> Dashed Button </button>
								<button class="pear-btn pear-btn-primary"> Primary Button </button>							
								<button class="pear-btn pear-btn-primary"> Button-Primary </button>
								<button class="pear-btn pear-btn-success"> Button-Success </button>
							</pre>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-header">
						简约样式
					</div>
					<div class="layui-card-body">
						<button plain class="pear-btn pear-btn-primary"> Button-Primary</button>&nbsp;&nbsp;
						<button plain class="pear-btn pear-btn-success"> Button-Success</button>&nbsp;&nbsp;
						<button plain class="pear-btn pear-btn-danger"> Button-Danger</button>&nbsp;&nbsp;
						<button plain class="pear-btn pear-btn-warming"> Button-Warming</button>&nbsp;&nbsp;
					</div>
				</div>
			</div>
			<div class="layui-col-md12">
				<div class="layui-collapse">
					<div class="layui-colla-item">
						<h2 class="layui-colla-title">显示代码</h2>
						<div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								<button class="pear-btn"> Default Button </button>
								<button class="pear-btn" dashed> Dashed Button </button>
								<button class="pear-btn pear-btn-primary"> Primary Button </button>							
								<button class="pear-btn pear-btn-primary"> Button-Primary </button>
								<button class="pear-btn pear-btn-success"> Button-Success </button>
							</pre>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-header">
						按钮大小
					</div>
					<div class="layui-card-body">
						<button class="pear-btn pear-btn-primary pear-btn-lg"> Button-Lg</button>&nbsp;&nbsp;
						<button class="pear-btn pear-btn-primary"> Button-Default</button>&nbsp;&nbsp;
						<button class="pear-btn pear-btn-primary pear-btn-sm"> Button-Sm</button>&nbsp;&nbsp;
						<button class="pear-btn pear-btn-primary pear-btn-xs"> Button-Xs</button>&nbsp;&nbsp;
						<br>
						<br>
						<button class="pear-btn pear-btn-warming pear-btn-lg"> Button-Lg</button>&nbsp;&nbsp;
						<button class="pear-btn pear-btn-warming"> Button-Default</button>&nbsp;&nbsp;
						<button class="pear-btn pear-btn-warming pear-btn-sm"> Button-Sm</button>&nbsp;&nbsp;
						<button class="pear-btn pear-btn-warming pear-btn-xs"> Button-Xs</button>&nbsp;&nbsp;
					</div>
				</div>
			</div>
			<div class="layui-col-md12">
				<div class="layui-collapse">
					<div class="layui-colla-item">
						<h2 class="layui-colla-title">显示代码</h2>
						<div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								<button class="pear-btn pear-btn-primary pear-btn-lg"> Button-Lg </button>&nbsp;&nbsp;
								<button class="pear-btn pear-btn-primary"> Button-Default </button>&nbsp;&nbsp;
								<button class="pear-btn pear-btn-primary pear-btn-sm"> Button-Sm </button>&nbsp;&nbsp;
								<button class="pear-btn pear-btn-primary pear-btn-xs"> Button-Xs </button>&nbsp;&nbsp;
							</pre>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="layui-row layui-col-space10">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-header">
						按钮组
					</div>
					<div class="layui-card-body">
						<div class="pear-btn-group">
							<button class="pear-btn pear-btn-primary" round> Button-One</button>
							<button class="pear-btn pear-btn-primary" round> Button-Two</button>
							<button class="pear-btn pear-btn-primary" round> Button-Three</button>
						</div>
						<br>
						<br>
						<div class="pear-btn-group">
							<button class="pear-btn"> Button-One </button>
							<button class="pear-btn"> Button-Two </button>
							<button class="pear-btn"> Button-Three </button>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-md12">
				<div class="layui-collapse">
					<div class="layui-colla-item">
						<h2 class="layui-colla-title">显示代码</h2>
						<div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								<div class="pear-btn-group">
								    <button class="pear-btn"> Button-One </button>
								    <button class="pear-btn"> Button-Two </button>
								    <button class="pear-btn"> Button-Three </button>
								</div>
							</pre>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-header">
						Load 自动
					</div>
					<div class="layui-card-body">
						<button class="pear-btn pear-btn-primary" load> 加载 600 ms </button>
					</div>
				</div>
			</div>
			<div class="layui-col-md12">
				<div class="layui-collapse">
					<div class="layui-colla-item">
						<h2 class="layui-colla-title">显示代码</h2>
						<div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								layui.use(["button"], function() {
								    var button = layui.button;
								    
									button.load({
								        elem:'[load]',
								        time: 600,
								        done: function(){
									        popup.success("加载完成");
								        }
								    })
								})
							</pre>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-header">
						Load 手动
					</div>
					<div class="layui-card-body">

						<button class="pear-btn pear-btn-primary" loading> 开始 </button>

						<button class="pear-btn pear-btn-danger" stop> 停止 </button>
					</div>
				</div>
			</div>
			<div class="layui-col-md12">
				<div class="layui-collapse">
					<div class="layui-colla-item">
						<h2 class="layui-colla-title">显示代码</h2>
						<div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								layui.use(["button"], function() {
								    var button = layui.button;
								    
									var dom = button.load({
								        elem:'[load]',
								    })
									
								    dom.stop(function() {
								        popup.failure("已停止");
								    });
								})
							</pre>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-header">
						本页跳转
					</div>
					<div class="layui-card-body">
						<button class="pear-btn pear-btn-primary" to> 本页跳转 </button>
					</div>
				</div>
			</div>
			<div class="layui-col-md12">
				<div class="layui-collapse">
					<div class="layui-colla-item">
						<h2 class="layui-colla-title">显示代码</h2>
						<div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								layui.use(["jquery"], function() {
								    var $ = layui.jquery;
								    
								    $("[to]").click(function(){
								        top.layui.frame.changePageByElement("content","http://www.baidu.com","百度一下",true)
								    })
								})
							</pre>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/pear/pear.js"></script>
		<script>
			layui.use(['element', 'code', 'jquery', "button", "popup"], function() {
				var element = layui.element;
				var $ = layui.jquery;
				var popup = layui.popup;
				var button = layui.button;
				
				layui.code();
				
				$("[load]").click(function() {
					button.load({
						elem: '[load]',
						time: 600,
						done: function() {
							popup.success("加载完成");
						}
					})
				})

				var dom;

				$("[loading]").click(function() {
					dom = button.load({
						elem: '[loading]'
					})
				})

				$("[stop]").click(function() {
					dom.stop(function() {
						popup.failure("已停止");
					});
				})
				
				$("[to]").click(function(){
					top.layui.admin.jump(14,"百度一下","http://www.bing.com",true)
				})
			})
		</script>
	</body>
</html>