随笔档案「2012年3月」 - 咖啡戏

Adipoli jQuery Image Hover Plugin

摘要：Adipoli is a simple jQuery plugin used to bring stylish image hover effects.DemoHow To UseEnabling image hover effect is very simple. Place the below references inside your head tag.<link href="css/adipoli.css" rel="stylesheet" type="text/css"/><script src=&quo 阅读全文

posted @ 2012-03-26 21:30 咖啡戏阅读(374) 评论(0) 推荐(0)

CSS3圆角属性

摘要：1. Basic shapesA. SquareThis not exactly css3 but I thought we need to cover all shapes and actually this is mostly where all the other shapes will start from. In fact all other shapes will be square with tweaked corners or borders .. you will get the idea later …1 .square{2 display:block;3 width:10 阅读全文

posted @ 2012-03-24 23:05 咖啡戏阅读(388) 评论(0) 推荐(0)

Google网页字体在线服务

摘要：目前网页上使用的字体都是常见的几种，如’Lucida Grande’, Verdana, Arial, Sans-Serif,中文常见的有宋体。要想用比较个性的字体就比较麻烦了，因为你不能保证客户端是否支持这种字体，常用的方法是用Photoshop 把文字制作成图片。为了让网页设计更加灵活，Google从2010年5月19日启动了网页在线字体服务，并一口气发布了十八字体族。但与 Monotype Web Fonts、FontShop 等字体商不同，Google 这次开放的字体与它其他很多服务一样，完全免费。Google 目前提供的字体共有十八种，均为目前比较流行的免费字体，包括为 Andro 阅读全文

posted @ 2012-03-24 22:45 咖啡戏阅读(311) 评论(0) 推荐(0)

jQuery lightBox plugin

摘要：How to useParte 1 - SetupjQuery lightBox plugin uses the jQuery JavaScript library, only. So, include just these two javascript files in your header.<script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/jqu 阅读全文

posted @ 2012-03-24 22:34 咖啡戏阅读(386) 评论(0) 推荐(0)

分享一段有趣的评论统计信息代码

摘要：HotNews Pro主题评论提示信息，显示为总的评论数，并单独统计显示访客和博主及来至外部的引用，显示效果如下：目前有 314 条留言其中：访客:240 条, 博主:70 条引用: 4 <h2 id="comments">目前有 <?php $my_email = get_bloginfo ( 'admin_email' ); $str = "SELECT COUNT(*) FROM $wpdb->comments WHERE comment_post_ID = $post->ID ... 阅读全文

posted @ 2012-03-24 21:41 咖啡戏阅读(167) 评论(0) 推荐(0)

经典JavaScript正则表达式实战

摘要：匹配结尾的数字如 30CAC0040 取出40 3SFASDF92 取出92正则如下：/\d+$/g统一空格个数字符串内字符键有空格，但是空格的数量可能不一致，通过正则将空格的个数统一变为一个。例如：蓝色理想变成：蓝色理想aobert的正则：<script type="text/javascript"> var str="蓝色理想" var reg=/\s+/g str = str.replace(reg," ") document.write(str) </script>判断字符串是不是由数阅读全文

posted @ 2012-03-24 20:34 咖啡戏阅读(505) 评论(0) 推荐(0)

Jcrop-jquery图片裁剪插件

摘要：来看下其使用方法：关键的图片的html代码是免不了1 <img src="demo_files/sago.jpg" id="cropbox" />值得一提的是，插件运行后，会将此图片隐藏，复制出2个图片，一张作为背景，而另外一张放在裁剪层。而背景层图片是可以指定的，并非一定要同一张图片，具体参见第5个demo。来看其javascript代码1 jQuery(function(){2 var jcrop_api = jQuery('#cropbox').Jcrop();3 });这是最为简单的形式，可满足基础需求，当然Jcrop 阅读全文

posted @ 2012-03-23 22:56 咖啡戏阅读(319) 评论(0) 推荐(0)

shareList — jquery收藏&分享插件

摘要：国内很多第三方提供收藏&分享的站点，比如jiathis、addthis等，这些站点提供的插件虽然引用方便，但都有个问题，点击收藏&分享按钮后事先跳转到该第三方的站点，然后才转向真正的分享插件，而且分享列表上面还是这第三方的logo之类的，而效果又是千篇一律，因此明河就想写一个没有任何第三方logo和中转而且效果出众的收藏&分享插件，我将其命名为$.shareList。demo由于有用到了ajax，请在服务器端启动使用教程1、引入jquery和$.shareList，还有css1 <script type="text/javascript" sr 阅读全文

posted @ 2012-03-23 22:51 咖啡戏阅读(1364) 评论(0) 推荐(0)

passwordStrength —jquery密码强度插件

摘要：请看实际demo：http://www.36ria.com/demo/password_strength/原理说明：其实原理非常的简单，这里赋予密码强度10个等级，请看progressImg1.png，是一张包含十个状态的图片。给密码框绑定keyup事件，获取密码值，然后使用正则进行判断等级（难点在这里），然后切换进度条的样式。使用教程：创建如下html：1 <div class="form_item clearfix">2 <label>密  码：</label>3 <div class=&qu 阅读全文

posted @ 2012-03-23 22:30 咖啡戏阅读(474) 评论(0) 推荐(0)

弹出层SimpleModal

摘要：SimpleModal is a lightweightjQueryPlugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework. SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI develop 阅读全文

posted @ 2012-03-23 22:20 咖啡戏阅读(240) 评论(0) 推荐(0)

yitip—jquery工具提示插件

摘要：demo一、引入jquery库和yitip的js及其css1 <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>2 <script type="text/javascript" src="js/jquery.yitip.js"></script>3 <link rel="stylesheet" type="text/css" href= 阅读全文

posted @ 2012-03-23 22:06 咖啡戏阅读(498) 评论(0) 推荐(0)

jquery分页插件—Smart Paginator

摘要：今天推荐一个分页工具条插件：Smart Paginator，这个插件用途还是很广的，而且可定制性相当不错，目前内置三种颜色，有需要的话，可以自己改css定制颜色。1.如何使用Smart Paginator？1.1引入以下几个文件1 <script src="jquery-1.4.4.min.js" type="text/javascript"></script>2 <script src="smartpaginator.js" type="text/javascript">< 阅读全文

posted @ 2012-03-23 21:55 咖啡戏阅读(1425) 评论(0) 推荐(0)

Validation-Engine—jquery表单验证插件详解

摘要：demo（ps:RIA之家的全部demo，明河已经托管到github，如果要下载博客的全部demo，传送门在此：https://github.com/minghe/36ria-demo。）已经把验证规则的提示内容翻译成中文了，请看validation-engine-2.2\js\languages\jquery.validationEngine-cn.js。关于时间有二处提示没找到地方，目前没做修改。明河的英文太菜，翻译难免词不达意，欢迎纠正，O(∩_∩)O哈！如何处理ajax验证？典型场景：如何使用Validation-Engine验证用户名或email的存在性？这个需求在大部分的注册页面都阅读全文

posted @ 2012-03-23 21:50 咖啡戏阅读(1804) 评论(0) 推荐(1)

validationEngine中文版 — jquery强大的表单验证插件

摘要：普通验证的例子：http://www.position-relative.net/creation/formValidator/ajax验证的例子：http://www.position-relative.net/creation/formValidator/demoSubmit.html引入jquery和插件js、css1 <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" 阅读全文

posted @ 2012-03-23 21:44 咖啡戏阅读(322) 评论(0) 推荐(0)

Chosen—强大的jquery模拟选择框插件

摘要：Chosen提供了suggest功能，强大的是实现了选项分组和多选关键词处理。如何使用？引入jquery库和脚本1 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>2 <script src="chosen/chosen.jquery.js" type="text/javascript"></scrip 阅读全文

posted @ 2012-03-23 21:36 咖啡戏阅读(1285) 评论(0) 推荐(0)