Jquery 小技能

Jquery 小技巧
查找出对象为一段html时 查找this的子对象用children无效 要用find。

	$.each($("#sortable .template"),function(i,n){
		alert($(this).find(".step_name").attr('name'));
	});

在某段js总是莫名其妙的不能执行时 到页面上看看js 很有可能是因为一些 不可见的乱码掺杂在里面…… 残念了一个小时才发现。。

页面上获取鼠标单击时位置 顺便以这个位置为原点显示个弹出层～ 自动判断 如果超出浏览器高度则反方向弹出层 370为弹出层高度

	$("#open_popup").click(function(e){
		clever_popup_show($('#popup_container'), $("#open_popup"));
	});
	$("#close_popup").click(function(){
		$('#popup_container').hide();
	});

function clever_popup_show(popup, click_position){
	if((click_position.position().top + 370) < $(document).height() || $(document).height() < 370){
		popup.css({
			"left" : click_position.position().left,
			"top" : click_position.position().top
		});	
	}else{
		popup.css({
			"left" : click_position.position().left,
			"top" : click_position.position().top - 370
		});	
	}
	popup.show();
}

自定义属性的使用

	var date_range = (typeof $( ".date_field" ).attr("date_range") == "undefined") ? "2000: " : $( ".date_field" ).attr("date_range");

屏幕中央显示元素
关键点在于documentElement。

var scrolled_height = document.documentElement.scrollTop; 会得出浏览器滚动条已卷上的高度， 故可准确定位于屏幕中央。

function clever_popup_show(popup){
	//request data for centering
	var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;
	var scrolled_height = document.documentElement.scrollTop;
	var popupHeight = popup.height();
	var popupWidth = popup.width();
	
	//centering
	popup.css({
	    "top": windowHeight/2-popupHeight/2+scrolled_height,
	    "left": windowWidth/2-popupWidth/2
	}).show();
	
	$(".popup_shadow").css({
		height : $(document).height(),
		width : $(document).width()
	}).show();
}