layui frame (pop-up layer and rotation)

A pop-up layer
module is loaded Name: layer;
since the layer can be used independently, can also be used by Layui modular.
layer Download: HTTP: //layer.layui.com/
1, used as a standalone component layerlayui

<!--引入好layer.js后，直接用即可-->
<script src="layer.js"></script>
<script>
layer.msg('hello'); 
</script>

2, the use of the layer in layui

<script>
layui.use('layer', function(){
  var layer = layui.layer;
  
  layer.msg('hello');
}); 
</script>

3, a method using the popup attribute
type - type base layer
layer layer provides five types
can be passed values are:
0 (block information, default)
1 (page layers)
2 (iframes layer)
3 (loading layer)
4 (Tips layer)
If you use layer.open ({type: 1}) call mode, then the type is required (except for the information block).

List of basic parameters:

offset default settings without the case. But if you do not want to vertically centered horizontally, you can make the following assignment:

List of built-in methods:

code shows:

html code:

<div>
			<button class="layui-btn" id="btn1">信息框</button>
			<button class="layui-btn" id="btn2">页面层</button>
			<button class="layui-btn" id="btn3">iframe层</button>
			<button class="layui-btn" id="btn4">加载层</button>
			<button class="layui-btn" id="btn5">tips层</button>
			<button class="layui-btn" id="btn6">输入层</button>
			<button class="layui-btn" id="btn7">选项卡</button>
		</div>

js code:

<script>
			layui.use(["element", "layer"], function() {
				var element = layui.element,
					$ = layui.jquery,
					layer = layui.layer;

				$("#btn1").on("click", function() {
					layer.open({
						type: 0,
						content: "cmascni",
						shade: 0.3
					});
				});

				$("#btn2").on("click", function() {
					layer.open({
						type: 1,
						content: "cmascni",
						shade: 0.3,
						area: ["300px", "200px"],
						btn: ["确认"],
						btnAlign: "c"
					});
				});

				$("#btn3").on("click", function() {
					layer.open({
						type: 2,
						content: "http://baidu.com",
						shade: 0.3,
						area: ["1000px", "500px"],
						btn: ["确认", "关闭"],
						btnAlign: "c",
						anim: 2
					});
				});

				$("#btn4").on("click", function() {
					layer.open({
						type: 3,
						content: "cmascni",
						shade: 0.3,
						time: 1000,
					});
				});

				$("#btn5").on("click", function() {
					layer.tips('Hi，我是一个小提示', this, {
						tips: 1
					});
				});

				$("#btn6").on("click", function() {
					layer.prompt({
							title: "输入口令",
							formType: 1
						},
						function(pass, index) {
							layer.close(index);
							layer.prompt({
									title: "输入你想要说的，并确认",
									formType: 2
								},
								function(text, index) {
									layer.close(index);
									layer.msg("口令：" + pass + "<br/>留言：" + text);
								});
						});
				});

				$("#btn7").on("click", function() {
					layer.tab({
						area: ["500px", "400px"],
						tab: [{
							title: "标题一",
							content: "内容1",
						}, {
							title: "标题二",
							content: "内容2",
						}, {
							title: "标题三",
							content: "内容3",
						}],
					});
				});

				layer.photos({
					photos: "#layer-photos-demo",
					anim:3
				});

				//				layer.msg("Hello World！");
			});
		</script>

Second, the carousel
conventional rotation renderings:

In the HTML structure, simply pay attention to these two:

1. The outer element class = "layui-carousel" container is used to identify a multicast wheel
2. The inner element is used to identify attributes carousel-item entry.

By core methods: carousel.render (options) to set the basic parameters for sowing wheel, or by methods: carousel.set (options) to set a global basis parameters.

Options Table basic parameters:

html code:

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			<legend>常规轮播</legend>
		</fieldset>

		<div class="layui-carousel" id="test1" lay-filter="test1">
			<div carousel-item="">
				<div style="background-color: #00F7DE;"></div>
				<div style="background-color: #FFFF00"></div>
				<div style="background-color: #FF5722"></div>
				<div style="background-color: #FF00FF"></div>
				<div style="background-color: aqua"></div>
			</div>
		</div>

js code:

<script>
			layui.use(["carousel", "form"], function() {
				var carousel = layui.carousel,
					form = layui.form;

				//常规轮播
				carousel.render({
					elem: '#test1',
					arrow: 'always',
					interval: 2000,
					autoplay:true,
					anim: 'fade',
					arrow:"hover",
					width:"80%",
				});	
			});
		</script>