jQuery插件之——简单日历

最近在研究js插件的开发,以前看大神们,对插件都是信手拈来,随便玩弄,感觉自己要是达到那种水平就好了,就开始自己研究插件开发了.研究了一段时间之后,就开始写了自己的第一个日历插件,由于是初学插件开发,代码的可读性可能有点差,希望各位大神可以多提点意见,以后维护代码,让这个插件更加的完整.下面就贴出代码. 首先,给插件来个整体的div容器 <div class="y-total"></div> 本人习惯给容器取class或id名时,加上自己独特的前缀,这样,有助于…

jquery插件生成简单二维码

除了利用第三方网站生成二维码外,这是一个比较简单的办法吧. <script src="/Scripts/jquery.qrcode.min.js" type="text/javascript"></script> //引入jquery插件库 <script type="text/javascript"> $(document).ready(function() { $(".mobile").…

JQUERY插件JqueryAjaxFileUplaoder----更简单的异步文件上传

异步上传相信大家都做过类似的功能,JqueryAjaxFileUploader为我们提供了更简单的实现和使用方式.不过既然是JQUERY的插件那么它所依赖的环境大家都懂得.JqueryAjaxFileUploader并不华丽,也没有提供美化文件上传控件的css,它并不像jQuery File Upload(喜欢的同学可以去尝试下),提供了美观的样式和专门的图片预览.多任务上传等等, JqueryAjaxFileUploader 所拥有的很简单,只是异步上传文件的功能,当然这并不排除由你亲自为它披…

jquery编写的简单日历

以前在开发web页面的时候遇到日历,都是直接引入一些日历组件来用,一直不太明白实现原理,总感觉挺复杂的. 今天尝试着用jquery写了一个简单的日历功能,可以选择年份,月份,返回今天,原来简单的日历功能自己也是可以写的.至于日历中的其他一些强大功能相信只要努力,也是可以实现的. 下面贴出实现的代码,供小伙伴们参考,希望对你们有一些帮助. 一.首页是html代码,其中的css,js引入路径和文件名需要自己改一下,其中我用的是jquery的1.8.3,可以引入其他更高版本,自行引入. <!DOCTY…

2014年50个程序员最适用的免费JQuery插件

有用的jQuery库是设计师和开发者之间一个非常熟悉的短语.这是现在互联网中最流行的JavaScript函数库之一.每个设计师和开发人员都应该知道它的重要性,而且熟悉它的功能和特点. jQuery几乎可以解决一个网站所有的问题它可以从做一个有吸引力和创意的网站解决所有那些阻碍你的问题如果你想解决任何跨浏览器的问题,那就必须收藏使用JavaScript函数库 jQuery库是Web开发人员的重要来源.你会发现很多互联网的jQuery插件都是免费使用的,但发现这些优秀的jQuery插件,需要你花…

jQuery简单日历插件版

先来看demo:http://codepen.io/jonechen/pen/xOgZMz 插件代码: ; (function($) { var Calendar = function(ele, options) { this.ele = ele; this.opt = options; this.defaults = { color: 'blue', fontsize: '14px', } this.obj = $.extend({}, this.defaults, this.opt); };…

jQuery插件实战之fullcalendar（日历插件）Demo

jQuery的插件许多,应用的场景也很丰富,今天我这里给大家介绍一款很有用的日历页面开发插件 - fullcalendar,眼下最新版本号是1.5.1,使用这款插件可以高速帮助你高速编程实现基于web的日历查看功能,大家可能都使用过outlook的日历项功能,使用日历界面能更方便的查看待办事项或者约会.开发过程高速方便.插件首页的文档也很全.当然眼下仅仅有英文文档.不错插件支持多语言,这个很不错. 在过去web程序开发中,我以前使用这个插件开发了公司内部的会议室预定系统,这里我简单的介绍一下fu…

一个简单的消息提示jquery插件

最近在工作中写了一个jquery插件,效果如下: 就是一个简单的提示消息的一个东西,支持最大化.最小化.关闭.自定义速度.自定义点击事件,数据有ajax请求和本地数据两种形式.还有不完善的地方,只做了最基本的功能,等有了修改再上传上来. /** * 消息提示<br> * 自动生成的html结构如下: * * <div class="title">消息提醒 <div class="toggle" style="">…

【UI插件】简单的日历插件（下）—— 学习MVC思想

前言我们上次写了一个简单的日历插件,但是只是一个半成品,而且做完后发现一些问题,于是我们今天尝试来解决这些问题 PS:距离上次貌似很久了上次,我们大概遇到哪些问题呢: ① 既然想做一套UI库,那么就应该考虑其它UI库的接入问题这个意思就是,我们的系统中所有UI插件应该有一些统一行为,我们如果希望统一为所有的插件加一点什么东西,需要有位置可加这个意味着,可能我们所有的插件需要继承至一个抽象的UI类,并且该类提供了通用的几个事件点 ② 上次做的日历插件虽然说是简单,其耦合还是比较严重的(其实…

编写一个简单的Jquery插件

1.实现内容定义一个简单的jquery插件,alert传递进来的参数 2.插件js文件(jquery.showplugin.js) (function ($) { //定义插件中的方法 var methods = { //Object showName: function (name) { alert('Name:' + name); }, showAge: function (age) { alert('Age' + age); } }; //method方法名 $.fn.showplugi…

插件介绍：cropper是一款使用简单且功能强大的图片剪裁jQuery插件。

简要教程 cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. cropper提供了大量的参数.方法和事件供图片的剪裁操作. 安装可以通过Bower或NPM来安装该插件. 1 2 bower install cropper npm install cropper 使用方法使用该图片剪裁插件首先要引入必要的js和css文件. 1 2…

jquery插件——日历控件

今天在网上有看到一个jquery插件——日历控件,不过之前也在柯乐义的网站上看到了(http://keleyi.com/ 推荐下) 这个插件看着比较大气,所以干脆也分享下,以后自己也好用一点儿 1.页面调用css <link rel="stylesheet" type="text/css" href="css/manhuaDate.1.0.css"/> 2:页面引入js <script type="text/javas…

一个很简单的jQuery插件实例教程(菜鸟级)

很多公司的前端设计开发人员都是女孩子,而这些女孩子很多JavaScript技能都不是很好.而前端开发过程中,JavaScript技能又是必不可少的.所以,如果前端小MM正在为某个JavaScript效果发愁的时候,你潇洒的过去,然后对她说:“嗨,美女,用这个吧.这是我写的一个jQuery插件.”我想基本上你的人生大事就能很快解决. 先想好做个什么功能这是第一步,也是很重要的一步,鉴于咱们都是刚学习写jQuery插件,所以,这个功能一定要简单一些.不要想一口就吃个胖子,咱也吃不了.咱还是捡个瘦的…

jQuery插件实现的方法和原理简单说明

下文来自 http://www.itzhai.com/jquery-plug-ins-to-achieve-the-methods-and-principles-of-simple-instructions.html jQuery插件实现的方法和原理简单说明 jQuery是一个封装的很好的类,比如我们使用$("#username")会生成一个 jQuery类的实例. 1.jQuery插件开发主要使用如下两个方法: 1.1.添加静态方法 jQuery.extend(object); 为扩…

jQuery懒加载插件 – jquery.lazyload.js简单调用

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. 一.下载和引用官网下载地址:http://plugins.jquery.com/lazyload/ Lazy Load 依赖…

JQuery插件让图片旋转任意角度且代码极其简单 - 摘自网友

JQuery插件让图片旋转任意角度且代码极其简单 2012-04-01 09:57:03 我来说两句收藏我要投稿引入下方的jquery.rotate.js文件,然后通过$("选择器").rotate(角度);可以旋转任意角度, 例如$("#rotate-image").rotate(45);把这句放在$(document).ready(function(){ });中就是将id为rotate-image的图片旋转45度. 不过,貌似在…

JQCloud: 一个前端生成美化标签云的简单JQuery插件

本文原文地址:https://jiang-hao.com/articles/2018/blog-JQCloud.html 因为博客需要,发现了一个生成美化简约风格的标签云的JQuery插件. 官网地址:http://mistic100.github.io/jQCloud/index.html 使用方法很简单,可以把JS和CSS文件下载到本地,也可以直接通过Script标签src=""的方法在线引用. 具体的使用方法官网都能查到. 页面效果展示:https://jiang-hao.com…

jquery插件Flot的简单讲解

只是说一下基本用法,举一两个例子,详细用法请查看官方文档使用方法是要先引入jquery插件,然后引入flot插件. <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../js/jquery.flot.j…

最简单的原生js和jquery插件封装

最近在开发过程中用别人的插件有问题,所以研究了一下,怎么封装自己的插件. 如果是制作jquery插件的话.就将下面的extend方法换成 $.extend 方法,其他都一样. 总结一下实现原理: 将方法体封装在一个自执行的函数体里面,防止变量污染. 默认参数在options设置,extend方法有由for-in遍历得到,使得参数为用户制定参数.this.init是项目初始化,init,extend,event方法都是在demo对象的原型链上面的方法,方便调用.将自己的方法直接卸载event方法…

第四十三课：jQuery插件化

我们先来看一个最简单的例子: (function($){ $.fn.extend({ //把此插件添加到jQuery的原型上 pluginName:function(){ //插件的名字 return this.each(function(){ //遍历匹配元素的集合 //插件要实现的功能 }); } }); })(jQuery); //传入jQuery对象由于jQuery是集化操作($("div")会选择多个div元素进行操作),而我们的插件编写应该一个元素…

【转】20个令人敬畏的jQuery插件

为网页设计师和开发推荐20个令人敬畏的jQuery插件.例如滑块,图像画廊,幻灯片插件,jQuery的导航菜单,jQuery文件上传,图像旋转器,标签的插件,用户界面元素,网络接触形式,模态窗口,工具提示,字体大小,和许多其他真棒jQuery脚本收集在一个地方. jQuery OrgChart Plugin For Creating Visualising Organization Charts With jQuery jOrgChart jQuery的创建可视化组织结构图 jOrgChar…

18 个最新实用的 jQuery 插件

1. Simple Effects for Drop-Down Lists 一个jQuery插件用于将普通的select控件转成一个带有一些简单扩展效果的下拉列表. 2. X-editable 这个插件能够让你在页面上创建可编辑的元素.它能够使用任何引擎(bootstrap.jquery-ui.jquery),并且包含弹出式和内联模式. 3. Garlic.js Garlic.js自动在本地保存表单文本字段的值,直到表单被提交.这样,你的用户如果不小心关闭选项卡或浏览器,也不会失去任何宝贵的数据…