Layui-五星好评

最新推荐文章于 2024-04-14 09:46:43 发布
最新推荐文章于 2024-04-14 09:46:43 发布
阅读量1.7k 收藏 2
点赞数
文章标签： layui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54668937/article/details/121210440
版权

文献种类：专题技术文献；
开发工具与关键技术： DW、JS
作者：方建恒 ；年级：20级 ；撰写时间： 2021 年 11 月 8日

Layui-五星好评

我们在制作大多数页面或软件时，都会用到评分功能，
用于收集用户体验时的感受。
在这里我们将给大家提供一个便利的评分功能，
那就是Layui插件里的评分组件功能，
它可以帮助我们快速的编写好评分功能。
下面我们来使用Layui插件里的评分组件功能编写一下评分功能。
首先我们需要把Layui的脚本文件和叠层样式表引入，
然后创建一个id为test1的div标签，如图：
在这里插入图片描述
接下来是script部分，
我们先声明一下layui的评分插件，
然后对其进行渲染，并把容器绑定到之前创建的test1上。如图：

最低0.47元/天 解锁文章
柠之幻尘
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
LayUI中的内置模块之 评分组件文档 - layui.rate
daimeijin的博客
08-15 763
前言 最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。 评分组件文档 rate 评分组件在电商和 O2O 平台尤为常见，一般用于对商家进行服务满意度评价。外形依然小巧自然，功能依旧灵活实用。其中评分对应的自定义内容功能，可让它有更多的发挥空间。该组件为
layui-v2.5.6
07-04
layui相关资源
使用Layui实现评分功能
qq_51447436的博客
03-14 8480
使用Layui实现评分功能
Vue-Star-Rating：一款优雅的Vue.js评分组件
最新发布
gitblog_00022的博客
04-14 632
Vue-Star-Rating：一款优雅的Vue.js评分组件 项目地址:https://gitcode.com/craigh411/vue-star-rating Vue-Star-Rating 是一个轻量级且高度可定制的Vue.js插件，用于构建美观、功能丰富的星级评价系统。对于需要在Web应用中添加评论评分或产品评级功能的开发者来说，这是一个极好的选择。 技术分析 基于Vue.js：作为...
layui评分
zhouzhou_98的博客
10-02 2018
评分 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3....
layui框架学习（21：评分模块）
gc_2299的博客
03-31 557
学习并记录layui框架中内置模块的评分模块的函数、参数设置方式。
《layui宇宙版教程》：评分组件rate
来吧，学习！
08-21 919
《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入： 1.29 评分组件rate rate评分组件在电商和O2O平台尤为常见，一般用于对商家进行服务满意度评价。 模块加载名称：rate。 1.29.1 快速使用 rate组件可以用来进行展示或评价，只需要通过更改参数设定来开启想要的功能。 　　测试代码如下： <!DOCTYPE html> <html> <head&g...
layui rate (评分组件）使用的一点经验分享
u011415782的专栏
09-01 2456
这几天在做管理后台的功能开发时 需要添加一个可以进行 标签打分的模块，方便后期对接单人员的 信息收集 根据需求，我选取的是常用的 layui.rate 组件 在嵌入页面是发现： 如果直接在页面上进行显示，按照文档指导是很容易实现的 但是，当前项目毕竟是在前人开发的代码基础上进行优化 此时，代码处理逻辑为 js-post 请求回调后 并且使用了 layer.open() 弹窗，在表格中进行显示 那么，就会出现 layui.rate 组件渲染不完整或失效的情况
layui-v2.5.5_layui前端模板_substanceb4u_layui-v2.5.5_wplayui-v2.5.5_
10-01
layui前端模板，提供了各种前端插件的使用实例以及使用模板
layui-soul-table:layui-table 表头筛选、列顺序调整、列快速隐藏、excel导出等
05-05
给 layui-table 注入点灵魂 当前layui版本 v2.5.6 在线demo及文档： 国内下载地址: 扩展功能 表头筛选、自定义条件（支持前端筛选、后台筛选介绍请看 ） 拖动列调整顺序、隐藏显示列 excel导出（根据筛选条件和列...
layui-高级表格-soul-table.rar
12-06
layui的插件效果，优化基础layui的原装组件的效果。 layui 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，...
layui-layim.js
12-19
layim.js LayIM核心插件集，放置在项目中/layui/lay/modules目录下
解决Layui 表单提交数据为空的问题
12-29
坑的外观 最近用了一段时间Layui作为项目后台管理模块的前端框架，感觉还是挺好用的。 今天踩了个坑，就是使用layui表单提交时，提交的数据为空。 例如，layer.msg(JSON.stringify(data.field));这句代码执行后，页面显示为空对象。 <form class=layui-form action=> 输入框 <input type=te
web打分系统 项目源码
11-18
打分
JS实现带提示的星级评分效果完整实例
11-29
本文实例讲述了JS实现带提示的星级评分效果。分享给大家供大家参考，具体如下： 这是一款JS仿淘宝网的星级评分系统，鼠标放在上边可以显示星级代表的评分级别，鼠标点击时会选中当前的星级，目前此功能在网页上十分流行，虽然是仿做的，但已经很不错的功能了，希望大家喜欢！ 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/js-start-level-pf-codes/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
layui-v2.5.5.rar
01-02
layui layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。
Java项目:赛事打分系统(java+SSM+Layui+Maven+mysql)
常年被追砍的博客
05-09 366
源码获取：博客首页 "资源" 里下载！ 项目介绍 赛事评分系统，SSM框架。该项目分管理员、裁判、选手三个用户角色。 管理员主要功能： 首页、选手管理、裁判管理、赛事管理 裁判主要功能： 首页、评分； 选手主要功能： 首页、报名赛事、查看成绩； 环境需要 1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境：IDEA，Eclipse,Myeclipse都可以。推荐IDEA; 3.tomcat环境：Tomcat 7.x,8.x,9.x版本.
星级评分实现，封装成jquery插件
huangbaokang的博客
09-10 764
&lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="UTF-8"/&gt; &lt;title&gt;星级评分&lt;/title&gt; &lt;style type="text/css"&gt; body ul li{
小星星评分制作
weixin_44579862的博客
07-18 338
现在大多是评分都是使用五角星评分。那么这种评分是如何制作的呢，那么接下来使用例子进行制作演示。 首先，在这里使用的时layui进行制作，那么使用layui的话首先肯定要先引入layui的css以及js， 那么以下是源码： 也就是，首先需要定义一个div来作为小星星的容器， 然后再加载，渲染对应的模块，然后再设置对应的参数即可。 以下是rate 组件提供的基础参数，你可根据实际场景进行相应的设...
if (d.groundingState == 0 || d.groundingState == 3) {//layui-btn-disabled edit result = `<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-xs layui-bg-orange" lay-event="add">上架</a> <a class="layui-btn layui-btn-xs layui-btn-danger layui-btn-disabled">下架</a> <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="det">详情</a>` } else if (d.groundingState == 1) { result = `<a class="layui-btn layui-btn-xs layui-btn-disabled edit">编辑</a> <a class="layui-btn layui-btn-xs layui-btn-disabled edit">上架</a> <a class="layui-btn layui-btn-xs layui-btn-danger layui-btn-disabled">下架</a> <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="det">详情</a>` } else if (d.groundingState == 2) { result = `<a class="layui-btn layui-btn-xs layui-btn-disabled edit">编辑</a> <a class="layui-btn layui-btn-xs layui-btn-disabled edit">上架</a> <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">下架</a> <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="det">详情</a>` } else if (d.groundingState == 4 || d.groundingState == 5) { result = `<a class="layui-btn layui-btn-xs layui-btn-disabled edit">编辑</a> <a class="layui-btn layui-btn-xs layui-btn-disabled edit">上架</a> <a class="layui-btn layui-btn-xs layui-btn-disabled">下架</a> <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="det">详情</a>` }优化一下
06-09
可以将重复出现的代码进行封装，减少代码的冗余。例如，可以将按钮的class属性提取出来，写成一个变量，然后在生成按钮时直接使用该变量。同时，也可以使用模板字符串来简化代码。优化后的代码如下： ```javascript const btnDisabledClass = "layui-btn layui-btn-xs layui-btn-disabled"; const editBtn = `<a class="layui-btn layui-btn-xs edit">编辑</a>`; const addBtn = `<a class="layui-btn layui-btn-xs layui-bg-orange" lay-event="add">上架</a>`; const delBtn = `<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">下架</a>`; const detBtn = `<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="det">详情</a>`; if (d.groundingState == 0 || d.groundingState == 3) { result = `${editBtn} ${addBtn} <a class="${btnDisabledClass}">下架</a> ${detBtn}`; } else if (d.groundingState == 1) { result = `<a class="${btnDisabledClass} edit">编辑</a> <a class="${btnDisabledClass} edit">上架</a> <a class="${btnDisabledClass}">下架</a> ${detBtn}`; } else if (d.groundingState == 2) { result = `<a class="${btnDisabledClass} edit">编辑</a> <a class="${btnDisabledClass} edit">上架</a> ${delBtn} ${detBtn}`; } else if (d.groundingState == 4 || d.groundingState == 5) { result = `<a class="${btnDisabledClass} edit">编辑</a> <a class="${btnDisabledClass} edit">上架</a> <a class="${btnDisabledClass}">下架</a> ${detBtn}`; } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值