Layui单个页面多个评分插件的使用方法

Posted 依然范儿特西

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Layui单个页面多个评分插件的使用方法相关的知识,希望对你有一定的参考价值。

场景1
循环显示评分:


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>laofan-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, maximum-scale=1">
  <link rel="stylesheet" href="layui.css"  media="all">
  <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
</head>
<body>
            
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>多个评分显示</legend>
</fieldset>
 
<div class="lf_rate" lay-data="{value:2 ,half: true, readonly:true,theme: \'#1E9FFF\'}"></div></br>

<div class="lf_rate" lay-data="{value:4 ,half: true, readonly:true,theme: \'#009688\'}"></div></br>

<div class="lf_rate" lay-data="{value:3.4 ,half: true, readonly:true}"></div></br>

          
<script src="layui.js" charset="utf-8"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
<script>
layui.use([\'rate\',\'jquery\'], function(){
  var rate = layui.rate;
  var $ = layui.jquery;
   
    //多个评分     
    layui.each( $(\'.lf_rate\'), function (index, elem) {

        var configTemp = $(elem).attr(\'lay-data\');
        try{
            configTemp = eval(\'(\' + configTemp + \')\');  

        }catch(e){
            configTemp  = {};

        }

        rate.render($.extend(true,{
            elem:elem
        }, configTemp));

    });
 
});
</script>

</body>
</html>


效果:

以上是关于Layui单个页面多个评分插件的使用方法的主要内容,如果未能解决你的问题,请参考以下文章

如何在单个页面上有多个 jQuery 插件实例?

adminlte+layui框架搭建1

jQuery Raty星级评分插件使用方法

基于SSM+Layui+Bootstrap实现学校教师技能大赛评分系统

是否有在单个活动中处理多个片段的 Android 设计模式?

从单个按钮从多个片段中提取数据