Demo - Layui — ContextQMD

<pre class="layui-code" lay-options="{preview: true, text: {preview: '基础用法'}, layout: ['preview', 'code'], tools: ['full']}"> <textarea> <div id="ID-rate-demo"></div>  <script> layui.use(function(){ var rate = layui.rate; // 渲染 rate.render({ elem: '#ID-rate-demo' }); }); </script> </textarea> </pre> <h3 id="demo-text" class="ws-anchor ws-bold">显示文字</h3> <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}"> <textarea> <div id="ID-rate-demo-text"></div>  <script> layui.use(function(){ var rate = layui.rate; // 渲染 rate.render({ elem: '#ID-rate-demo-text', value: 2, // 初始值 text: true // 开启文本 }); }); </script> </textarea> </pre> <h3 id="demo-half" class="ws-anchor ws-bold">半星效果</h3> <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}"> <textarea> <div id="ID-rate-demo-half-1"></div> <hr> <div id="ID-rate-demo-half-2"></div>  <script> layui.use(function(){ var rate = layui.rate; // 渲染 rate.render({ // eg1 elem: '#ID-rate-demo-half-1', value: 2.5, // 初始值 half: true // 开启半星 }); rate.render({ // eg2 elem: '#ID-rate-demo-half-2', value: 3.5, half: true, text: true }); }); </script> </textarea> </pre> <h3 id="demo-setText" class="ws-anchor ws-bold">自定义文本</h3> <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}"> <textarea> <div id="ID-rate-demo-setText-1"></div> <hr> <div id="ID-rate-demo-setText-2"></div>  <script> layui.use(function(){ var rate = layui.rate; // 渲染 rate.render({ // eg1 elem: '#ID-rate-demo-setText-1', value: 3, text: true, setText: function(value){ // 自定义文本的初始回调 var arrs = { '1': '非常不满意', '2': '不满意', '3': '一般', '4': '满意', '5': '非常满意', }; this.span.text(arrs[value] || ( value + "星")); } }); rate.render({ // eg2 elem: '#ID-rate-demo-setText-2', value: 1.5, half: true, text: true, setText: function(value){ this.span.text(value); } }); }); </script> </textarea> </pre> <h3 id="demo-length" class="ws-anchor ws-bold">自定义长度</h3> <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}"> <textarea> <div id="ID-rate-demo-length-1"></div> <hr> <div id="ID-rate-demo-length-2"></div>  <script> layui.use(function(){ var rate = layui.rate; // 渲染 rate.render({ elem: '#ID-rate-demo-length-1', length: 3 }); rate.render({ elem: '#ID-rate-demo-length-2', length: 10, value: 8 // 初始值 }); }); </script> </textarea> </pre> <h3 id="demo-readonly" class="ws-anchor ws-bold">只读</h3> <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}"> <textarea> <div id="ID-rate-demo-readonly"></div>  <script> layui.use(function(){ var rate = layui.rate; // 渲染 rate.render({ elem: '#ID-rate-demo-readonly', value: 4, readonly: true }); }); </script> </textarea> </pre> <h3 id="demo-theme" class="ws-anchor ws-bold">自定义主题色</h3> <pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}"> <textarea> <div class="class-rate-demo-theme" lay-options="{value: 3, theme: '#FF8000'}"></div> <hr> <div class="class-rate-demo-theme" lay-options="{value: 3, theme: '#FE0000'}"></div> <hr> <div class="class-rate-demo-theme" lay-options="{value: 2.5, theme: '#1E9FFF', half: true}"></div>  <script> layui.use(function(){ var rate = layui.rate; // 批量渲染 rate.render({ elem: '.class-rate-demo-theme', // theme: '#FF8000' // 自定义主题色 }); }); </script> </textarea> </pre>