Layui

https://layui.dev/docs/
Admin
Layui is a free and open-source Web UI component library that follows a lightweight modular...
Tokens:439,562
Snippets:2,042
Trust Score:8.7
Update:1 day ago
Show doc for...
Tokens:
Raw
### Basic Input and Textarea Example

Source: https://layui.dev/docs/2/form/input.html

Shows a basic text input and a textarea wrapped in a layui-form container. Use this as the starting point for standard form fields.

```html
<div class="layui-form">
  <input type="text" name="" placeholder="文本框" class="layui-input">
  <hr class="ws-space-16">
  <textarea name="" placeholder="多行文本框" class="layui-textarea"></textarea>
</div>
```

--------------------------------

### Number input affix example

Source: https://layui.dev/docs/2/form/input.html

HTML example showing various number input configurations using lay-affix="number", including step, min, max, lay-step-strictly, lay-precision, readonly, and disabled states. Requires layui import.

```html
  <div class="layui-form">
  <input type="number" lay-affix="number" placeholder="" value="0" class="layui-input">
  <hr class="ws-space-16">
  <div class="layui-row layui-col-space16">
    <div class="layui-col-xs6">
      <input type="text" lay-affix="number" placeholder="设置 step 为 0.01" step="0.01" class="layui-input">
    </div>
    <div class="layui-col-xs6">
      <input type="text" lay-affix="number" placeholder="设置 step,min,max" step="10" min="0" max="100" class="layui-input">
    </div>
    <div class="layui-col-xs6">
      <input type="text" lay-affix="number" placeholder="步长严格模式" lay-step-strictly step="10" min="0" max="100" class="layui-input">
    </div>
    <div class="layui-col-xs4">
      <input type="text" lay-affix="number" placeholder="设置小数位精度为 2" step="0.1" lay-precision="2" class="layui-input">
    </div>
    <div class="layui-col-xs4">
      <input type="text" lay-affix="number" readonly placeholder="不允许输入状态" class="layui-input">
    </div>
    <div class="layui-col-xs4">
      <input type="text" lay-affix="number" disabled placeholder="禁用状态" class="layui-input">
    </div>
  </div>
</div> 
<!-- import layui -->
```

--------------------------------

### Basic Progress Bar Example

Source: https://layui.dev/docs/2/progress

Shows a basic progress bar with a default width of 100% of its parent container. The example includes a progress bar at 30% and another at 50% inside a 300px wide container.

```html
<div class="layui-progress">
  <div class="layui-progress-bar" lay-percent="30%"></div>
</div>
 
<hr class="ws-space-16">
 
<div style="width:300px">
  <div class="layui-progress">
    <div class="layui-progress-bar" lay-percent="50%"></div>
  </div>
</div>
<!-- import layui -->
```

--------------------------------

### Complete Prefix and Suffix Examples

Source: https://layui.dev/docs/2/form/input.html

Multiple complete examples of input groups with prefix and suffix content, including split dividers, buttons, icons, and variations without split dividers. Demonstrates flexible layouts for form items.

```html
<div class="layui-form">
  <div class="layui-form-item">    
    <div class="layui-input-group">
      <div class="layui-input-split layui-input-prefix">
        身高
      </div>
      <input type="text" placeholder="带任意前置和后置内容" class="layui-input">
      <div class="layui-input-split layui-input-suffix">
        cm
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-group">
      <div class="layui-input-split layui-input-prefix">
        手机号
      </div>
      <input type="text" placeholder="带任意前置和后置内容" class="layui-input">
      <div class="layui-input-suffix">
        <button class="layui-btn layui-btn-primary">一个按钮</button>
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-group">
      <div class="layui-input-split layui-input-prefix">
        用户名
      </div>
      <input type="text" placeholder="带任意前置内容" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-group">
      <input type="text" placeholder="带任意后置内容" class="layui-input">
      <div class="layui-input-split layui-input-suffix" style="cursor: pointer;">
        <i class="layui-icon layui-icon-search"></i>
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-group">
      <div class="layui-input-prefix">
        搜索
      </div>
      <input type="text" placeholder="带任意前置和后置内容" class="layui-input">
      <div class="layui-input-split layui-input-suffix" style="cursor: pointer;">
        <i class="layui-icon layui-icon-search"></i>
      </div>
    </div>
  </div>
  <hr style="margin: 32px 0;">
  <div class="layui-form-item">
    <div class="layui-input-group">
      <div class="layui-input-prefix">
        身高
      </div>
      <input type="text" placeholder="前置和后置无分割框" class="layui-input">
      <div class="layui-input-suffix">
        cm
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-group">
      <div class="layui-input-prefix">
        昵称
      </div>
      <input type="text" placeholder="带前置且无分割框" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-group">
      <input type="text" placeholder="带后置且无分割框" class="layui-input">
      <div class="layui-input-suffix">
        <i class="layui-icon layui-icon-tips"></i> 任意后置内容
      </div>
    </div>
  </div>
</div>
```

--------------------------------

### Example of input prefix and suffix variations

Source: https://layui.dev/docs/2/form/input.html

A comprehensive example showing multiple input fields with prefixes, suffixes, and split dividers (layui-input-split). Includes a select element inside a prefix. Note the warning: do not confuse '前置和后置' with '前缀和后缀'.

```html
  <div class="layui-form">
  <div class="layui-row layui-col-space16">
    <div class="layui-col-md4">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-username"></i>
        </div>
        <input type="text" placeholder="带前缀" class="layui-input">
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="layui-input-wrap">
        <input type="text" placeholder="带后缀" class="layui-input">
        <div class="layui-input-suffix">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </div>
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-date"></i>
        </div>
        <input type="text" placeholder="带前缀和后缀" class="layui-input">
        <div class="layui-input-suffix">
          <i class="layui-icon layui-icon-down"></i>
        </div>
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix layui-input-split">
          <i class="layui-icon layui-icon-password"></i>
        </div>
        <input type="password" placeholder="带前缀加分隔框" class="layui-input">
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="layui-input-wrap">
        <input type="text" placeholder="带后缀加分隔框" class="layui-input">
        <div class="layui-input-suffix layui-input-split">
          <i class="layui-icon layui-icon-down"></i>
        </div>
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix layui-input-split">
          <i class="layui-icon layui-icon-date"></i>
        </div>
        <input type="text" placeholder="带前缀和后缀加分割框" class="layui-input">
        <div class="layui-input-suffix layui-input-split">
          <i class="layui-icon layui-icon-down"></i>
        </div>
      </div>
    </div>
    <div class="layui-col-md6">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-location"></i>
        </div>
        <input type="text" placeholder="带前缀无分割框和后缀有分割框" class="layui-input">
        <div class="layui-input-suffix layui-input-split">
          <i class="layui-icon layui-icon-edit"></i>
        </div>
      </div>
    </div>
    <div class="layui-col-md6">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix layui-input-split">
          <i class="layui-icon layui-icon-location"></i>
        </div>
        <input type="text" placeholder="带前缀有分割框和后缀无分割框" class="layui-input">
        <div class="layui-input-suffix">
          <i class="layui-icon layui-icon-edit"></i>
        </div>
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-form"></i>
        </div>
        <select>
          <option value="">放置 select 元素</option>
          <option value="北京">北京</option>
          <option value="上海">上海</option>
          <option value="广州">广州</option>
          <option value="深圳">深圳</option>
        </select>
      </div>
    </div>
  </div>
</div>
<!-- import layui -->
```

--------------------------------

### Show Percentage Value Example

Source: https://layui.dev/docs/2/progress

Demonstrates how to display the percentage value on the progress bar by setting 'lay-showpercent="true"' on the container. Includes examples with percentage and fraction values, and a large progress bar.

```html
<div class="layui-progress" lay-showpercent="true">
  <div class="layui-progress-bar" lay-percent="30%"></div>
</div>
 
<hr class="ws-space-16">
 
<div class="layui-progress" lay-showpercent="true">
  <div class="layui-progress-bar" lay-percent="5 / 10"></div>
</div>
 
<hr class="ws-space-16">
 
<div class="layui-progress layui-progress-big" lay-showpercent="true">
  <div class="layui-progress-bar" lay-percent="70%"></div>
</div>
<!-- import layui -->
```

--------------------------------

### beforeInit callback example

Source: https://layui.dev/docs/2/component/index.html

Callback executed before component initialization. Receives the options object and logs it to the console.

```javascript
beforeInit: function(options) {
  console.log(options); // 获得组件初始化前的配置项
}
```

--------------------------------

### Slider change callback example

Source: https://layui.dev/docs/2/slider

Shows how to use the change callback to get the current slider value when it changes.

```javascript
slider.render({
  elem: '#id',
  change: function(value){
    console.log(value) // 滑块当前值
    // do something
  }
});
```

--------------------------------

### Manual Loading Example (flow.load with isAuto: false and isLazyimg: true)

Source: https://layui.dev/docs/2/flow

Configures a flow.load instance with isAuto: false to require manual triggering of loading, and enables lazy image loading with isLazyimg: true. The done callback simulates inserting list items with lazy-loaded images and calls next() with the HTML and a boolean indicating more pages (page < 6).

```html
  <div class="flow-demo" id="ID-flow-demo-manual"></div>
<!-- import layui --> 
<script>
layui.use(function(){
  var flow = layui.flow;
  // 流加载实例
  flow.load({
    elem: '#ID-flow-demo-manual', // 流加载容器
    scrollElem: '#ID-flow-demo-manual', // 滚动条所在元素，一般不用填，此处只是演示需要。
    isAuto: false,
    isLazyimg: true,
    done: function(page, next){ // 加载下一页
      // 模拟插入
      setTimeout(function(){
        var lis = [];
        for(var i = 0; i < 6; i++){
          lis.push('<li><img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg?v='+ ( (page-1)*6 + i + 1 ) +'"></li>')
        }
        next(lis.join(''), page < 6); // 假设总页数为 6
      }, 520);
    }
  });
});
</script>
```

--------------------------------

### Slider done callback example

Source: https://layui.dev/docs/2/slider

Shows how to use the done callback to get the slider value after dragging is completed, which is recommended for async operations.

```javascript
slider.render({
  elem: '#id',
  done: function(value){
    console.log(value) // 滑块当前值
    // do something
  }
});
```

--------------------------------

### Scroll Loading Example (flow.load with isAuto default)

Source: https://layui.dev/docs/2/flow

Sets up a flow.load instance that automatically loads more content when the scroll container reaches the bottom. The done callback simulates an asynchronous data fetch and calls next() with the rendered HTML and a boolean indicating whether more pages exist (page < 10). The scrollElem is set to the container for demonstration purposes.

```html
  <div class="flow-demo" id="ID-flow-demo"></div>
<!-- import layui --> 
<script>
layui.use(function(){
  var flow = layui.flow;
  // 流加载实例
  flow.load({
    elem: '#ID-flow-demo', // 流加载容器
    scrollElem: '#ID-flow-demo', // 滚动条所在元素，一般不用填，此处只是演示需要。
    done: function(page, next){ // 执行下一页的回调
      // 模拟数据插入
      setTimeout(function(){
        var lis = [];
        for(var i = 0; i < 8; i++){
          lis.push('<li>'+ ( (page-1)*8 + i + 1 ) +'</li>')
        }
        
        // 执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
        // pages 为 Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
        next(lis.join(''), page < 10); // 此处假设总页数为 10
      }, 520);
    }
  });
});
</script>
```

--------------------------------

### Active validation with form.validate

Source: https://layui.dev/docs/2/form

Example of actively triggering validation on a specific element using form.validate('#validate-phone'). The method returns true if validation passes, false otherwise. This is used in a click handler for a 'get verification code' button.

```html
  <div class="layui-form">  
  <div class="layui-form-item">
    <label class="layui-form-label">手机</label>
    <div class="layui-input-block">
      <input type="tel" name="phone" lay-verify="required|phone" class="layui-input" id="validate-phone">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">验证码</label>
    <div class="layui-input-inline">
      <input type="text" name="vercode" lay-verify="required" class="layui-input">
    </div>
    <div class="layui-inline"> 
      <button type="button" class="layui-btn layui-btn-primary" id="validate-get-vercode">获取验证码</button>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="demo-validate">提交</button>
    </div>
  </div>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var $ = layui.$;
  var form = layui.form;
  var layer = layui.layer;
  
  // 点击获取验证码
  $('#validate-get-vercode').on('click', function(){
    var isValid = form.validate('#validate-phone');  // 主动触发验证，v2.7.0 新增 
    // 验证通过
    if(isValid){
      layer.msg('手机号规则验证通过');
      // 此处可继续书写「发送验证码」等后续逻辑
      // …
    }
  });
  // 提交事件
  form.on('submit(demo-validate)', function(data){
    var field = data.field; // 获取表单字段值
    // 显示填写结果，仅作演示用
    layer.alert(JSON.stringify(field), {
      title: '当前填写的字段值'
    });
    // 此处可执行 Ajax 等操作
    // …
    return false; // 阻止默认 form 跳转
  });
});
</script>
```

--------------------------------

### 设置 tips 层吸附位置和背景色

Source: https://layui.dev/docs/2/layer

在 layer.open 的 tips 属性中，使用数组形式设置吸附位置和背景色，例如 tips: [1, '#000'] 表示吸附在上方的深色贴士层。

```javascript
tips: [1, '#000'] // 吸附在上的深色贴士层
```

--------------------------------

### util.escape and util.unescape examples

Source: https://layui.dev/docs/2/util

Examples of escaping and unescaping HTML characters.

```javascript
var str1 = util.escape('<div>123</div>'); // 返回： &lt;div&gt;123&lt;/div&gt;
var str2 = util.unescape('&lt;div&gt;123&lt;/div&gt;'); // 返回： <div>123</div>
```

--------------------------------

### before callback example

Source: https://layui.dev/docs/2/table

Shows how to use the 'before' callback (2.7+) to modify options before data rendering.

```javascript
table.render({
  before: function(options){
    console.log(options); // 当前实例属性选项
    options.where.abc = 123; // 修改或额外追加 where 属性
  },
  // …  // 其它属性
});
```

--------------------------------

### util.digit examples

Source: https://layui.dev/docs/2/util

Examples of util.digit padding numbers with leading zeros.

```javascript
var rs1 = util.digit(6, 2); // "06"
var rs2 = util.digit(7, 3); // "007"
```

--------------------------------

### layer.tips(content, elem, options)

Source: https://layui.dev/docs/2/layer

该方法用于弹出 tips 类型贴士层（type: 4），默认 3 秒后自动关闭。参数 content 为弹出内容，elem 为吸附的目标元素选择器或对象，options 为基础属性选项。

```APIDOC
## layer.tips(content, elem, options)

### Description
弹出 tips 类型贴士层（type: 4），默认 3 秒后自动关闭。

### Method
layer.tips

### Parameters
- **content** (string) - Required - 弹出内容
- **elem** (string/object) - Required - 吸附的目标元素选择器或对象
- **options** (object) - Optional - 基础属性选项，详见基础属性文档

### Request Example
```javascript
// eg1
layer.tips('小贴士', '#id');
// eg2
$('#id').on('click', function(){
  var elem = this;
  layer.tips('小贴士', elem); //在元素的事件回调体中，follow直接赋予this即可
});
// eg3
layer.tips('显示在目标元素上方', '#id', {
  tips: 1 // 支持 1-4 可选值，更多详见基础属性中的 tips 介绍
});
```

### Response
无返回值。
```

--------------------------------

### util.toDateString examples

Source: https://layui.dev/docs/2/util

Examples of util.toDateString with different formats and customMeridiem option (2.8.13+).

```javascript
var result = util.toDateString(1672531200000, 'yyyy-MM-dd'); // 2023-01-01
// 中括号中的字符会原样保留 2.8.13+
var result2 = util.toDateString(new Date('2023-01-01 11:35:25'), 'ss[s]'); // 25s
// 自定义 meridiem
var result3 = util.toDateString(
  '2023-01-01 11:35:25',
  'hh:mm:ss A',
  {
    customMeridiem: function(hours, minutes){
      return (hours < 12 ? 'AM' : 'PM')
        //.split('').join('.') // 有句点，A.M.
        //.toLowerCase() // 小写，a.m.
    }
  }
); // 11:35:25 AM
```

--------------------------------

### util.openWin examples

Source: https://layui.dev/docs/2/util

Examples of opening a URL and a custom content window using util.openWin.

```javascript
// 打开一个 url
util.openWin({
  url: 'https://cn.bing.com'
});
// 打开一个自定义内容窗口
util.openWin({
  content: 'Hello World.'
});
```

--------------------------------

### Create template instance with options

Source: https://layui.dev/docs/2/laytpl

Shows how to set the tagStyle option to 'modern' when creating a template instance, and render data.

```javascript
// 创建模板实例
var templateInst = laytpl(`
  {{ let role = d.role || '全栈开发者'; }}
  {{= d.name }}是一名{{= role }}
`, {
  tagStyle: 'modern' // 采用新版本的标签风格
});
var html = templateInst.render({ name: '张三' });
```

--------------------------------

### Ignore tag example

Source: https://layui.dev/docs/2/laytpl

Example showing the ignore tag that prevents template tags inside from being parsed.

```javascript
 {{! 这里面的 {{= escape }} 等模板标签不会被解析  !}}
```

--------------------------------

### Old version scriptlet tag example

Source: https://layui.dev/docs/2/laytpl

Example of the old version (pre-2.11) scriptlet tag for flow control.

```javascript
{{# if (d.title) { }}
 标题：{{= d.title }}
{{# } else { }}
 默认标题
{{# } }}
```

--------------------------------

### util.countdown usage example

Source: https://layui.dev/docs/2/util

Example of using util.countdown with options, including clock and done callbacks. Requires layui.use('util').

```javascript
layui.use('util', function(){
  var util = layui.util;
  // 示例
  util.countdown({
    date: '2099-1-1', // 目标时间值
    now: new Date(), // 当前时间，一般为服务器时间，此处以本地时间为例
    clock: function(obj, countdown){ // 计时中
      console.log(obj); // 得到当前计时器的「天、时、分、秒」值
      console.log(countdown); // 得到当前实例对象
    },
    done: function(obj, countdown){ // 计时完成
      console.log('time is up');
    }
  });
});
```

--------------------------------

### New version scriptlet tag example

Source: https://layui.dev/docs/2/laytpl

Example of the new version (2.11+) scriptlet tag for flow control, requires tagStyle: 'modern'.

```javascript
{{ if (d.title) { }}
 标题：{{= d.title }}
{{ } else { }}
 默认标题
{{ } }}
```

--------------------------------

### Create template instance and render different data

Source: https://layui.dev/docs/2/laytpl

Shows how to create a template instance once and render different data multiple times, using the render method with callback and without callback.

```javascript
var laytpl = layui.laytpl;
// 创建模板实例
var templateInst = laytpl('{{= d.name }}是一名{{= d.role }}');
// 数据渲染 1
templateInst.render({
  name: '张三',
  role: '全栈开发者'
}, function(html) {
  console.log(html); // 张三是一名全栈开发者
});
// 数据渲染 2
var html = templateInst.render({
  name: '王五',
  role: '架构师'
});
```

--------------------------------

### Progress Bar Themes Example

Source: https://layui.dev/docs/2/progress

Demonstrates different color themes for the progress bar using classes like 'layui-bg-red', 'layui-bg-orange', 'layui-bg-primary', and 'layui-bg-blue'. Each bar has a different percentage value.

```html
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-red" lay-percent="10%"></div>
</div>
 
<hr class="ws-space-16">
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-orange" lay-percent="30%"></div>
</div>
 
<hr class="ws-space-16">
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-primary" lay-percent="50%"></div>
</div>
 
<hr class="ws-space-16">
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-blue" lay-percent="60%"></div>
</div>
 
<hr class="ws-space-16">
 
<div class="layui-progress">
  <div class="layui-progress-bar" lay-percent="70%"></div>
</div>
<!-- import layui -->
```

--------------------------------

### iframe layer examples with parent-child interaction, video, overflow, and URL

Source: https://layui.dev/docs/2/layer

This snippet includes HTML buttons and a script that uses layui's util.on to handle events for opening iframe layers. It demonstrates four use cases: getting form values from an iframe, playing a video, disabling iframe scrollbars, and opening an arbitrary URL. The 'test-iframe-handle' event shows how to access the iframe window and its elements. The 'test-iframe-overflow' event uses an array content with 'no' to disable scrollbars.

```html
  <div class="layui-btn-container">
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-iframe-handle">
    iframe 的父子操作
    <span id="ID-test-iframe-mark"></span>
  </button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-iframe-video">弹出多媒体</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-iframe-overflow">禁止 iframe 滚动条</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-iframe-curl">弹出任意 URL 页面</button>
</div>
<!-- import layui -->
<script>
layui.use(function(){
  var $ = layui.$;
  var layer = layui.layer;
  var util = layui.util;
  // 事件
  util.on('lay-on', {
    'test-iframe-handle': function(){
      layer.open({
        type: 2,
        area: ['680px', '520px'],
        content: '/layer/test/iframe.html',
        // fixed: false, // 不固定
        maxmin: true,
        shadeClose: true,
        btn: ['获取表单值', '取消'],
        btnAlign: 'c',
        yes: function(index, layero){
          // 获取 iframe 的窗口对象
          var iframeWin =  window[layero.find('iframe')[0]['name']];
          var elemMark = iframeWin.$('#mark'); // 获得 iframe 中某个输入框元素
          var value = elemMark.val();
          if($.trim(value) === '') return elemMark.focus();
          // 显示获得的值
          layer.msg('获得 iframe 中的输入框标记值：'+ value);
        }
      });
    },
    'test-iframe-video': function(){
      layer.open({
        type: 2,
        title: false,
        area: ['630px', '360px'],
        shade: 0.8,
        closeBtn: 0,
        shadeClose: true,
        content: '//player.youku.com/embed/XMzI1NjQyMzkwNA==' // video 地址
      });
      layer.msg('点击遮罩区域可关闭');
    },
    'test-iframe-overflow': function(){
      layer.open({
        type: 2,
        area: ['360px', '500px'],
        skin: 'layui-layer-rim', // 加上边框
        content: ['/layer/test/1.html', 'no'] // 数组第二个成员设为 no 即屏蔽 iframe 滚动条
      });
    },
    'test-iframe-curl': function(){
      layer.open({
        type: 2,
        title: 'iframe 任意 URL',
        shadeClose: true,
        maxmin: true, //开启最大化最小化按钮
        area: ['900px', '600px'],
        content: 'https://dashi.aliyun.com/activity/aigc?userCode=ap0255is'
      });
    }
  })
});
</script>
```

--------------------------------

### Large Progress Bar Example

Source: https://layui.dev/docs/2/progress

Shows how to create a large progress bar by adding the 'layui-progress-big' class to the container. Includes examples with different colors and percentages.

```html
<div class="layui-progress layui-progress-big">
  <div class="layui-progress-bar" lay-percent="15%"></div>
</div>
 
<hr class="ws-space-16">
 
<div class="layui-progress layui-progress-big">
  <div class="layui-progress-bar layui-bg-orange" lay-percent="35%"></div>
</div>
 
<hr class="ws-space-16">
 
<div class="layui-progress layui-progress-big">
  <div class="layui-progress-bar layui-bg-blue" lay-percent="75%"></div>
</div>
<!-- import layui -->
```

--------------------------------

### layer.tips(content, elem, options)

Source: https://layui.dev/docs/2/layer

弹出 tips 类型贴士层。

```APIDOC
## layer.tips(content, elem, options)

### Description
弹出 tips 类型贴士层。

### Method
layer.tips

### Parameters
- **content** (String) - Required - 提示内容。
- **elem** (String/DOM) - Required - 吸附元素。
- **options** (Object) - Optional - 配置项。

### Response
返回弹层索引。
```

--------------------------------

### extendsInstance callback example

Source: https://layui.dev/docs/2/component/index.html

Extends the component instance object with custom methods. The returned object's methods can be called after rendering, as shown in the accompanying usage example.

```javascript
extendsInstance: function(that) {
  return {
    // 关闭组件
    close: function() {
      that.remove(); // 调用组件原型中的 remove 方法
    }
  }
}
```

```javascript
var inst = xxx.render(); // 某组件渲染
inst.close(); // 关闭某组件
```

--------------------------------

### Basic Menu HTML and JavaScript Example

Source: https://layui.dev/docs/2/menu

Complete HTML page demonstrating the Layui basic menu. Includes menu items, groups, dividers, parent items with nested panels, and a script that listens for menu clicks via dropdown.on('click(demo-menu)') and displays the options using layer.msg.

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>基础菜单 - Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="//unpkg.com/layui@2.13.9/dist/css/layui.css" rel="stylesheet">
</head>
<body class="layui-bg-gray">
<div class="layui-panel" style="width: 260px; margin: 16px;">
  <ul class="layui-menu" id="demo-menu">
    <li lay-options="{id: 100}">
      <div class="layui-menu-body-title"><a href="javascript:;">menu item 1</a></div>
    </li>
    <li lay-options="{id: 101}">
      <div class="layui-menu-body-title">
        <a href="javascript:;">menu item 2 <span class="layui-badge-dot"></span></a>
      </div>
    </li>
    <li class="layui-menu-item-divider"></li>
    <li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
      <div class="layui-menu-body-title">
        menu group <i class="layui-icon layui-icon-up"></i>
      </div>
      <ul>
        <li lay-options="{id: 103}">
          <div class="layui-menu-body-title">menu item 3-1</div>
        </li>
        <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: false}">
          <div class="layui-menu-body-title">menu group 2</div>
          <ul>
            <li class="layui-menu-item-checked">
              <div class="layui-menu-body-title">menu item 3-2-1</div>
            </li>
            <li><div class="layui-menu-body-title">menu item 3-2-2</div></li>
          </ul>
        </li>
        <li><div class="layui-menu-body-title">menu item 3-3</div></li>
      </ul>
    </li>
    <li class="layui-menu-item-divider"></li>
    <li><div class="layui-menu-body-title">menu item 4 <span class="layui-badge">1</span></div></li>
    <li><div class="layui-menu-body-title">menu item 5</div></li>
    <li><div class="layui-menu-body-title">menu item 6</div></li>
    <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
      <div class="layui-menu-body-title">
        menu item 7 Children
        <i class="layui-icon layui-icon-right"></i>
      </div>
      <div class="layui-panel layui-menu-body-panel">
        <ul>
          <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
            <div class="layui-menu-body-title">
              menu item 7-1
              <i class="layui-icon layui-icon-right"></i>
            </div>
            <div class="layui-panel layui-menu-body-panel">
              <ul>
                <li><div class="layui-menu-body-title">menu item 7-2-1</div></li>
                <li><div class="layui-menu-body-title">menu item 7-2-2</div></li>
                <li><div class="layui-menu-body-title">menu item 7-2-3</div></li>
                <li><div class="layui-menu-body-title">menu item 7-2-4</div></li>
              </ul>
            </div>
          </li>
          <li><div class="layui-menu-body-title">menu item 7-2</div></li>
          <li><div class="layui-menu-body-title">menu item 7-3</div></li>
        </ul>
      </div>
    </li>
    <li>menu item 8</li>
    <li class="layui-menu-item-divider"></li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: false}">
      <div class="layui-menu-body-title">menu group 9</div>
      <ul>
        <li><div class="layui-menu-body-title">menu item 9-1</div></li>
        <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
          <div class="layui-menu-body-title">
            menu item 9-2
            <i class="layui-icon layui-icon-right"></i>
          </div>
          <div class="layui-panel layui-menu-body-panel">
            <ul>
              <li><div class="layui-menu-body-title">menu item 9-2-1</div></li>
              <li><div class="layui-menu-body-title">menu item 9-2-2</div></li>
              <li><div class="layui-menu-body-title">menu item 9-2-3</div></li>
            </ul>
          </div>
        </li>
        <li><div class="layui-menu-body-title">menu item 9-31</div></li>
      </ul>
    </li>
    <li class="layui-menu-item-divider"></li>
    <li><div class="layui-menu-body-title">menu item 10</div></li>
  </ul>
</div>
<script src="//unpkg.com/layui@2.13.9/dist/layui.js"></script>
<script>
layui.use(function(){
  var dropdown = layui.dropdown;
  var layer = layui.layer;
  var util = layui.util;
  // 菜单点击事件
  dropdown.on('click(demo-menu)', function(options){
    console.log(this, options);
    
    // 显示 - 仅用于演示
    layer.msg(util.escape(JSON.stringify(options)));
  });
});
</script>
</body>
</html>
```

--------------------------------

### util.timeAgo example

Source: https://layui.dev/docs/2/util

Example of util.timeAgo with a timestamp. Returns '刚刚' for times within 3 minutes, relative strings within 30 days, and date strings after 30 days.

```javascript
var result = util.timeAgo(1672531200000); // 2023-01-01 00:00:00
```

--------------------------------

### layer.ready(callback)

Source: https://layui.dev/docs/2/layer

样式初始化就绪。

```APIDOC
## layer.ready(callback)

### Description
样式初始化就绪。

### Method
layer.ready

### Parameters
- **callback** (Function) - Required - 就绪后的回调。

### Response
无返回值。
```

--------------------------------

### Content clear affix example

Source: https://layui.dev/docs/2/form/input.html

HTML example for clearing input content using lay-affix="clear", showing default, disabled, and readonly states. Requires layui import.

```html
  <div class="layui-form">
  <div class="layui-input-wrap">
    <input type="text" lay-affix="clear" placeholder="请输入" class="layui-input">
  </div>
  <hr class="ws-space-16">
  <div class="layui-input-wrap">
    <input type="text" value="默认有值状态" lay-affix="clear" class="layui-input">
  </div>
  <hr class="ws-space-16">
  <div class="layui-input-wrap">
    <input type="text" value="禁用状态时" lay-affix="clear" disabled class="layui-input">
  </div>
  <hr class="ws-space-16">
  <div class="layui-input-wrap">
    <input type="text" value="只读状态时" lay-affix="clear" readonly class="layui-input">
  </div>
</div>
<!-- import layui -->
```
Tokens:
Raw