结合 easyslider 和 InnerFade , 写了个 div content slider , 这个是 div的形式 , 当然你也可以改为 ul , li的形式 ,
具有的功能:
> 自动循环
> 可以选择指定的图片(1,2,3,4)
> 选择后 , 继续循环 , 也可以设置 不继续循环 , 也可以设置只循环一次
> 有slide(滑动),fade(渐隐) 两种效果
> 可以调节 轮换速度 和单张图片的 暂停时间
> …..
兼容所有常用的浏览器
DEMO
http://blog.wxianfeng.com/demos/contentslider
source:
http://github.com/wxianfeng/contentSlider
SEE:
http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
http://medienfreunde.com/lab/innerfade/

环境 : jquery 1.3.2
最近在用 jquery + will_paginate 实现 ajax 分页 ,按照 我以前文章里的办法 http://www.blogjava.net/fl1429/archive/2009/08/25/292522.html 发现在IE下 出现 没有权限 的错误,也就 看不到 ajax 效果了。。
在网上搜了一下,出现这个 错误,说是 跨域问题,可是 url 里又没有涉及到 跨域的情况,不管它 了,后来 把url 的绝对路径 , 改成了 相对路径, ie 下 就没出现 这个 错误了,怪~!
will_paginate 生成的 href 代码是这样的,可以看出 是 相对路径
<a rel="next" href="/user/172/stateposts?page=2">2</a>
原先代码 :
jQuery(function() { jQuery(".my_paginate a").live("click", function() { jQuery(".my_paginate").html("正在加载..."); jQuery.get(this.href, {flag : "my" }, null, 'script'); return false; }); });
重点是 this.href 得到的是绝对路径 例如 http://abc.com/user/show 这样的路径
修改后代码
jQuery(function() { jQuery(".my_paginate a").live("click", function() { jQuery(".my_paginate").html("正在加载..."); jQuery.get(jQuery(this).attr("href"), {flag : "my" }, null, 'script'); return false; }); });
发现 把 url 变成了 jQuery(this).attr("href") 这个 得到的 相对路径 ,例如 /user/show
如果你在 ie 下 遇到了 , 没有权限错误,我想 肯定 也是 请求的路径(相对,绝对)问题了。。
ref:
http://www.2ky.cn/h/12/4716.html
效果:
汉化了一个 jquery calendar plugin , 效果还符合 中国人的使用习惯。。。
使用步骤:
1, 加载需要的js 和 样式
<link href="calendar.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="cal.js"></script>
2,使用
jQuery(document).ready(function () { $('input.one').simpleDatepicker(); // 最基本的 $('input.two').simpleDatepicker({ startdate: 2008, enddate: 2012 }); // 定义年的范围,一般用这个 $('input.three').simpleDatepicker({ chosendate: '9/9/2010', startdate: '6/10/2008', enddate: '7/20/2011' }); //定义当前选择的日期 $('input.four').simpleDatepicker({ x: 45, y: 3 }); //定义日历基于input的显示位置 }); </script> <p><input class="one" name="date" value="" type="text"> <input class="two" name="date" value="" type="text"> <input class="three" name="date" value="" type="text"> <input class="four" name="date" value="" type="text"> </p>
DEMO:
http://blog.wxianfeng.com/demos/calendar
source:
http://www.uushare.com/filedownload?user=fl1429&id=2183466
ref:
http://teddevito.com/demos/calendar.php
http://www.aspxhome.com/javascript/skills/20099/1008917.htm
效果:
http://www.appelsiini.net/projects/jeditable/default.html
http://15daysofjquery.com/examples/jqueryEditInPlace/divEdit.php
像上面的这种 in place edit 的效果在网络上很常见。。下面介绍一种在rails中的解决方案。。当然后台不一定是 ror 平台了
资源下载:
http://github.com/tuupola/jquery_jeditable 下载后,只需要里面的 jquery.jeditable.js 步骤:
1,加载 jquery.js 和 jquery.jeditable.js
2,View
<script> $(document).ready(function() { $(".edit_descrip").editable(this.href, { indicator : "<img src='/images/indicator.gif'>", type : 'textarea', submitdata: { _method: "get" }, select : true, submit : '修改', cancel : '取消', cssclass : "editable", tooltip : '点击修改', id : 'flag' }); }); </script> <p class="edit_descrip" id="edit_descrip" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'"><%= h @client_info.description %> </p>
id : 'flag' value : 'newvalue'
3,Controller:
if request.xhr? if params[:flag] case params[:flag] when 'edit_descrip' ClientInfo.update_field(current_client_info.id,params[:value],'descrip') # 更新数据库 render :text => params[:value] #返回数据 end end end
5,或者你可以指定target为某个函数,这样就可以自己扩展,例如有额外的返回数据,返回后需要更新某个 DOM元素等等
<script> $(document).ready(function() { $(".edit_state").editable(submitEdit, { indicator : "<img src='/images/indicator.gif'>", type : 'textarea', submitdata: { _method: "get" }, select : true, submit : '修改', cancel : '取消', cssclass : "editable", tooltip : '点击修改', id : 'flag' }); }); function submitEdit(value, settings) { var edits = new Object(); edits[settings.name] = [value]; edits[settings.id] = ['edit_state'] $.ajax({ url: this.href, type: "GET", data : edits, dataType : "json", complete : function () { $("#state_time").html('0分钟前'); } }); return value; } </script>
http://www.appelsiini.net/projects/jeditable
http://stackoverflow.com/questions/966539/how-to-get-out-of-jquery-jeditable-mess