jQuery slider plugin contentSlider1.0

Posted by wxianfeng Mon, 01 Mar 2010 05:45:00 GMT

结合 easyslider 和 InnerFade , 写了个 div content slider , 这个是 div的形式 , 当然你也可以改为 ul , li的形式 ,

具有的功能:
> 自动循环
> 可以选择指定的图片(1,2,3,4)
> 选择后 , 继续循环 , 也可以设置 不继续循环 , 也可以设置只循环一次
> 有slide(滑动),fade(渐隐) 两种效果
> 可以调节 轮换速度 和单张图片的 暂停时间
> …..

兼容所有常用的浏览器

DEMO
http://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 IE 没有权限

Posted by wxianfeng Thu, 10 Dec 2009 04:06:00 GMT


环境 : 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


simple jQuery date-picker plugin 中文版

Posted by wxianfeng Mon, 02 Nov 2009 17:01:00 GMT

效果:

汉化了一个 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://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


Rails in place edit with jQuery

Posted by wxianfeng Tue, 13 Oct 2009 16:43:00 GMT
环境 : 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: "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 和 value 两个参数,值分别是p对应的id 和 p对应的内容,当然你也可以改变参数名字
id : 'flag'
value : 'newvalue'
就对应传递 flag 和 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
4,改变一些默认的参数,可以到 jquery.jeditable.js 中修改,例如 textarea 的默认大小 等等。。。。

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>
See:

http://www.appelsiini.net/projects/jeditable

http://stackoverflow.com/questions/966539/how-to-get-out-of-jquery-jeditable-mess