前端
文章平均质量分 71
passerbyYSQ
一个普通蒟蒻的成长之路
展开
-
jQuery-Tags-Input组件重写,实现autocomplete和标签数量限制
效果图原创 2021-05-29 00:39:54 · 1009 阅读 · 0 评论 -
十几行代码教你封装基于bootstrap的前端分页组件
效果图前言哈哈,每次写博客都喜欢啰嗦几句。本来这是前端的东西,由于做期末作品需要,一个学后端的,被迫营业。提前学全栈分页逻辑描述1、数字按钮数字按钮始终有 7 个。如果当前页 左边、右边的按钮充足时,左、右两边各有3各按钮。如果当前页按钮左边的按钮不足3个时,数字按钮组的范围是[1, 6]。如果当前页按钮右边的按钮不足3个时,数字按钮组的范围是[5, 11]。3、首页、末页如果第1页(首页)出现在了7个数字按钮中,则不需要显示 “First” 按钮;同理,如果第11页.原创 2020-12-24 00:15:38 · 511 阅读 · 0 评论 -
基于bootstrap的富文本编辑器summernote,重写图片上传并添加进度条
效果图前言据我了解,这是一款基于bootstrap的富文本编辑器,比较喜欢的它的样式风格和图片上传的功能。问题1:它默认的图片上传,是把图片转成base64编码并提交给后端。这显然不是我们想要的,我们希望图片以文件形式提交给后端保存,后端返回其保存的路径。问题2:图片异步上传时,没有进度显示。如果上传动态图等较大的图片,用户体验不是很好。为此,我使用一款基于bootstrap的模态框插件 BootBox.js (https://www.bootboxjs.cn/)来显示上传原创 2020-12-09 20:38:12 · 664 阅读 · 0 评论 -
【jquery.validation】后端程序员:这是我写过的、堪称完美的登录表单
效果图前言作为一名学习服务端开发方向的学生来说,虽然自己有学过前端,但并不算深入,而且个人觉得写前端比较繁琐,再加上自己的审美一般,所以真写不出能让自己满意的界面。对于大多数后端程序员来说,应该宁愿拿现成的静态资源模板来改,也不愿意自己从无到有去写吧?即使,有了解过一些前端框架,写出让人觉得舒服的界面还是比较费劲。上面登录表单,看起来还算比较舒服,是我JavaWeb课程的一个小作业,我并没有用老师提供的静态页面,因为太难看了。。哈哈哈。下面我站在前端角度,分析一下如何实现这样的一个..原创 2020-11-13 00:03:34 · 313 阅读 · 0 评论 -
【jQuery】【购物车页面】实现近乎完美的联动交互(附GIF)
效果图交互说明注意:不涉及服务端逻辑,仅从前端页面的角度,用 jQuery实现 上述交互结合上述GIF来看1、全选 和 全不选, 同时更新底部 已选数量 和 总价。2、勾选单个 商品的复选框,同时同时更新底部 已选数量 和 总价。如果勾选这一项后,恰好全部复选框都已经否选,则会同步修改 “全选” 这个复选框的状态。3、通过上下的小箭头更新购物车中的某项商品的数量,同步更新 小计 和 总价。同时实现数量的 最大和最小 的边界控制。4、监听商品数量输入框的 keyup 和 af原创 2020-06-19 22:49:35 · 1100 阅读 · 3 评论 -
【uEditor】引入富文本编辑器uEditor时,上传图片失败的原因
uEditoruEditor是百度开发的一款开源的富文本编辑器。官网地址:http://ueditor.baidu.com/website/使用教程请看官网文档前言如何引入我就不赘述了,官网有详细教程。我使用的是php版,我来说一下我第一次使用uEditor,部署到服务器上遇到的问题。1、上传图片失败2、显示的时候大图片超出父容器解决配置文件:ueditor...原创 2020-04-09 18:21:03 · 4610 阅读 · 1 评论 -
【初试jQuery】手写二级菜单,带展开动画效果,各种细节
效果图前言效果见上面动态图。实现这个二级菜单,需要考虑的细节有点多。原因是 因为我想要两种效果: 1、【右】箭头除了鼠标悬停的时候会有,鼠标移出时候消失 之外,我还希望在点击开之后,箭头不要消失(而且箭头变为向下)。 2、我希望点击一次再点击一次(这里点击的是一级菜单),能够把其二级菜单收起来。而且要做到,点击二级菜单不会导致它收起。 ...原创 2020-03-13 22:40:06 · 1028 阅读 · 0 评论 -
【初试 jQuery】分析轮播图的实现原理,手写轮播图,代码细节分析
效果图代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>轮播图 by passerbyYSQ</title> <script src="js/jQuery1.4.2.js"></script> &...原创 2020-02-28 11:00:13 · 847 阅读 · 0 评论