未来往事
本分类下收藏如下文章:Web前端技术 | SEO 搜索引擎优化 | Web相关技术文章

jQuery图片裁剪插件Cropper 多云

Rinald 本站原创 WEB前端 2017/03/18 18:15
Cropper:一个简单的jQuery前端图片裁剪插件。
功能特性:
支持选项
支持方法
支持事件
支持触屏 (移动端)
支持缩放
支持旋转
支持翻转
支持 canvas
支持多个 croppers
跨浏览器支持

主要文件Main:
dist/
├── cropper.css     ( 5 KB)
├── cropper.min.css ( 4 KB)
├── cropper.js      (67 KB)
└── cropper.min.js  (24 KB)

使用介绍:


已知问题:
1.关于getCroppedCanvas方法:canvas.drawImage API 在某些 Mac OS / iOS 浏览器上将会根据 EXIF 方向自动旋图片,所以输出的剪裁画布可能不正确。要修复这个问题,你需要上传剪裁的数据到服务器上完成剪裁的操作,查看例子:Crop Avatar。或者你也可以在使用 cropper 之前处理一下 EXIF方向。
PS:cropper EXIF照片旋转方向前端处理方法参考:
 (a)Exif.js读取图像的元数据
 (b)利用exif.js解决IOS系统手机上传竖拍照片旋转90度问题
 (c)H5中图片上传的那些坑
2.已知的 iOS 资源限制: 由于 IOS 设备会限制内存,浏览器也许会在你剪裁一张大图(iPhone 相机分辨率)的时候崩溃掉。要避免这个问题,你需要在使用 cropper 之前重置图片大小(小于1024 px,如使用localResizeIMG4压缩图片)。

Demo案例参考:
本站Demo参考-建议使用手机浏览器打开测试
点击在新窗口中浏览此图片
+阅读全文

jquery web流程图拖拽构建 晴

Rinald 本站原创 WEB前端 2016/12/09 01:10
js/jquery实现流程拖拽,js/jquery实现web流程设计器,js/jquery动态流程图构建

实现意义:
管理员可以随时根据企业的运营发展情况便捷动态调整企业的组织架构(审批)流程、可视化流程建模,通过流程设计器,快速通过“拖、拉、拽”实现流程定义建模,通过流程监控实时分析流程实例的运行数据分析,提供企业流程的不断优化的依据,同时智能流程版本管理功能,当流程变化较大时旧的实例按旧的流程定义运转,新启动的流程按新版本的流程运转,新旧隔离互不影响。从而降低系统维护人力投入及维护时间。

正文:
JQuery UI的拖拽功能:
JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互、动画、特效等API,并且封装了一些Web小部件(Widget)。同时,JQuery UI继承了jquery的插件支持,有大量的第三方插件可以丰富JQuery UI的功能。
JQuery UI提供的API极大简化了拖拽功能的开发。只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可。
拖拽原理:
首先要明确几个概念。
  ource:拖拽源,要拖动的元素。
  taerget:拖放目标,能够放入source的容器。
拖拽的动作分解如下:
  1. drag start:在拖拽源(source)上按下鼠标并开始移动
  2. drag move: 移动过程中
  3. drag enter:  移动进入目标(target)容器
  4. drag leave: 移出目标(target)容器
  5. drop: 在目标(target)容器上释放鼠标
  6. drag end: 结束
在html5之前,页面元素不直接支持拖拽事件。所以都是通过监听鼠标事件并记录拖拽状态的方式来实现拖拽功能。如:
点击在新窗口中浏览此图片

jsPlumb的流程拖拽功能:
jsPlumb是一个强大的JavaScript连线库,它可以将html中的元素用箭头、曲线、直线等连接起来,适用于开发Web上的图表、建模工具等。它同时支持jQuery+jQuery UI、MooTools和YUI3这三个JavaScript框架,十分强大,大家可以在官网的Demo中看看它的功能。如:
+阅读全文

jQuery甘特图开发基础 不指定

Rinald 本站原创 WEB前端 2016/12/09 00:58
jQuery.Gantt插件是一个非常轻量级的插件,使用纯HTML代码创建甘特图,不需要矢量图形或图像。插件支持拖拽调整甘特块和回调函数更新数据。

点击在新窗口中浏览此图片

关于使用场景的很少案例:项目管理排期、广告系统排期等,欢迎补充

【参考文献】
jQuery.Gant:http://taitems.github.io/jQuery.Gantt/
https://github.com/thegrubbsian/jquery.ganttView

批量删除 批量复原js 不指定

Rinald 本站原创 WEB前端 2016/10/25 18:54
批量删除 批量复原js jquery

批量删除调用方法:

批量复原调用方法:

ul菜单居中_水平居中css样式 不指定

Rinald 本站原创 WEB前端 2016/08/25 19:19
ul li导航菜单居中/水平居中css样式。这个方法较简单,是将容器转成「display:inline-block」行内块级元素,然后就可以直接用「text-align:center」使其达到水平居中效果,也是推荐的方法。

示例ul导航菜单HTML代码:

CSS样式代码:
给外面的div添加「text-align:center」,然后将菜单容器设成「display:inline-block」行内块级元素,菜单浮左「float:left」

这里浏览器兼容只能是IE8或更高版本,所以如果要兼容IE7的话,请加入以下代码

php生成多级目录函数 不指定

Rinald 本站原创 WEB前端 2016/08/25 18:32
php生成多级目录的方法函数.
函数说明:
(1)函数:bool is_dir ( string $filename )
功能:判断给定文件名是否是一个目录,如果文件名存在并且为目录则返回 TRUE。如果 filename 是一个相对路径,则按照当前工作目录检查其相对路径。
注: 本函数的结果会被缓存。更多信息参见 clearstatcache()。

(2)函数:dirname(path)
+阅读全文
js判断是否是手机访问,js判断是否移动设备,使用navigator.userAgent.toLowerCase()判断移动端类型,js简单判断设备

匹配是否各类移动设备:

jquery图片加链接 不指定

Rinald 本站原创 WEB前端 2016/07/11 11:56
jquery设置图片超链接:

补充:wrap()把匹配的元素用指定的内容或元素包裹起来。
wrapAll()把所有匹配的元素用指定的内容或元素包裹起来。

使用js/jQuery监听回车事件, 在特殊情况下我们可能需要通过js监听网页回车事件进行提交form表单参数达到特定目标,本文主要介绍js或jQuery监听网页回车事件或元素容器内回车事件.

jQuery监听网页回车:

js监听网页回车:
+阅读全文
discuz memcache+ssrf GETSHELL漏洞解决方法,进入论坛后台性能优化模块查看是否支持memcache,如果支持再查看是否开启,如果不支持的论坛,可以选择忽略本文。

漏洞信息:
漏动来源:阿里云云盾
漏动名称:Discuz memcache+ssrf GETSHELL漏洞
漏动描述:Discuz存在SSRF漏洞,在配置了memcache的情况下,攻击者可以利用ssrf通过memcache中转,向磁盘上写入WEBSHELL恶意代码,从而造成数据库泄漏;

解决方法:
打开/source/function/function_core.php
搜索

在上述代码上面加入以下代码


js拉幕广告代码 不指定

Rinald 本站原创 WEB前端 2016/05/29 00:38
js拉幕广告代码,拉幕广告js代码,网页拉幕广告

Demo案例:

html a标签提交表单 不指定

Rinald 本站原创 WEB前端 2015/09/08 15:49
html a标签提交表单

方法一:

方法二:


显示动态时间 公历 农历日期的js效果代码
效果图
点击在新窗口中浏览此图片

HTML & Javascript代码
+阅读全文
jQuery error()替换载入错误的图片

error()函数
当元素遇到错误(没有正确载入)时,发生 error 事件。
error() 方法触发 error 事件,或规定当发生 error 事件时运行的函数。
提示:该方法是 bind('error', handler) 的简写方式。

示例:如果图片不存在,则用预定义的图片取代它:
jQuery移除class对应的事件

在使用jQuery进行class更改后发现class对应的点击事件并没有发生改变,究其原因需要在类改变后用off()将之前绑定在类上的事件取消,如果需要事件则重新绑定。

off()函数
用于移除元素上绑定的一个或多个事件的事件处理函数。主要用于解除由on()函数绑定的事件处理函数。

例如:
第1页 / 共7页 第一页 1 2 3 4 5 6 7 下一页 » 最后页 [ 显示模式: 摘要 | 列表 ]