结合 easyslider 和 InnerFade , 写了个 div content slider , 这个是 div的形式 , 当然你也可以改为 ul , li的形式 ,
具有的功能:
> 自动循环
> 可以选择指定的图片(1,2,3,4)
> 选择后 , 继续循环 , 也可以设置 不继续循环 , 也可以设置只循环一次
> 有slide(滑动),fade(渐隐) 两种效果
> 可以调节 轮换速度 和单张图片的 暂停时间
> …..
兼容所有常用的浏览器
DEMO
http://www.blogjava.net/fl1429/archive/2010/03/01/314196.html
source:
http://github.com/wxianfeng/contentSlider
ref:
http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
http://medienfreunde.com/lab/innerfade/
效果:
汉化了一个 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" [...]
环境 : ruby 1.8.6 + rails 2.1.0 + > jquery 1.3.2
效果:
http://www.douban.com/subject_search?search_text=rails&cat=1001
http://www.javaeye.com/search?query=rails&type=user
像上面 douban 和 javaeye 这种UI搜索的方式,发现url极其相似,那么 是 如何实现的呢。。。自己用一种方式实现了。。
思想: 点击 li 部分时, 触发 下面的 搜索 submit 即可 , 同时把查询的关键字 和 查询的类型 给 传过去
View:
<script type="text/javascript">
$(function() {
$("#<%= @type %>").addClass("on"); //改变显示当前<li>的样式
$("#type").val($(".on").attr(’id’)); // 给search form 区内的 type 赋值,type 的值就是<li>的id号
[...]
环境 : ruby 1.8.6 + rails 2.1.0 + jquery 1.3.2
效果:
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: [...]