root
/
f1-jxyh-php-8525


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>加载组件</title>
		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
		<style>
			.load-div {
				width: 100%;
				height: 300px;
				background-color: lightgray;
				border-radius: 10px;
				margin-top: 10px;
			}
		</style>
	</head>
	<body class="pear-container">
		<div class="layui-card">
			<div class="layui-card-header">加载组件</div>
			<div class="layui-card-body">
				<div>
					<span>loading.Load(1,message);</span>
					<br>
					<br>
					<span>loading.Load(2,message);</span>
					<br>
					<br>
					<span>loading.Load(3,message);</span>
					<br>
					<br>
					<span>loading.Load(4,message);</span>
					<br>
					<br>
					<span>loading.Load(5,message);</span>
					<br>
					<br>
					<span>loading.remove(time);</span>
					<br>
					<br>
				</div>
				<button class="loading-1 pear-btn pear-btn-primary" plain>加载</button>
				<button class="loading-2 pear-btn pear-btn-success" plain>加载</button>
				<button class="loading-3 pear-btn pear-btn-danger" plain>加载</button>
				<button class="loading-4 pear-btn pear-btn-warming" plain>加载</button>
				<button class="loading-5 pear-btn">加载</button>
			</div>
		</div>

		<div class="layui-card">
			<div class="layui-card-header">加载组件</div>
			<div class="layui-card-body">
				<button class="block-5 pear-btn">加载</button>

				<button class="block-4 pear-btn">加载</button>

				<button class="block-3 pear-btn">加载</button>

				<button class="block-2 pear-btn">加载</button>
				<button class="block-1 pear-btn">加载</button>
				<div class="load-div load-div-1"></div>

			</div>
		</div>

		<div class="layer-right">

		</div>

		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/pear/pear.js"></script>
		<script>
			layui.use(['element', 'jquery', 'loading', 'code'], function() {
				var element = layui.element;
				var $ = layui.jquery;
				var loading = layui.loading;

				var msg =
					'"Do not try to become a person of success but try to become a person of value." <br><br>- Albert Einstein'


				$(".loading-1").click(function() {

					loading.Load(1, "");

					loading.loadRemove(1000);
				})

				$(".loading-2").click(function() {

					loading.Load(2, "");

					loading.loadRemove(1000);
				})

				$(".loading-3").click(function() {

					loading.Load(3, "");

					loading.loadRemove(1000);
				})

				$(".loading-4").click(function() {

					loading.Load(4, "");

					loading.loadRemove(1000);
				})

				$(".loading-5").click(function() {

					loading.Load(5, "");

					loading.loadRemove(1000);
				})

				$(".block-1").click(function() {

					loading.block({
						type: 1,
						elem: '.load-div-1',
						msg: '加载中'
					})
					loading.blockRemove(".load-div-1", 1000);
				})

				$(".block-2").click(function() {
					loading.block({
						type: 2,
						elem: '.load-div-1',
						msg: ''
					})
					loading.blockRemove(".load-div-1", 1000);
				})

				$(".block-3").click(function() {
					loading.block({
						type: 3,
						elem: '.load-div-1',
						msg: ''
					})
					loading.blockRemove(".load-div-1", 1000);
				})

				$(".block-4").click(function() {
					loading.block({
						type: 4,
						elem: '.load-div-1',
						msg: ''
					})
					loading.blockRemove(".load-div-1", 1000);
				})

				$(".block-5").click(function() {
					loading.block({
						type: 5,
						elem: '.load-div-1',
						msg: ''
					})
					loading.blockRemove(".load-div-1", 1000);
				})

				$(".block-6").click(function() {
					loading.block({
						type: 6,
						elem: '.load-div-1',
						msg: ''
					})
					loading.blockRemove(".load-div-1", 1000);
				})
			})
		</script>
	</body>
</html>