拖放排序是WEB应用中常见的功能.虽然网上有很多别人已经造好的轮子,但是就我个人而言,没事就喜欢研究原理,自己造轮子,不管强大与否,简洁够用就是我的目标,再一个就是自己写的东西,应用起来得心应手,修改或者扩展起来也是得心应手,相比一些API不够详细,或者说用户体验不好(不够简明)的API来说,或者说插件本身就没考虑周到,考虑周到又显得臃肿来说,使用它还不如造它. 接下来回到插件,先看看漂亮的UI(参照Teambition的任务面板做的,算不算广告 [/惊叹]),插件目前只做了(针对)上下拖放排序…
当需要在网站中添加拖放排序功能的时候,jQuery UI 的排序组件可能是最流行的解决方案.今天给大家介绍另一款简单灵活的 JavaScript 拖放排序插件——Sortable,它使用 HTML5 原生的拖放 API 来实现拖放,并支持在触屏设备上使用. 您可能感兴趣的相关文章 推荐35款精致的 CSS3 和 HTML5 网页模板 精选12款优秀 jQuery Ajax 分页插件和教程 10大流行的 Metro UI 风格 Bootstrap 主题 8款效果精美的 jQuery 加载动画和进度…
本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址:http://keleyi.com/a/bjad/emf1jc13.htm 示例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt…
jQuery 表格排序插件 Tablesorter 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面): <script src="lib/jquery-1.8.3.min.js"></script> <!--tablesorter--> <link href="css/css_tablesorter_green/style.css" rel="stylesheet" type="…
FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所有初级和高级网页设计师使用.不过很多人都只是使用默认的参数,今天来说说具体的参数来给大家看看! $(window).load(function() { $('.flexslider').flexslider({ animation: "fade", //String: Select your animation type, "fade" or "sl…
html5支持drag的拖放排序插件sortable.js <script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.5.1/Sortable.min.js"></script> //拖放+排序 Sortable.create(simpleList, { animation: 150, //动画参数 onSort: function(evt) { // console.log(settings.rowNum…
经测试,Sortable.js 兼容好和使用方便都是比较不错的,特别手机端使用很棒 介绍 Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大)下载地址:https://github.com/RubaXa/Sor...官方DEMO:https://sortablejs.github.io/Sortable 特点 支持触屏设备和大部分浏览器(IE9以下的就不支持了,原因都懂得) 可以从一个列表容器中拖拽一个列表单元到其他容器或本列表容器中进行排序 移动列表单元时有…
特点 支持触屏设备和大部分浏览器(IE9以下的就不支持了,原因都懂得) 可以从一个列表容器中拖拽一个列表单元到其他容器或本列表容器中进行排序 移动列表单元时有css动画 支持拖放操作和可选择的文本(这句我也没理解,大概意思就是对原生的拖放进行拓展了) 非常友善的滚动效果 基于原生HTML5中的拖放API 支持多种框架(angular.vue.react等) 支持所有的css框架,像Bootstrap 简单的API,方便使用 CDN 不依赖jQuery 安装 npm安装 $ npm install…
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.js"></script> <link href="…
Table Dragger 是一个极简的实现拖放排序的表格插件,纯 JavaScript 库,不依赖 jQuery.用于构建操作方便的拖放排序功能,超级容易设置,有平滑的动画,支持触摸事件. 在线演示      免费下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白富美型 jQuery 图片轮播插件 本…
ablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载jQuery和tablesort脚本,并在html中引用该脚本文件: <script type="text/javascript" src="../jquery-latest.js"></script> <script type="t…
jQuery相对与Flash的魔力已经贯穿整个网络.尽管,Flash层被认为是用于网页设计的首选,然而随着jQuery的出现,以及他的酷似Flash的交互式特效使得网页更加的优雅——Flash开始靠边站了. 相比笨重的Flash,使用jQuery可以轻松的创建复杂的自定义动画效果以及提供友好的SEO,因此在两者之间的选择也就是明摆着的事儿了. 一些酷炫的jQuery 图片效果,类似于不同方向滑入,轻松添加动画,掷入.排序.放大效果,摇拍,图片拍摄效果,滑动效果以及大量其他的仅仅需要少量编码的特效…
1.DynaTree (推荐使用,说明文档以及样例在下载的压缩包里\doc\samples.html) DynaTree 是一个优化的动态jQuery树查看插件,它只在需要时才创建DOM元素.支持checkbox.层级选择以及拖放功能.并且支持ajax和延迟加载.开源协议:MIT和GPL. Demo:http://wwwendt.de/tech/dynatree/doc/samples.html 下载地址:http://code.google.com/p/dynatree/ 文档:http://…
设计师和开发人员总是试图使用新技术让网站更智能,而我们发现在许多网站上 jQuery 的图像滑块插件是非常受欢迎的.本文继续介绍 15 个 jQuery 图像滑块插件以供您选择. ELASTISLIDE – 响应式的jQuery传送带插件 Flexslider 很帮的全响应式的 jQuery 滑块插件 Thumbnail Gallery Plugin 用户创建相册展示并自动缩放到其容器大小的 jQuery 插件 ELASTIC IMAGE SLIDESHOW WITH THUMBNAIL PRE…
第一款 noty 官方网站:https://github.com/needim/noty 第二款 artDialog artDialog是一个精巧的web对话框组件,压缩后只有十多KB,并且不依赖其他框架. 官方网站: https://github.com/aui/artDialog 第三款 qTip qTip2 是一个漂亮的 jQuery 的工具提示插件 demos:http://qtip2.com/demos 官方网站:http://qtip2.com/download…
demo:http://www.sucaihuo.com/jquery/0/6/demo/ FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所有初级和高级网页设计师使用.不过很多人都只是使用默认的参数,今天来说说具体的参数来给大家看看! $(window).load(function() { $('.flexslider').flexslider({ animation: "fade", //String: Select you…
Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <head> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascript" sr…
图片画廊 今天分享一个自己实现的jQuery 图片画廊插件. 看一下效果图: 点击图片时: 在线演示地址:http://www.jr93.top/photoGallery/photoGallery.html 使用 使用也是很简单,代码如下: <div id="photoGallery-container"> <img class="photoGallery" data-src="img/1-1.jpg" src="im…
前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!>受到很多网友的喜爱,今天特别推出姊妹篇<纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!>,希望大家喜欢! 前言 FineUI控件库发展至今已经有 5 个年头,目前论坛注册的QQ会员 5000 多人,捐赠用户 500 多人(捐赠用户转化率达到10%以上,在国内开源领域相信这…
前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!>受到很多网友的喜爱,今天特别推出姊妹篇<纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!>,希望大家喜欢! 前言 FineUI控件库发展至今已经有 5 个年头,目前论坛注册的QQ会员 5000 多人,捐赠用户 500 多人(捐赠用户转化率达到10%以上,在国内开源领域相信这…
原文:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401571467&idx=1&sn=08cb00963e6efd3881d3397903e84752&scene=1&srcid=0125cT8n9FJMI1u2faaQgjcS&from=singlemessage&isappinstalled=0#wechat_redirect 英文原文链接:http://www.queness.co…
纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!   前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!>受到很多网友的喜爱,今天特别推出姊妹篇<纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!>,希望大家喜欢! 前言 FineUI控件库…
原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edg…
MixItUp 是一款轻量,但功能强大的 jQuery 插件,提供了对分类和有序内容的美丽的动画过滤和排序功能.特别适合用于作品集网站,画廊,图片博客以及任何的分类或有序内容. 它是如何工作的? MixItUp 根据你的过滤条件决定哪些内容隐藏,显示或重新定位,然后应用 CSS3 transitions 平滑动画到新位置.这是一个非常有效的方法,借助了现代浏览器的渲染能力,并避免过多的使用 jQuery 进行 DOM 操作. 您可能感兴趣的相关文章 前端开发精华文章集锦(jQuery.HTML5…
toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置,在官方站可以通过勾选参数来生成JS,非常的方便使用.jQ酷的另外一款jquery提示插件也不错:jQuery自定义工具提示插件DarkTooltip. 使用方法: 引入核心文件 1 2 3 <link href="toastr.css" rel="stylesheet" type="…
10个漂亮的jQuery日历插件下载 2013-08-07 标签:jQuery日历插件jQuery日历jQuery插件   日期是非常重要的,随时随地.微薄或网站的日期选取器日历必须在那里.您可以使用任何的jQuery日历插件,对于任何不同的网络应用程序,如自由职业者的计费应用程序,事件管理应用程序或任何日期是非常重要的.今天,我们搜集了10个美丽的jQuery日历插件,你可以随时随地使用下载应用. glDatePicker glDatePicker是一种简单的,可定制的,轻巧的日期选择器. j…
一个简单精致的jQuery带箭头提示框插件 插件写好快一年了,和一个 弹出框插件(点击查看) 一起写的,一直没有整理出来,昨天得功夫整理并放到了github上,源码和网站均可在线看或下载. CSS中的三大要素,位置.大小.可见性,在这个插件中均有体现,直接看代码吧. 示例地址  http://tianshaojie.github.io/tooltips/example.html 1.0.0 位置:提示框可显示在目标元素的上下左右 对齐:提示框与目标元素的对齐方式,自动调节箭头显示位置,指向目标元…
自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个,兼容ie8以上浏览器,别忘了引用jquery,我用的jquery/1.11.0/其他版本没有测试,另外需要注意的时候设置要局部放大的图片以及外部容器的宽度必须一致,否则效果不正确 (function($){ var wlfimgzooms=[]; $.fn.wlfimgzoom=function(options){ if ($(this).length > 1) { var instances = […
大概是四月初开始写的,中间停了有一个月吧.这是我在Github的第一个项目.项目地址:https://github.com/linzb93/jquery.slide.js. 轮播应该是最好写的插件了,也是每个前端应该掌握的技术之一,但是后期功能的拓展,维护性什么的,就不是凭空想象可以解决的. 会去写这个插件,有两个考虑,一个是要提升自己的编码能力,现在工作中能用到的技术不过尔尔(例如面向对象什么的几乎用不上),最好能有一个Side Project 练练手:另一个是现在部门里常用的两个插件,swi…
长阴影设计是平面设计的一个变体,添加了阴影,产生了深度的幻觉,并导致了三维的设计.在本教程中,我们将创建一个jQuery插件,通过添加完全可自定义的长阴影图标,我们可以轻松地转换平面图标. 戳我查看效果图 在本节教程中,我们将介绍长阴影设计的元素,我们将创建一个简单的jQuery插件,让我们来设计这些元素. 让我们开始吧! 长阴影元素设计设计是什么? 我们将把这个元素分离为不同的部分,以此组成一个完整的长阴影设计: 主要元素,或元素投射阴影. 阴影长度通常很长,因此给出了效果的名称.阴影长度也给…