码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-01-01 22:13:46      阅读:122      评论:0      收藏:0      [点我收藏+]

标签:lin   width   each   直接   ati   media   fan   aof   UNC   

场景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】单个页面多个评分插件的使用方法

标签:lin   width   each   直接   ati   media   fan   aof   UNC   

原文地址:https://www.cnblogs.com/richerdyoung/p/12130282.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!