未来往事
与人交往,要善于发现别人的优点。 [2017年 第29周/共52周]

JQuery 插件的编写

jquery的插件机制

为了方便用户创建插件,jquery提供了$.extend()和$.fn.extend()方法。
$.extend(object) ,用于扩展jQuery类本身,也就是用来在jQuery类/命名空间上增加新函数,或者叫静态方法.
例如 jquery内置的 ajax方法都是用$.ajax()这样调用的,有点像 “类名.方法名” 静态方法的调用方式。

  1. $.extend({
  2. minValue: function (a, b) {
  3. // 比较两个值,返回最小值
  4. return a < b ? a : b;
  5. }
  6. });
  7. //调用
  8. var i = 100; j = 101;
  9. var min_value = $.minValue(i, j); // min_value 等于 100
+阅读全文

下拉刷新/上拉加载更多/上滑加载更多-移动端

元素容器
<div class="wrap"></div>

下拉载入更多处理方法

  1. <script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
  2. <

......
+阅读全文

jQuery图片裁剪插件Cropper

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流程图拖拽构建

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甘特图开发基础

jQuery.Gantt插件是一个非常轻量级的插件,使用纯HTML代码创建甘特图,不需要矢量图形或图像。插件支持拖拽调整甘特块和回调函数更新数据。

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

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

【参考文献】
jQuery.Gant:http://taitems.github.io/jQuery.Gantt/
......
+阅读全文

批量删除/复原 批量选中js

批量删除 批量复原js jquery

  1. <script type="text/javascript">
  2. function chkbox(){
  3. $
......
+阅读全文

ul菜单居中_水平居中css样式

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

示例ul导航菜单HTML代码:

  1. <div class="nav">
  2. <ul>
......
+阅读全文

php生成多级目录函数

php生成多级目录的方法函数.
  1. function mkdirs($dir){   
  2.   return is_dir($diror (mkdirs(dirname($dir)) and mkdir($dir,0777));   
  3. }  
函数说明:
(1)函数:bool is_dir ( string $filename )
功能:判断给定文件名是否是一个目录,如果文件名存在并且为目录则返回 TRUE。如果 filename 是一个相对路径,则按照当前工作目录检查其相对路径。
注: 本函数的结果会被缓存。更多信息参见 clearstatcache()。

(2)函数:dirname(path)
+阅读全文

js判断是否是手机或移动设备访问

js判断是否是手机访问,js判断是否移动设备,使用navigator.userAgent.toLowerCase()判断移动端类型,js简单判断设备
  1. var ua  = navigator.userAgent.toLowerCase();  
  2. if(ua.indexOf('android') != -1 || ua.indexOf('iphone') != -1 || ua.indexOf('ipad'
......
+阅读全文

jquery图片加链接

jquery设置图片超链接:
  1. <script type="text/javascript">    
  2.         $(document).ready(function() {    
  3.     
  4.            
......
+阅读全文

js/jQuery监听网页回车事件 form表单提交

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

jQuery监听网页回车:
  1. $(document).keyup(function(e){  
  2.     var curKey = e.which;   
  3.     if(curKey==13){  
  4.         //具体操作处理方法  
  5.     }  
  6.  });  

js监听网页回车:
+阅读全文

discuz memcache+ssrf GETSHELL漏洞解决方案

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

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

解决方法:
打开/source/function/function_core.php
搜索
  1. $content = preg_replace($_G[
......
+阅读全文

js拉幕广告代码

js拉幕广告代码,拉幕广告js代码,网页拉幕广告
  1. <html>
  2. <head>
  3. <meta http-equiv="Cont
......
+阅读全文

html a标签提交表单

html a标签提交表单
方法一:

  1. <form name="subForm" action="" method="get">

......
+阅读全文

带动态时间/公历/农历日期的js效果代码

显示动态时间 公历 农历日期的js效果代码

效果图

HTML & Javascript代码
  1. <div

......
+阅读全文