好用的弹窗jQuery插件之bPopup.js

插件官网:http://dinbror.dk/blog/bpopup/
版本佚代次数较多目前为:0.9.4

浏览器支持:IE7-9, FF2-7, Opera 9-10, Safari 4-5 and Chrome 4-15.
悲催的ie6不在支持了,但是还是有需要的。通过查看Change list,发现是在0.6.0版本时给去掉,但是有提示添加很容易。
没找到添加的版本,刚刚发现标题部分显示,14年1月16日服务器故障,旧版本都没有了,冏~~

使用说明:
html部分

    
         ... 
        
          ...
            
            
            
            
Content of popup
...

css部分

#element_to_pop_up { display:none; }

js部分

    // Semicolon (;) to ensure closing of earlier scripting
    // Encapsulation
    // $ is assigned to jQuery
    ;(function($) {

         // DOM Ready
        $(function() {

            // Binding a click event
            // From jQuery v.1.7.0 use .on() instead of .bind()
            $('#my-button').bind('click', function(e) {

                // Prevents the default action to be triggered. 
                e.preventDefault();

                // Triggering bPopup when click event is fired
                $('#element_to_pop_up').bPopup();

            });

        });

    })(jQuery);

或者配置参数使用:
    ;(function($) {
        $(function() {
            $('#my-button').bind('click', function(e) {
                e.preventDefault();
                $('#element_to_pop_up').bPopup({
                    appendTo: 'form'
                    , zIndex: 2
                    , modalClose: false
                });
            });
         });
     })(jQuery);

介绍常用的参数:
appendTo [string] (’body’) 将模态窗口添加到指定元素中,jquery选择器直接指定元素。
closeClass [string] (‘b-close’) 在元素上添加b-close的class,点击关闭模态窗口
escClose [bool] (true) 是否启用esc关闭,默认开启。
follow [bool,bool] ([true,true]) 默认开启,模态窗口跟随浏览器大小而改变
modalClose [bool] (true) 模态窗口点击是否关闭,默认是。
position [int,int] (['auto','auto']) 定位,先水平,后垂直。

还有很多功能,待使用发掘。演示的demo,效果很帅,插件本身挺小,推荐使用。

好用的弹窗jQuery插件之simplemodal

一、simplemodal 网站:http://www.ericmmartin.com/simplemodal-1-4-4-released/

浏览器支持:
IE 6+
Firefox 2+
Opera 9+
Safari 3+
Chrome 1+

引入jquery库及插件后使用。简单用法:

$("#element-id").modal();    //显示element-id
$.modal("

SimpleModal

"); //新建模态窗口内容为引号内html片段。

带参数的示例:

// 改变遮罩颜色和透明度
$("#sample").modal({
	opacity:80,
	overlayCss: {backgroundColor:"#fff"}
});

参数很丰富,参数列表(http://www.ericmmartin.com/projects/simplemodal/#options)基于这些基本能满足我们的需求。记录几个比较常用的参数。

appendTo [String:’body’]
默认值body,将弹层加入到指定元素中。例:appendTo:’.content’,将弹层加入到class为content的层中。

autoPosition [Boolean:true] (Changed in 1.4)
改变窗口大小调整自动定位,默认为真。当使用引导层时,选择false,改变窗口大小时就不会改变位置了。

closeClass [String:’simplemodal-close’]
添加class为simplemodal-close的html元素,点击关闭弹窗。

position [Array:null]
位置参数,一般弹层为居中显示时不用此参数。当有定位需求时使用例:

$("#sample").modal({position: [10,10]});

用Jquery实现由下向上展开的效果

常见的做向下展开的效果很简单,直接用slideUp跟slideDown就行。
如果要展开的div是通过position:absolute绝对定位的,且通过相对与底部定位,如bottom:0px 这个时候调用slideDown就是向上展开的。

(因为slideDown说白了就是动态改变元素高度,底部定位固定,高度变高的时候就向上扩展了)

	//精品推荐
	$('.remm_product ul li').hover(
		function(){
			$(this).find('.p_info').slideDown();
		},
		function(){
			$(this).find('.p_info').slideUp();
		}
	)

jQuery动态改变图片显示大小(修改版)

当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸。通过搜索,我们可以从网上找到实现此功能的jQuery代码如下。这段代码可以使图片的大小保持在一定范围内,如果图片的原始尺寸都大于max*值,则显示出来的图片宽度都相等。

原始代码:

$(document).ready(function() {
     $('.post img').each(function() {
     var maxWidth = 100; // 图片最大宽度
     var maxHeight = 100;    // 图片最大高度
     var ratio = 0;  // 缩放比例
     var width = $(this).width();    // 图片实际宽度
     var height = $(this).height();  // 图片实际高度
  
     // 检查图片是否超宽
     if(width > maxWidth){
         ratio = maxWidth / width;   // 计算缩放比例
         $(this).css("width", maxWidth); // 设定实际显示宽度
         height = height * ratio;    // 计算等比例缩放后的高度 
         $(this).css("height", height);  // 设定等比例缩放后的高度
     }
  
     // 检查图片是否超高
     if(height > maxHeight){
         ratio = maxHeight / height; // 计算缩放比例
         $(this).css("height", maxHeight);   // 设定实际显示高度
         width = width * ratio;    // 计算等比例缩放后的高度
         $(this).css("width", width * ratio);    // 设定等比例缩放后的高度
     }
 });
 });

在我的js代码中,也采取了这种写法。然而在不同的浏览器测试效果时,发现此种写法不能适应chrome浏览器(chrome版本号为10.0.648.204),会产生图片以原有尺寸显示出来的bug。后来把$(‘.post img’).each()的代码用$(window).load()方法包装起来,就解决了chrome浏览器显示不正确的问题。那么在chrome浏览器中为什么会产生bug,并且$(document).ready和$(window).load有什么区别呢?

原来document ready事件是在HTML文档载入即DOM准备好就开始执行了,即使图片资源还没有加载进来。而window load事件执行的稍晚一些,它是在整个页面包括frames, objects和images都加载完成后才开始执行的。从这种区别可以分析出chrome浏览器在对于图片不采用$(window).load()方法处理时,图片载入与动态改变图片的js代码执行顺序不确定。
关于上面的代码,放到我的页面中时获取图片高度时会报错,提示没有提供width方法。

var width = $(this).width();    // 图片实际宽度
var height = $(this).height();  // 图片实际高度

故修改代码如下:

$(window).load(function () {
    $("div.article_content img").each(function () {
        DrawImage(this, 500, 500);
    });
});
function DrawImage(ImgD, FitWidth, FitHeight) {
    var image = new Image();
    image.src = ImgD.src;
    if (image.width > 0 && image.height > 0) {
        if (image.width / image.height >= FitWidth / FitHeight) {
            if (image.width > FitWidth) {
                ImgD.width = FitWidth;
                ImgD.height = (image.height * FitWidth) / image.width;
            } else {
                ImgD.width = image.width;
                ImgD.height = image.height;
            }
        } else {
            if (image.height > FitHeight) {
                ImgD.height = FitHeight;
                ImgD.width = (image.width * FitHeight) / image.height;
            } else {
                ImgD.width = image.width;
                ImgD.height = image.height;
            }
        }
    }
}

转自:http://blog.csdn.net/zyzlywq/article/details/7285806

jQuery应用迁移辅助插件jQuery Migrate

做页面时直接使用的最新版本的jquery,用到一个tooltip插件。发现页面报错,排查后,发现是jquery版本的问题。就想到了jQuery Migrate,引用后,问题就解决了。

以下内容转自:http://www.iteye.com/news/27120

为了使前端开发者能够顺利迁移至该版本,该团队还发布了迁移插件jQuery Migrate

当开发者需要在代码中使用新版本的jQuery时,可以在1.9或2.0版本中使用该插件来检测哪些功能已经弃用或移除,并可以在必要时恢复这些功能。更多信息见项目README

jQuery Migrate 1.1在之前版本的基础上,进行了一些改进,包括:

  • 支持console.trace()来跟踪警告信息,更易于诊断错误。
  • 对于无效JSON,会返回警告信息。
  • 提示“Logging is active”信息,以表明插件正在运行。
  • 出于安全因素,jQuery 1.9限制了字符串的处理,你可以通过新版Migrate插件来恢复该功能。但还是建议使用$.parseHTML()来处理HTML。
  • 对$(“<button>”, { type: “button” })会显示一个错误警告

最后,需要注意的是,你可以使用该插件将jQuery恢复到jQuery 1.6.4之后的任何一个版本的功能。

详细信息:http://blog.jquery.com/2013/01/31/jquery-migrate-1-1-0-released/

下载:

jquery中this和$(this)区别和使用说明

  平时很少在jquery中用到this。查看代码时发现用到了,就调试出this的值,心想原来如此。还是挺有用的。这里总结一下this与$(this)的区别和使用。

  $(this)生成的是什么?

  $()生成的是什么呢?实际上$()=jquery(),就是说返回的是一个jquery的对象。

  通常我们为了简便直接使用$()。实际上,该函数省略了一个参数context。根据选择器选取匹配的对象即$(selector, context),以jQuery包装集的形式返回。

  context可以是Dom对象集合或jQuery包装集,传入则表示要从context中选择匹配的对象,不传入则表示范围为文档对象(即页面全部对象),即$(selector)=$(selector,document)。

  this指的是,调用函数的那个html对象。

例子:

$("#textbox").hover(   
  function() {   
       this.title = "Test";   
  },   
  fucntion() {   
      this.title = "OK”;   
  }   
);

这里的this其实是一个Html元素(textbox),this是js中的。textbox有text属性,所以这样写没什么问题。

$("#textbox").hover(   
       function() {   
	  $(this).title = "Test";   
       },   
       function() {   
	  $(this).title = "OK";   
       }  
);  

  
这里的$(this)是一个JQuery对象,而jQuery对象沒有title 属性,因此这样写是错误的。

结论:
  this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法。
  $(this),代表的上下文对象是一个jquery的上下文对象,可以调用jquery的方法和属性值。

实例(选项卡):

tabs($("#nav a"), $(".content"));	
function tabs(tab, content){
	content.hide();
	content.eq(0).show();
	tab.click(function(){
		var index = tab.index(this);
		tab.removeClass("current");
		$(this).addClass("current");
		content.hide();
		content.eq(index).animate({opacity:'show'}, 200);
	});
}

参考:
http://developer.51cto.com/art/200908/145427.htm
http://www.jb51.net/article/24739.htm

jQuery 1.8.3 发布

jQuery开发团队今天发布了jQuery 1.8.3版本。

该版本修复了一些重要的bug和性能衰退问题,包括:

  • IE8中的HTML相关Bug
  • jQuery 1.8.2在IE9中调用ajax失败的问题
  • jQuery 1.7.1不能正确地设置IE7中克隆元素的tabindex属性
  • 压缩的JS文件包含非ASCII字符
  • 如果body样式设置为display:none,则$(‘body’).show()无法工作
  • 在IE9中element.css(‘filter’)返回不明确
  • 在Android 2.3.4的浏览器中,jQuery 1.8.1转场效果崩溃
  • 在iPad上缩放一个灯箱效果后,所有动画效果失效
  • 从1.3.2升级到1.8.2版本后,出现Uncaught TypeError错误
  • 在Chrome和Safari中,无法正确检测包含可编辑内容的DIV的焦点
  • jQuery 1.8.0不解析基于XUL Runner(Mozilla的运行时环境)的应用程序

详细信息:http://blog.jquery.com/2012/11/13/jquery-1-8-3-released/

下载地址:

jquery.ajax之beforeSend方法

常见的一种效果,在用ajax请求时,没有返回前会出现前出现一个转动的loading小图标或者“内容加载中..”,用来告知用户正在请求数据。这个就可以用beforeSend方法来实现。
下载demo:ajax loading

代码如下:

function test_ajax(){
   $.ajax(
   {
      type:"GET",//通常会用到两种:GET,POST。默认是:GET
      url:"a.php",//(默认: 当前页地址) 发送请求的地址
      dataType:"html",//预期服务器返回的数据类型。
      beforeSend:beforeSend, //发送请求
      success:callback, //请求成功
      error:error,//请求出错 
      complete:complete//请求完成
   });
}
function error(XMLHttpRequest, textStatus, errorThrown){
  // 通常情况下textStatus和errorThown只有其中一个有值 
  $("#showResult").append("
请求出错啦!
"); } function beforeSend(XMLHttpRequest){ $("#showResult").append("
"); } function complete(XMLHttpRequest, textStatus){ $("#showResult").remove(); } function callback(msg){ $("#showResult").append("
请求成功,回传数:"+msg+"
"); }

方法beforeSend,用于在向服务器发送请求前添加一些处理函数。这是一个ajax事件,在ajax请求开始之前就被触发,通常允许用户修改XMLHttpRequest对象(比如说设置附加的头部信息),关于ajax事件的解释可参考文档:http://docs.jquery.com/Ajax_Events

我们还见到一种情况,很多网站在加载内容的过程中给出“数据加载中,请稍候”的提示,当内容被加载完毕后显示内容。可以设置默认文本显示为加载中的提示,当内容加载完毕时,我们可以通过ID选择器,将该标签中的文本替换成最终的内容。以此来取代beforeSend,效率更高。

什么时候用beforeSend,什么时候用文本替换,取决于ajax请求前后你所展示的DOM元素是否一致,如果你所展示的DOM元素在请求之前已经存在,那么通过上述文本替换的方式来处理会好些,如果除此以外你还需增加其他的需求,那么还是用beforeSend来处理吧。

参考:
http://blog.csdn.net/ciray/article/details/5968664
http://www.wufangbo.com/jquery-ajax-overview/

jquery实现“上一步”、“下一步”功能

有个引导流程已实现选项卡点击切换功能,又需要添加添加“上一步”、“下一步”。有段时间没有写脚本了。整个过程用时不少,回头看看也不难,相当于复习了一下。

实现思路:点击按钮时,获取当前选中的项。点击后进行步骤切换,再对最后一步和第一步进行处理。

获取当时选中的项,用current_show函数。循环所有项,用hasClass判断含中current的项。

对按钮添加侦听事件,上一步和下一步分别对返回的选中项进行+1和-1操作。

将菜单、切换内容、要切换到的项做为参数传递给checkLimits函数,使用jquery的next()和prev()方法判定是否到第一项和最后一项,做相应处理。

代码如下:

function current_show(guide_menu){
  for (var i = 0; i < guide_menu.length ; i++){
    if (guide_menu.eq(i).hasClass('current')){
      return i;
    }
  }
}

function checkLimits(guide_menu,guide_content,idx){
  $current  = guide_menu.eq(idx);
  $next     = $current.next();
  $prev     = $current.prev();
  (!$next.length)?$('.next').addClass('disabled'):$('.next').removeClass('disabled');
  (!$prev.length)?$('.prev').addClass('disabled'):$('.prev').removeClass('disabled');
  guide_menu.eq(idx).addClass('current').siblings().removeClass('current');
  guide_content.eq(idx).show().siblings().hide();     
};

$('.bind_guide_page a').bind('click',function(event){
  var type = $(this).index();
  event.stopPropagation;
  event.preventDefault();
    var old_idx = current_show($bind_guide);
    if (type == 0){
      if (old_idx != 0){
        var idx = old_idx - 1;
        checkLimits($bind_guide,$bind_guide_cont,idx);
      }
    }else{
      if (old_idx != 4){
        var idx = old_idx + 1;
        checkLimits($bind_guide,$bind_guide_cont,idx);
      }
    }
})

jQuery同时给多个对象添加方法

印象里面以前用过,但是很久没有写,忘记了。同时给多个对象添加方法,能节省不少代码,html对象之间用逗号隔开,很方便,也很简单。直接上代码:

	//阻止链接跳转
	$(".loginButton,.btn a,.news_server a").click(function(event){
		event.preventDefault(); 
	})

刚瞧了一眼,这篇文章是250篇了~~