Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to use layui to achieve step bar panel", the content is easy to understand, clear, hope to help you solve your doubts, the following let Xiaobian lead you to study and learn "how to use layui to achieve step bar panel" this article.

Layui (homophonic: quasi-UI) is a front-end UI framework written by its own module specification, which follows the writing and organization form of native HTML/CSS/JS.

Html element

Item 1 entry 2 entry 3 entry 4 first step previous step next step last step to the second step disable the third step lift the third step

Js reference

Layui.use (['jquery','step'], function () {var $= layui.jquery; var step = layui.step Step.render ({elem: '.layui-step', / / title: ["first step", "second step", "third step", "fourth step"], description: ["aaa", "bbb", "ccc", "ddd"], currentStep: 1, / / canIconClick: true, isOpenStepLevel: true}) $(".goFirst") .on ("click", function () {step.goFirst ()}) $(".prev") .on ("click", function () {step.prev ();}) $(".next") .on ("click", function () {step.next () }) $(".golast") .on ("click", function () {step.goLast ();}) $(".goStep") .on ("click", function () {step.goStep (2);}) $(".blank") .on ("click", function () {step.disabled (3)) ) $(".abled") .on ("click", function () {step.abled (3);})})

Description

1. Each .layui-step-content-item represents a tab page, and the default minimum height is full screen.

2. The press-torsion area is suspended and fixed in the lower right corner by default, which can be set by itself, and the number of internal buttons can be customized.

3. Button disabled and unbanned position (I) must be after the current number of steps, that is, when disabled, the position should not have been reached

Step.render () parameter description

1. Elem: outer container

2. Title: text description at the bottom of the step bar. The type is array, which can be omitted. Default is ["first step", "second step", "third step", "."]

3. CurrentStep: which step is the initial step, which can be omitted. Default is the first step.

4. CanIconClick: whether the above step bar can be clicked or omitted. Default is false.

5. Description: descriptive text at the bottom of the step bar. Type is array, which can be omitted.

6. IsOpenStepLevel: whether to strictly follow the order of the steps, that is, the steps that have not been taken cannot be clicked, and the doable steps that have been taken can be omitted. If enabled, the default canIconClick field is disabled.

Description of functions that can be used externally

1. Render (): initial rendering interface

2. GoStep (I): skip to which step

3. GoFirst (): skip to step 1

4. GoLast (): skip to the last step

5. Prev (): skip to the previous step

6. Next (): skip to the next step

7. Disabled (I): disable a step

8. Abled (I): remove the prohibition of a certain step

Description of externally available variables

1. CurrentStep: how many steps is it to get the current

The above is all the contents of the article "how to use layui to implement the step bar panel". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.