Skip to content

formSelect的几种使用方式

maplemei edited this page Jul 12, 2018 · 1 revision

第一种: jquery方式

<!-- 引入样式 -->
<link rel="stylesheet" type="text/css" href="//raw.githack.com/hnzzmsf/layui-formSelects/master/dist/formSelects-v4.css"/>

<!-- 引入jquery依赖 -->
<script src="//unpkg.com/jquery@3.3.1/dist/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入组件 -->
<script src="//raw.githack.com/hnzzmsf/layui-formSelects/master/dist/formSelects-v4.js" type="text/javascript" charset="utf-8"></script>

!! 注: js最好放在页面底部加载

第二种: layui模块化方式

<!-- 引入样式 -->
<link rel="stylesheet" type="text/css" href="//layui.hcwl520.com.cn/layui/css/layui.css?v=201805080202" />
<link rel="stylesheet" type="text/css" href="//raw.githack.com/hnzzmsf/layui-formSelects/master/dist/formSelects-v4.css"/>

<!-- 引入layui.js依赖 -->
<script src="//layui.hcwl520.com.cn/layui/layui.js?v=201805080202" type="text/javascript" charset="utf-8"></script>

<!-- 按需加载 -->
<script type="text/javascript">
    //配置formSelects路径, 全局仅需加载一次
    layui.config({
        base: './static/formSelects/dist/' //此处路径请自行处理, 可以使用绝对路径
    }).extend({
        formSelects: 'formSelects-v4'
    });

    //加载模块
    layui.use(['formSelects'], function(){
        var formSelects = layui.formSelects;
         
    });
</script>

第三种: layui非模块化方式

<!-- 引入样式 -->
<link rel="stylesheet" type="text/css" href="//layui.hcwl520.com.cn/layui/css/layui.css?v=201805080202" />
<link rel="stylesheet" type="text/css" href="//raw.githack.com/hnzzmsf/layui-formSelects/master/dist/formSelects-v4.css"/>

<!-- 引入layui.all.js依赖 -->
<script src="//layui.hcwl520.com.cn/layui/layui.all.js?v=201805080202" type="text/javascript" charset="utf-8"></script>
<!-- 引入组件 -->
<script src="//raw.githack.com/hnzzmsf/layui-formSelects/master/dist/formSelects-v4.js" type="text/javascript" charset="utf-8"></script>