Layui单个页面多个评分插件的使用方法
解决思路是：循环显示评分
代码如下：
``` <!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"> </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> <div class="lf_rate" lay-data="{value:4 ,half: true, readonly:true,theme: '#009688'}"></div> <div class="lf_rate" lay-data="{value:3.4 ,half: true, readonly:true}"></div> <script src="layui.js" charset="utf-8"></script> <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> ```
最终效果：
声明：本站部分文章，来源于互联网收集分享。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
转载本文注明出处：http://www.suuxx.com/blog/a/567CE5A7225359DB.html
留言评论