JavaScript [jQuery] Checkbox Controller

// context = id of elements which contains checkboxes
// controller = DOMelement of ckeckbox controller
function checkall(context, controller){
	$("#"+context).find("input[@type$='checkbox']").not(controller).each(function(){
		// verify the state of checkbox controller and pass the state to others checkboxes
                this.checked = $(controller).checked;
	});
}

JavaScript addClass,removeClass,hasClass

function hasClass(ele,cls) {
	return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}

function addClass(ele,cls) {
	if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}

function removeClass(ele,cls) {
	if (hasClass(ele,cls)) {
    	var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
		ele.className=ele.className.replace(reg,' ');
	}
}

//call the functions
addClass(document.getElementById("test"), "test");
removeClass(document.getElementById("test"), "test")
if(hasClass(document.getElementById("test"), "test")){//do something};

JavaScript 纠正IE5和IE6中PNG的透明度

<!-- Convertir todos los PNG en transparentes para IE, versiones anteriores a la 7-->
<!--[if lt IE 7]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
  var arVersion = navigator.appVersion.split("MSIE")
  var version = parseFloat(arVersion[1])
  if ((version >= 5.5) && (document.body.filters))
  {
     for(var i=0; i<document.images.length; i++)
     {
        var img = document.images[i]
        var imgName = img.src.toUpperCase()
        if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
        {
           var imgID = (img.id) ? "id='" + img.id + "' " : ""
           var imgClass = (img.className) ? "class='" + img.className + "' " : ""
           var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
           var imgStyle = "display:inline-block;" + img.style.cssText
           if (img.align == "left") imgStyle = "float:left;" + imgStyle
           if (img.align == "right") imgStyle = "float:right;" + imgStyle
           if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
           var strNewHTML = "<span " + imgID + imgClass + imgTitle
           + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
           + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
           + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
           img.outerHTML = strNewHTML
           i = i-1
        }
     }
  }
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->

JavaScript toggle_checkboxes

<script type="text/javascript">

function toggle_checkboxes(id) {
    if (!document.getElementById){ return; }
    if (!document.getElementsByTagName){ return; }
    var inputs = document.getElementById(id).getElementsByTagName("input");
    for(var x=0; x < inputs.length; x++) {
        if (inputs[x].type == 'checkbox'){
            inputs[x].checked = !inputs[x].checked;
        }
    }
}

</script>

<div id="parent_box">
    
    <input type="checkbox" name="foo" value="1" /> 1<br/>
    <input type="checkbox" name="foo" value="2" checked="checked" /> 2<br/>
    <input type="checkbox" name="foo" value="3" checked="checked" /> 3<br/>
    
    <br/>
    <input type="button" value="Toggle checkboxes" 
        onclick="toggle_checkboxes('parent_box')" />

</div>

JavaScript Javascript Popup with Blocking detection

function popup(url,ancho,alto,id,extras){
	if(navigator.userAgent.indexOf("Mac")>0){ancho=parseInt(ancho)+15;alto=parseInt(alto)+15;}
	var left = (screen.availWidth-ancho)/2;
	var top = (screen.availHeight-alto)/2;
	if(extras!=""){extras=","+extras;};
	var ventana = window.open(url,id,'width='+ancho+',height='+alto+',left='+left+',top='+top+',screenX='+left+',screenY='+top+extras);
	var bloqueado = "AVISO:\n\nPara ver este contenido es necesario que desactive\nel Bloqueo de Ventanas para este Sitio."
	//var bloqueado = "WARNING:\n\nIn order to use this functionality, you need\nto deactivate Popup Blocking."
	if(ventana==null || typeof(ventana.document)=="undefined"){ alert(bloqueado) }else{ return ventana; };
}

JavaScript Jquery Smotth滚动到锚点链接

$.fn.scroller = function() {
	var speed = 'slow'; // Choose default speed
	$(this).each(function() {
		$(this).bind('click', function() {
			var target = $(this).attr('href'); // Get scroll target
			$(target).ScrollTo(speed);
			return false;
		});
	});
}

JavaScript 获取Url参数

function getUrlVars() {
	var map = {};
	var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
		map[key] = value;
	});
	return map;
}

JavaScript 用于AJAX请求的LoadingMessage

// ## LoadingMessage
// ## Version: 0.6
// ## Author: Tim Isenheim - http://blog.freshlabs.de 

var LoadingMessage = {
imageURL : 'ajax-loader.gif',
waitImg : null,
containerId : "loading-message",
loadTextId : "loading-text",
waitImgId : "loading-image",
waitImgWidth : 16,
waitImgHeight : 16,

init : function(){
	this.waitImg = document.createElement('img');
	this.waitImg.setAttribute('src', this.imageURL);
	this.waitImg.setAttribute('height', this.waitImgHeight);
	this.waitImg.setAttribute('width', this.waitImgWidth);
	this.waitImg.setAttribute('alt','loading...');
	this.waitImg.id = this.waitImgId;
	this.waitImg.style.border = '0';
	this.waitImg.style.backgroundColor = 'transparent';
	this.waitImg.style.margin = '0';
	this.waitImg.style.padding = '0';
},
	
append : function(where){
	var parent = $(where);
	var loadbox;
	if(!$(this.containerId)){
		loadbox = document.createElement('div');
		var loadtext = document.createElement('div')
		loadbox.id = this.containerId;
		loadtext.id = this.loadTextId;
		txt = document.createTextNode(" loading");
		loadtext.appendChild(this.waitImg);
		loadtext.appendChild(txt);
		loadbox.appendChild(loadtext);
	}
	else loadbox = $(this.containerId);
	loadbox.style.display = "none";
	new Effect.Appear(loadbox, { to: 0.7, queue: 'end' });
	parent.appendChild(loadbox);
},
	
remove : function(){
	new Effect.Fade(this.containerId, {duration: 0.25, queue: 'end' });
}

} // ### .LoadingMessage


// Attaching the init function to the window.onload event
Event.observe(window,'load', function(){
    LoadingMessage.init();
});

JavaScript getMousePosition

function getMouseX( e ) {
	return e.pageX
		|| ( e.clientX + ( document.documentElement.scrollLeft
		|| document.body.scrollLeft ) );
}
function getMouseY( e ) {
	return e.pageY
		|| ( e.clientY + ( document.documentElement.scrollTop
		|| document.body.scrollTop ) );
}

JavaScript jQuery Accordian菜单

<script language="javascript">
			$(document).ready(function() {
				$('.navchild').hide();
				$('.navgrandchild').hide();
				$('#navroot > li > a, .navchild > li > a').click(function() {
					var visibility = $(this).next('ul').css("display");
					if( visibility == "none" )
					{
						$(this).next('ul').show("normal");
						$(this).parent().siblings().children('ul:visible').hide("normal");
						$('.navgrandchild').hide();
						$('#message').text($(this).text() + " Opened");
					}
					else { $(this).next('ul').hide("normal"); $('#message').text($(this).text() + " Closed");}
				});
			});
		</script>

<div id="navigation">
			<ul id="navroot">
				<li>
					<a href="#">Root 1</a>
					<ul class="navchild">
						<li><a href="#">Sub 1</a></li>
						<li><a href="#">Sub 2</a></li>
					</ul>
				</li>
				
				<li>
					<a href="#">Root 2</a>
					<ul class="navchild">
						<li><a href="#" class="child">Child 1</a></li>
						<li><a href="#" class="child">Child 2</a></li>
					</ul>
				</li>
				
				<li>
					<a href="#">Root 3</a>
					<ul class="navchild">
						<li>
							<a href="#">Child 1</a>
							<ul class="navgrandchild">
								<li><a href="#">Grandchild 1</a></li>
								<li><a href="#">Grandchild 2</a></li>
							</ul>
						</li>
						<li>
							<a href="#" >Child </a>
							<ul class="navgrandchild">
								<li><a href="#">Grandchild 1</a></li>
								<li><a href="#">Grandchild 2</a></li>
							</ul>
						</li>
					</ul>
				</li>
				
				<li>
					<a href="#">Root 4</a>
					<ul class="navchild">
						<li><a href="#">Child 1</a></li>
						<li><a href="#">Child 2</a></li>
					</ul>
				</li>
			</ul>
		</div>
		
		<div id="message">
		</div>

body {
	margin: 0;
	padding: 0;
}

#navigation {
	float: left;
    width: 200px;
    background: #333;
    padding: 20px;
}

#navigation li, ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#navigation li a {
    display: block;
    color: #fff;
    width: 100px;
    padding: 5px;
	text-decoration: none;
}

#navroot > li > a {
	background: #000;
}

.navchild li a {
	background: #666;
}

.navgrandchild li a {
	background: #999;
}

#message {
	float: left;
	background: #666;
	padding: 20px;
	font-size: 2.0em;
	color: #fff;
}