极湖

用 jQuery 做一个简单的弹出对话框 用 jQuery 做了一个简单的弹出对话框，可用于智能手机。

// 让元素居中的函数
jQuery.fn.center = function () {
    $win = $(window);
    this.css('position','absolute');
    this.css('top', (($win.height() - this.outerHeight()) / 2) + $win.scrollTop() + 'px');
    this.css('left', (($win.width() - this.outerWidth()) / 2) + $win.scrollLeft() + 'px');
    return this;
}

// 弹出对话框函数
jQuery.msgBox = function(sMsg, sTitle, sButton) {
    sMsg = sMsg || '';
    sTitle = sTitle || '消息';
    sButton = sButton || '关闭';
    $alertBox = $('<div>').css({
        'position': 'absolute',
        'top': '0',
        'left': '0',
        'width': '300px',
        'height': '150px',
        'border-radius': '5px',
        'padding': '2px',
        'background': '#000',
        'color': '#FFF',
        'opacity': '0.8',
        'z-index': '999',
        'text-align': 'center'
    }).append('<div style="background:#333;border-radius:3px;padding:2px;margin:4px;font-size:90%;">' + sTitle + '</div>')
        .append('<div style="height:70px;margin:8px;2px;text-align:left;">' + sMsg + '</div>')
        .append($('<button style="padding:3px;">' + sButton + '</button>').click(function(e) {
            $alertBox.remove();
        })
    ).prependTo(document.body).center().show();
};

//测试（示例）
$('#test').click(function(){
    $.msgBox('Hello world!');
});

方法一（原理）：

document.getElementById('youridhere').scrollIntoView();

方法二：
用 jQuery 的插件 jQuery.ScrollTo 来实现

$(...).scrollTo( 0, 800, {queue:true} );

参考：http://stackoverflow.com/questions/68165/javascript-to-scroll-long-page-to-div

以下代码可让元素在屏幕中央显示，无论网页是否滚动。

jQuery.fn.center = function () {
    $win = $(window);
    this.css('position','absolute');
    this.css('top', (($win.height() - this.outerHeight()) / 2) + $win.scrollTop() + 'px');
    this.css('left', (($win.width() - this.outerWidth()) / 2) + $win.scrollLeft() + 'px');
    return this;
}

用法举例如下：

HTML代码：

<img id="test" src="http://www.google.co.jp/images/nav_logo83.png" />

JS 代码：

$('#test').center();

因为想做 iPhone 的 Web 应用，这些天一直在找一个轻量的 javascript 库。

今天终于找到一个可用的:
http://www.freelancephp.net/light-4kb-mini-jquery/

这个库仅实现了 jQuery 的一部分功能，且限于 DOM 操作，不过目前对我来说已经足够。

这个库的代码非常简单易懂，因此很容易扩展。为了实现更多的 jQuery 基本功能，我追加了几个函数：
hasClass, hide, show, html, text, val, find

我追加的代码如下：

	// determine className
	hasClass: function ( className ) {
		for ( var i = 0; i < this.els.length; i++ ) {
			if(this.els[i].className.match(new RegExp('\\b' + className + '\\b')))
				return true;
		}
		return false;
	},

	// hide elements
	hide: function () {
		this.each(function( el ) {
			el.style.display = 'none';
		});
		return this;
	},

	// show elements
	show: function () {
		this.each(function( el ) {
			el.style.display = 'block';
		});
		return this;
	},

	// set inner html
	html: function (value) {
		if(value == undefined) {
			return this.els[0] ? this.els[0].innerHTML : '';
		}
		this.each(function( el ) {
			el.innerHTML = value;
		});

		return this;
	},

	// set inner text
	text: function (value) {
		var name = (document.body.textContent != undefined) ? 'textContent' : 'innerText';
		if(value == undefined) {
			return this.els[0] ? this.els[0][name] : '';
		}
		this.each(function( el ) {
			el[name] = value;
		});

		return this;
	},

	// set value
	val: function (value) {
		if(value == undefined) {
			return this.els[0] ? this.els[0].value : '';
		}
		this.each(function( el ) {
			el.value = value;
		});

		return this;
	},

	// find children
	find: function (selector) {
		return new this.init( selector, this.get(0) );
	},

修改后的文件：
light.js
light.min.js

这个库的选择器部分，仅仅是 getEmelentById, getElementsByName 的简单扩展。如果需要用到类似 $("td:eq(2)") 甚至更复杂的选择器，就得另想办法了。幸运的是，这个库提供了接口，你可以采用以下的选择器代码：
Sizzle, Sly, NWMatcher, Peppy, Yass

方法很简单：

Light.selector = Sly; // use Sly  engine
Light.selector = Sizzle; // use Sizzle engine
Light.selector = NW.Dom.select; // use NWMatcher engine
Light.selector = peppy.query; // use Peppy engine
Light.selector = _; // use YASS engine

输入法打开时， Firefox 不触发 keyup 事件。经常写javascript代码的人，尤其是中日韩等国的人，都可能会遇上这个不大好解决的问题，。

在一个日文 Blog 上找到了解决办法，用 jQuery 通过 text 事件实现。
自己写了一段测试代码如下：

var logFunc = function(e){
  console.log($(this).val());
  if(e){
    // keyup 时能取到键值
    console.log(e.keyCode)
  }
};
$(':text').keyup(logFunc).text('text', logFunc);