js代码: /*create by code_bunny 20140701 973295131@qq.com https://github.com/OOP-Code-Bunny */ (function ($) { $.fn.autoComplate = function (opts) { this.each(function () { init.call(this, opts); }); return this; }; function init(opts) { var defaultOpti…

上篇文章写到了一个不错的jquery实现邮箱输入自动提示功能,发现还有一个不错的自动提示插件: 先展示结果如图: html代码: <center> <h1>输入邮箱试试!</h1> <br /> <div class="parentCls"><input type="text" class="inputElem"></div> </center> cs…

邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能,所有自己也实现了一个,先看下效果吧,觉得效果还行的就拿去 核心代码(需要jquery的支持): (function($){ $.fn.mailAutoComplete = function(options){ var defaults = { boxClass: "mailListBox", //外部box样式 listClass: "…

记得去年做某个项目的时候,用到了邮箱输入自动提示功能,于是网上搜了一下,发现了这个写得不错,现在回想起来,转载一下,方便查阅. 邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能. 实现效果如图所示: 核心代码(需要jquery的支持): (function($){ $.fn.mailAutoComplete = function(options){ var defaults = { boxClass: "…

基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下     效果图   // JavaScript Document (function($){ $.fn.extend({ "changeTips":function(value){ value = $.extend({ divTip:"" },value) var $this = $(this); var indexLi = 0; //点击document隐藏下拉层 $…

最近在公司做一个项目,由于后台数据太多需要分页显示,在网上找了很多插件都没有找到合适的分页插件,所有的分页插件始终达不到自己想要的效果.由于这个项目也不是很赶,就在网上查找各种资料,自己写一个基于jquery的分页插件:在接下来的一篇博客中我将详细为大家介绍如何基于jquery书写分页插件,在讲解之前,先给大家介绍一下基于jquery书写插件的相关知识! jquery插件开发主要有三种方法: 1.通过$.extend()方法来拓展jquery: 2.通过$.fn向jquery添加新的方法:这次在…

表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~  而我工作中用到最多的就是基于基于jQuery的Validate表单验证~  就向下面这样~ 因为今天有个朋友问我要一个表单的验证,所以我就稍微整理了一下~  基本上有了这个表单验证插件,基本上一些常用的验证都可以搞定了~ 如果搞不定,没关系,我们还可以基于Validate来写一个自己的验证插件, 我把它取名为message_zh.js,我们可以在里面扩展自己需要的验证~~ 既然Validate是基于jQ…

基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Validate的表单验证前,我们先回顾一下基础纯JS的表单验证. 1.回顾基于JS的表单验证 我们先写一个简单的验证邮箱.手机号的表单,页面代码如下: <form action="XXXX.action" method="post" onsubmit="ret…

1.jQuery时间轴插件:jQuery Timelinr 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚动.支持键盘方向键.经过扩展后可以支持鼠标滚轮事件. 在线演示一 在线演示二 在线演示三 源码下载 2.使用Ctrl+Enter提交表单 我们发表微博或论坛发帖时,在内容输入框中输入完内容后,可以点击 提交 按钮来发表内容.可是,如果你够 懒 ,你可以不用动鼠标,只需按住键盘上的Ctrl+Enter…

jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQuery 插件. 所以今天我们将展示一些很酷的文本效果插件,将帮助你为你的 Web 页面创建一些很酷的和动态的东西.这里是20个基于 jQuery & CSS 的文本效果插件. 您可能感兴趣的相关文章 12款经典的白富美型 jQuery 图片轮播插件 让网站动起来!12款优秀的 jQuery 动画插件…

placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值.该提示会在输入字段为空时显示,并会在字段获得焦点时消失.placeholder 属性适用于以下类型的 input 标签:text, search, url, telephone, email 以及 password. 我们先看下在谷歌浏览器中的效果,如图所示: 获得焦点时: 输入字段: 因为是 html5 属性,自然低版本的浏览器比如 ie6-8 不兼容.下面就介绍下如何在低版本浏览器中…

Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizontal Accordion 具有XBOX360 blade界面风格的水平方向Accordion. jQuery-Horizontal Accordion AutoComplete-JQuery jQuery插件易于集成到现在的表单中(Form). AutoComplete-JQuery Facebook…

function chekmail() { var szReg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; var mailadress = prompt("请输入邮箱地址"); if(!szReg.test(mailadress)) { alert("请填写邮箱的邮箱地址!"); return; } } 这是一段简单的jQuery验证邮箱地址/格式是否规范的一个方法,其中…

1.HTML5 Loading动画加载 五彩的圆环Loading 今天我们要分享一款基于HTML5的Loading加载动画特效,这款HTML5加载动画是一个五彩的圆环,圆环不停地转动从而体现加载正在进行.如果你感兴趣,可以查看这款HTML5 Loading动画的在线演示,效果还不错. 在线演示 源码下载 2.jQuery产品图片横向滚动 自定义滚动条 这是一款很棒的jQuery图片滚动插件,这款jQuery插件有以下特点:可以设置任意数量的图片,并且点击图片即可将当前图片激活放大.也可以点击左右…

前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客园学习了很多的知识,看过很多人的分享.说来也惭愧,自己没能为园友们分享自己的所学所得(毕竟水平比较差). 过去的一年也是辗转了几个城市换了几份工作(注定本命年不太平?).八月份来到现在所在的公司(OTA行业),公司是做互联网的,所以可能大家的前端都屌屌的?之前一直从事.NET开发(现在在这边也是),…

使用很简单. 代码如下: $('#pass').passwordStrength();  XHTML 代码如下: <p><label>请输入密码:</label> <input type="password" id="pass" class="input" /></p> <div id="passwordStrengthDiv" class="is0&…

城市选择插件的难度不是很大,主要是对dom节点的操作.而我写的这个插件相对功能比较简答,没有加入省市联动. 上代码好了,参照代码的注释应该比较好理解. /* *基于jquery的城市选择插件 *author:youziclub *2015-4-22 */ ;(function($){ $.fn.city=function(options){ // 城市信息 var nav=['热门','A-G','H-L','M-T','W-Z','其他']; var cityName=["上海,北京,广州,昆…

基于jQuery仿去哪儿城市选择代码.这是一款使用的jQuery城市选择特效代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="lineSearch"> <ul> <li class="thRelative" id="hhDrop00"> <div class="boxSearch"> <span class="k…

基于jQuery会员中心安全修改表单代码.这是一款登录密码,交易密码,手机号码,实名认证,电子邮箱,安全设置表单,会员表单等设置代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="Safety"> <dl> <dt> <strong>登录密码:</strong> <span>保障账户安全,建议您定期更换密码</span> <b><span…

基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type="button" class="one" value="点击我查看效果" /> <div class="box"> <div class="box2"> <div class=&quo…

基于jQuery实现汉字转换成拼音代码.这是一款基于jQuery.Hz2Py.js插件实现的汉字转拼音特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <br /> <br /> <br /> <br /> <br /> <center> 在这里输入汉字<br /> <textarea id="content"> </textarea><br /&g…

基于jQuery的软键盘   前些天写了一个基于基于jQuery的数字键盘,今天给大家带来一个基于jQuery的全字母键盘插件(支持全字母大小写切换,数字输入,退格清除,关闭功能,可调整大小和键盘位置(可设置固定在屏幕右下角),支持鼠标和触屏拖动,并且特意保留了四个常用字符"_","-",".","/".还有按键记忆功能哦,可自动改变使用频繁按键的背景颜色.). 在线演示 效果截图: 页面效果参照PolarBear的使用CSS…

今天终于完成了基于jquery的分页插件的代码编写,也通过了功能测试,实现了分页功能:由于刚开始写jquery的插件,所以梳理逻辑的时间也很长,整个过程整整一周时间,今天终于搞完了,先将整个分页插件的逻辑分享给大家,并将源码上传到自己的github仓库,有需要的请点击这里下载:给大家先看一下效果图; 整个分页逻辑如下: 首先判断分页类型,有两种情况,第一:pageCount > showNum:第二:pageCount <= showNum: 在第一种情况下还会出现如下三种情况; 1.page…

基于jQuery开发,非常简单的水平方向折叠控件.主页:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-accordion.html (无法找到)下载:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-accordion.html 示例:http://letmehaveblog.blogspot.com/2007…

这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天,需要一个7X6的表格去装载 ·如果知道了某个月份1号是星期几,这个月份有多少天,一个循环就可以显示某个月的日历了吧(眼睛都放光了*.*) ·加上一些控件让用户可以方便操作吧(比如可以输入年份.月份,可以点击选择年份.月份) 新建一个html文件,html结构: <div class="con…

有时,我们需要在网页上使用软键盘.今天,就给大家带来一个基于jQuery的数字键盘插件,除了jQuery,不需要依赖任何文件资源.纯数字键盘,有退格,有清除,不支持输入小数(需要的可以自己改一下,主要是多个小数点就有13个键,不好排列了,呵呵).支持鼠标拖动和触摸拖动,可关闭. 在线演示 1.页面代码 <ul> <li><input type="text" placeholder="手机号码后四位" id="numkeyboa…

今天给大家分享一款基于jQuery的注册表单,这款注册表单的特点是确认提交注册信息时,表单会自动验证所填写的信息,如果信息填写有误,即会在相应的字段内以Tooltip提示框的形式显示错误信息.这款jQuery表单实现非常简单,使用起来相对比较轻巧. 在线预览   源码下载 这款插件js要引用jquery.js库,还有一个easyform.js 库. html代码部分如下: <div class="form-div"> <form id="reg-form&q…

我们在QQ聊天或者发表评论.微博时,会有一个允许加入表情的功能,点击表情按钮,会弹出一系列表情小图片,选中某个表情图片即可发表的丰富的含表情的内容.今天和大家分享一款基于jQuery的QQ表情插件,您可以轻松将其应用到你的项目中. 首先在html页面的head中引入jQuery库文件和QQ表情插件jquery.qqFace.js文件. <script type="text/javascript" src="jquery-1.7.2.min.js"><…

Selectize.js Selectize 是一个基于 jQuery 的 <select> UI 控件,对于标签选择和下拉列表功能非常有用. Selectize 的目标是通过简单而强大的 API 提供坚实可用的用户体验. 主要特色: 简洁的 API,有详细的帮助文档: 支持智能排序和多属性搜索,甚至可以使用打分函数进行排序的: 支持键盘操作,对用户使用友好: 支持同时选择和删除多个项目: 支持远程数据加载,例如 Ajax 调用: 使用示例: 单选选择 ? 1 2 3 4 $('#select…

特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/mao2080/ 1.效果示例 2.代码样式 /* * 基于jquery 分页插件 * by mao2080@sina.com */ $(function (){ window.pageUtil = { /** * 构建分页 * @param {Object} divId 要绑定的容器 * @par…