web模块积累
关注
分享
扫一扫
阿泽财商会
作品主页https://mbd.pub/o/m/azcsh，高级人工智能算法训练工程师，人工智能应用工程师，高级工程师，高级信息系统项目管理师，软件设计师，CSM敏捷教练，csdn20周年直播嘉宾，高级健康管理师，会计师。
清华大学出版社《MongoDB游记》数据库教程书作者。专注于人工智能，数据挖掘技术与大数据，云计算与存储等技术的学习与研究。擅长人工智能算法训练，系统响应式开发、数据采集数据清洗和数据分析，分布式云存储运算等技术。熟悉后台系统、云存储计算平台的搭建，擅长解决架构过程中遇到的疑难问题。常用开发语言:java、python、c#、perl、sql。
展开
-
js实现图片在一个div中点击按钮放大缩小效果
图片放大，缩小也是前端中经常遇到得问题，以下就根据这个需求，做如下示范：<!DOCTYPE html><html><head> <title>图片放大</title></head><style type="text/css"> .main_div{ margin: 20px auto; tex...转载 2019-08-27 18:19:41 · 11543 阅读 · 0 评论 -
Bootstrap框架----DataTables列表移动端适配定义隐藏列
我们在上一章节中已经学习了DataTables在BootStrap框架中的使用方式和初始化。 Bootstrap框架—-DataTables列表示例最终效果如图: Bootstrap是自动适配移动端的，在手机上查看效果如图： 我们发现当数据有很多列时，会存在超出屏幕的可能。这时候表格表现为在屏幕范围内可左右滑动。我们还有另一种解决方案。就是在移动端情况下隐藏部分列，点击展...原创 2018-01-31 15:14:05 · 14419 阅读 · 1 评论 -
Bootstrap框架----DataTables列表示例
简介DataTables是一款比较好用的可以在bootstrap中使用的jquery表格插件。它是一个高度灵活的工具，可以为任何HTML表格添加高级的交互功能。DataTables特点 分页，即时搜索和排序 几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理 支持不同主题 DataTables, jQuery UI, Bootstrap, Founda...原创 2018-01-30 21:42:33 · 19705 阅读 · 2 评论 -
web导出excel--------java导出文件弹出下载框让用户选择路径
实现导出文件时 弹出下载框 主要是 设置成 文件流 stream 类型的response. 浏览器就会识别出 文件下载弹出 下载框。这里总结三个方式sturts框架中弹出详见 java通过struts实现web中的文件下载其中关键的设置是原创 2015-08-10 11:04:35 · 45900 阅读 · 0 评论 -
Bootstrap框架----地址联动--选择地址
我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架，在此基础上记录 地址联动输入用法。应用bootstrap模板基础项目源码下载地址为:SpringMVC+Shiro+MongoDB+BootStrap基础框架我们在基础项目中已经做好了首页index的访问。现在就在index.jsp页面和index的路由Controller上做修改，实现 地址联动输入用法原创 2017-09-13 18:30:58 · 9011 阅读 · 1 评论 -
百度ueditor富文本--图片保存路径的配置以及上传到远程服务器
ad原创 2017-08-28 15:55:00 · 25117 阅读 · 9 评论 -
Bootstrap框架----新建示例--各种input
我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架，在此基础上记录 新建示例。应用bootstrap模板基础项目源码下载地址为:SpringMVC+Shiro+MongoDB+BootStrap基础框架我们在基础项目中已经做好了首页index的访问。现在就在index.jsp页面和index的路由Controller上做修改，实现 新建示例 的格式布局。原创 2017-09-05 15:39:18 · 2180 阅读 · 0 评论 -
百度ueditor富文本--配置图片上传
我们在之前的文章中已经学习了如何 初始化百度ueditor富文本编辑器:百度ueditor富文本--PC端单个，PC端多个，mobile单个，mobile多个官网对编辑器的初始化和使用文档是比较详细的，这里就不多说了。本小节 主要记录一下 在初始化完编辑器之后 配置启用 编辑器中的 图片上传插件。项目路径如图:引用jar包在ueditor的资源包中我们看到jsp文件夹里有lib文件夹和jar包。原创 2017-08-24 19:32:39 · 42068 阅读 · 6 评论 -
百度ueditor富文本--自定义插件按钮
我们在在之前的文章中讲了 百度ueditor富文本 的 配置和初始化的方法。百度ueditor富文本--PC端单个，PC端多个，mobile单个，mobile多个我们可以给它配置更多的插件，全部插件可参考官网:http://fex.baidu.com/ueditor/#start-toolbar如果官网提供的插件仍不能满足我们的需要时，则可以自定义插件按钮。比如 我们这里可以 自定义一个按钮 水印原创 2017-08-10 16:43:13 · 20445 阅读 · 7 评论 -
icon图标库
简介什么是图标字体？图标字体不同于标准的字体数字的字符，是一种包含符号和字形（如箭头、文件夹、放大镜）的字体文件。例如：图标字体的使用就像和使用网页字体一样，个人理解就是把一些图标以字体的形式保存在一个字体文件里面，然后再以调用字体的方式来使用。具体使用方法详情可以去看看css中的@font-face的用法，在这里就不详细解释了。免费图标字体原创 2015-06-25 14:50:37 · 10056 阅读 · 0 评论 -
Bootstrap框架----DataTables列表折叠列
我们在上一章节中已经学习了DataTables在BootStrap框架中的使用方式和初始化。 Bootstrap框架——DataTables列表示例本章学习行详细内容的展开与折叠，当数据量多时，可以通过点击按钮后再去请求获取数据进行展示。官网例子参考 行详细内容的展开与折叠 http://datatables.club/example/user_share/row_details.h...原创 2018-01-31 19:48:01 · 20558 阅读 · 4 评论 -
Bootstrap框架----DataTables列表增加备注功能
我们在上一章节中已经学习了DataTables在BootStrap框架中的使用方式和初始化。 Bootstrap框架——DataTables列表示例本章学习DataTables列表增加备注功能，可以通过点击按钮后编辑备注发送到后台保存入库。官网例子参考环境准备DataTables列表折叠列的使用建立在上篇文件的基础上 Bootstrap框架——DataTables列表示例最...原创 2018-01-31 21:41:57 · 3181 阅读 · 0 评论 -
Bootstrap框架----多条记录双文本(List)添加
有时候我们需要实现双文本的多条记录录入，传给后台保存成List的结构。界面交互设计如图: 可动态添加行数，每行固定两个文本录入。我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架，在此基础上记录 多条文本录入用法。 应用bootstrap模板基础项目源码下载地址为: SpringMVC+Shiro+MongoDB+BootStrap基...原创 2018-01-29 15:16:13 · 1644 阅读 · 0 评论 -
js实现图片放大镜效果
效果图代码实现过程html部分<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lan...原创 2019-08-27 18:12:37 · 2019 阅读 · 0 评论 -
js实现点击图片在屏幕中间弹出放大效果
效果图点击图片后关键代码html<div> <img height="100" width="100" src="https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_960_720.jpg" class="pic"/> <img height="100"...原创 2019-08-27 17:35:34 · 3886 阅读 · 3 评论 -
js实现打开web页面聚焦到窗口中间
最近在做一个图片浏览器。效果如图：[外链图片转存失败(img-6Zb0HDAW-1566896732228)(http://image.525.life/Fm0us42kRTf2_NZE2ScpJv9YkT-Z)]现在需要一进入到页面 就聚焦到图片的位置，而不需要下滑后才能查看。使用方法如下：html中 <img id="originPic" src="${signedUrl...原创 2019-08-27 17:06:34 · 1719 阅读 · 0 评论 -
Bootstrap框架----弹出层录入
我们经常需要在不跳转页面的情况下新增录入的交互。本章记录弹出层录入的交互方式。效果如图: 我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架，在此基础上记录 check选择。 应用bootstrap模板基础项目源码下载地址为: SpringMVC+Shiro+MongoDB+BootStrap基础框架我们在基础项目中已经做好了首页...原创 2018-03-28 18:05:22 · 2851 阅读 · 1 评论 -
Bootstrap框架----多项关联—check选择
我们之前已经记录了两种多项关联的交互方式，标签和列表 Bootstrap框架—-多项关联—标签式选择 Bootstrap框架—-多项关联—列表选择本章记录第三种多项关联的交互–check选择，适用于中等数量的多项关联。效果如图: 我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架，在此基础上记录 check选择。 应用bootstrap...原创 2018-03-28 17:20:30 · 2438 阅读 · 1 评论 -
Bootstrap框架----多项关联—列表选择
我们在上一篇文章已经记录了使用标签选择进行多项关联的交互。 Bootstrap框架—-多项关联—标签式选择本章我们记录第二种交互方式，列表勾选。 效果如图: 我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架，在此基础上记录 列表选择。 应用bootstrap模板基础项目源码下载地址为: SpringMVC+Shiro+MongoDB...原创 2018-03-28 16:20:36 · 2764 阅读 · 1 评论 -
Bootstrap框架----多项关联—标签式选择
我们在后台录入的交互中经常会有需要建立关联的场景，比如一个渠道下有多个联系人，如果把渠道和联系人建立关联。我们这里记录第一种方式 标签式选择。效果如图:我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架，在此基础上记录 标签式选择。 应用bootstrap模板基础项目源码下载地址为: SpringMVC+Shiro+MongoD...原创 2018-03-27 18:55:16 · 2914 阅读 · 1 评论 -
Bootstrap框架----多条记录多文本(List)Select录入
我们在上一章节已经记录了多条记录多文本的录入 Bootstrap框架—-多条记录多文本(List)添加我们发现 之前设计的交互都是直接手动输入的，比如性别男女。但是我们在数据库一般保存的性别是0或者1。这样的话，我们需要把其他一个输入框修改成下拉框选择的交互方式。本篇文章记录多条记录多文本(List)Select录入。效果如图: 在Bootstrap框架—-多条记录多文...原创 2018-03-27 17:46:07 · 2720 阅读 · 1 评论 -
Bootstrap框架—-多条记录多文本(List)添加
我们在上篇文章中已经记录了多条记录双文本(List)添加的后台功能交互Bootstrap框架—-多条记录双文本(List)添加本章来实现多文本的多条记录录入，传给后台保存成List的结构。界面交互设计如图: 可动态添加行数，每行多个文本录入。我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架。应用bootstrap模板基础项目...原创 2018-03-27 16:19:24 · 3225 阅读 · 0 评论 -
百度ueditor富文本--PC端单个，PC端多个，mobile单个，mobile多个
我们在之前的文章中已经做过富文本插件的调研。富文本插件Ueditor是百度推出的一款开源在线 HTML 编辑器。http://fex-team.github.io/ueditor/比较好用，我们本章详细记录它的应用过程，以及在不同场景下的具体配置。我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架，在此基础上记录 ueditor用法。应用bootstrap原创 2017-08-08 17:29:29 · 9951 阅读 · 0 评论 -
Bootstrap框架---Uploadify插件----多张图片上传交互方式一
我们在前一章已经实现了Bootstrap框架---Uploadify插件----单张图片上传。Bootstrap框架----单张图片上传实现---Uploadify插件本章实现Bootstrap框架---Uploadify插件----多张图片上传交互方式一 。本章主要关注多张图片上传在Bootstrap框架中的布局和实现。我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootSt原创 2017-06-15 17:53:51 · 3475 阅读 · 0 评论 -
Bootstrap框架----单张图片上传实现---Uploadify插件
框架搭建我们在之前的文章中已经实现了 单张图片的上传，使用的是最基本的 File类型的input提交的方式，上传到远程静态资源器和七牛云。之前的文章关注的地方 主要是后端，也就是图片上传保存到哪里:上传到自己的远程静态资源服务器参考:java上传文件到远程服务器(一)---HttpURLConnection方式java上传文件到远程服务器(二)---HttpClient方式上传到七牛云服务器参考:原创 2017-06-15 16:45:50 · 7552 阅读 · 1 评论 -
java通过struts实现web中的文件下载
上一篇已经记录了 web中的文件上传功能java通过struts实现web中的文件上传本篇记录下载功能定义一个Action类，FileDownload.javapackage com.struts2.filedownload;import java.io.InputStream;import org.apache.struts2.ServletActionCo原创 2014-12-16 15:35:06 · 2988 阅读 · 0 评论 -
JS----checked----checked选中和未选中的获取
全选、全不选、反选功能html代码 篮球 足球 排球 网球 壁球 乒乓球 羽毛球 JS代码function setVal(iNum){ var aForm = document.getElementById("myForm");原创 2017-04-10 10:40:45 · 54320 阅读 · 0 评论 -
JSP----jQuery插件ContextMenu生成右键菜单
讲述三个内容:一:简介二:使用示例三:在jsp中动态生成的代码记录一:简介ContextMenu 译自：http://www.trendskitchens.co.nz/jquery/contextmenu/ ContextMenu是一个轻量级jQuery插件，用于选择性地用自己创建的菜单代替浏览器的默认右键菜单。 特点 1.可以在原创 2013-10-14 15:16:44 · 4285 阅读 · 0 评论 -
div锁定页面
效果如图:我们可以在这个基础上做相应的修改，比如白框上做登录之类的代码如下，直接新建为html可用: 与之间--> .black_overlay { display: none; posi原创 2014-11-27 10:46:44 · 3287 阅读 · 0 评论 -
web开发一--------让页面居中
web开发第一步就是做好布局首先当然是要让页面居中 修改协议为新建一个div 作为页面的容器 把页面内容放在center div中可以居中显示 让div的style为 如下 可让页面居中: #center { max-width:1140px; min-width:960px; marg原创 2014-12-27 16:18:33 · 9070 阅读 · 0 评论 -
富文本插件
我们这里根据提供的api所用的语言场景分成三类。分别适用与asp.net, java。js或者jQuery主要是针对html则两者都可用。js或jQueryJSFCKEditor（升级版CKEditor）强大的开源富文本编辑器，各个语言中都可以使用。支持上传图片、Flash等，功能强扩展性强。http://docs.ckeditor.com/#!/guide/dev原创 2015-03-12 18:00:05 · 5241 阅读 · 0 评论 -
网页中嵌套QQ代码设置在线状态无需加好友聊天
为了更方便与客户的交流，我们经常会在网页中引用QQ，实现随时都与客户联系的效果。有多种代码：一、文字类型的：1、http://wpa.qq.com/msgrd?V=1&Uin=你的QQ号码&Site=你的注释与说明;Menu=yes">你的QQ号码2、还可直接用下面这种方法（不用注释）http://wpa.qq.com/msgrd?V=1&U原创 2015-03-19 15:29:48 · 14612 阅读 · 0 评论 -
JQuery 绑定select标签的onchange事件
JQuery 绑定select标签的onchange事件，弹出选择的值，并实现跳转、传参（selected的值和页面其它元素的值） $(document).ready(function(){ $('#mySelect').change(function(){ alert($(this).children('option:selected').val()); var p1=$原创 2015-04-13 11:50:16 · 48806 阅读 · 2 评论 -
网页开发模块收集----持续更新
收集一些常用的模块，可以帮助我们更快的进行网页开发。以下模块都 拆解成了 单独的html， 方便理解和 整合。图片放大镜效果示例原创 2015-07-15 16:51:57 · 1353 阅读 · 0 评论 -
java通过struts实现web中的文件上传
单文件上传fileupload.jsp<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%> "> My转载 2014-12-16 14:41:56 · 4274 阅读 · 0 评论 -
应用bootstrap模板
响应式开发相关文章我们在响应式开发中已经学习了Bootstrap的使用。当我们在做后台开发时我们并不需要每次都自己去完全的新建一个后台，定义样式。因为现在能找到一些完整的Bootstrap的后台模块，直接使用模板能让我们更高效快速的完成开发和解决移动端的兼容问题。我收集了几套模块在博客中。有需要的读者可以进行下载。Bootstrap后台模板收集本文记录快速应用模板的步骤。以我们之前构造过的 Spr原创 2017-05-15 20:11:41 · 12953 阅读 · 4 评论 -
智能补全模糊查询select2的下拉选择框使用
我们在上篇文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架，在此基础上记录select2的使用。应用bootstrap模板基础项目源码下载地址为:SpringMVC+Shiro+MongoDB+BootStrap基础框架我们在基础项目中已经做好了首页index的访问。现在就在index.jsp页面上做修改，实现select2的下拉选择框。select2实现首先我们来原创 2017-05-19 17:43:02 · 11156 阅读 · 2 评论 -
Bootstrap框架----标签Tag输入用法--Bootstrap-tagsinput
有时候我们需要这样一种应用场景，让用户输入字符串列表，提交到后台。这个时候我们可以选择标签Tag输入用法--Bootstrap-tagsinput。效果图我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架，在此基础上记录 标签Tag输入用法。应用bootstrap模板基础项目源码下载地址为:SpringMVC+Shiro+MongoDB+BootStrap原创 2017-06-26 15:46:52 · 18483 阅读 · 0 评论 -
SpringMVC---Ajax----contentType传值接受规范
Ajax给SpringMVC传值遇到400或者415,这是由于在后台服务端定义的参数与传送的格式对应不上引起的。400 请求出错 由于语法格式有误，服务器无法理解此请求。不作修改，客户程序就无法重复此请求。 415 介质类型不受支持 — 服务器拒绝服务请求，因为不支持请求实体的格式。 检查 data 吧，看看提交到后台的数据是否合法！我们之前已经在之前的文章中解决了其中一种情况:springM原创 2017-06-13 19:04:19 · 1929 阅读 · 0 评论 -
Bootstrap框架---Uploadify插件----多张图片上传交互方式二
我们在前一章已经实现了Bootstrap框架---Uploadify插件----多张图片上传交互方式一 。Bootstrap框架---Uploadify插件----多张图片上传交互方式一本章主要关注多张(动态张数)图片上传在Bootstrap框架中的布局和实现。我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架，在此基础上记录 多张图片上传在Bootstr原创 2017-06-19 18:14:19 · 3023 阅读 · 1 评论