兼容 IE ,Firefox, Chrome 等浏览器 :)
pre{
display: block;
overflow: auto;
word-wrap:break-word;
white-space: pre-wrap;
}
Advertisements
Archive for the ‘Ajax’ Category
利用 CSS 实现标签 pre 内容自动换行
Posted by Ross Wan 于 2011/08/19
Javascript：打印对象
Posted by Ross Wan 于 2009/03/09
alert() 是我们调试阶段经常使用的方法，可以查看目标变量的值。但是，如果目标变量是对象，如：
var foo = {'key1': 'foo1', 'key2': 'foo2'};
alert(foo);
其显示结果是 [object Object]。这对于调试没有多大用处。再试下这个：
for(myKey in myObj){
alert ("myObj["+myKey +"] = "+myObj[myKey]);
}
虽然可以显示期待的结果，但有点麻烦（或者可以将上面的代码封装在一个方法里）。
对于 Gecko 内核的浏览器，可以使用对象的 toSource() 方法，这是其 Javascript 的一个特性。
alert(foo.toSource());
其打印结果是： ({key1:”foo1″, key2:”foo2″})。
最后，当然不能忘了 Firebug 这个利器：
console.log(foo);
其打印结果是：Object key1=foo1 key2=foo2
Posted in Javascript | 3 Comments »
Dojo: Dialog 的 onClose 事件
Posted by Ross Wan 于 2009/03/06
对于dijit.Dial0g 为说，是没有 onClose 事件的，当你关闭它，只是将它隐藏而已。所以，应该用 hide 事件来代替。如：
var dialog = dijit.byId("fooDialog");
dialog.connect(dialog, "hide", function(e){
/* do every thing here */
});
当 dialog 调用 hide() 隐藏自身时，会触发事件。
Posted in Ajax, Dojo | Tagged: dialog, Dojo, hide, onClose | Leave a Comment »
Dojo: Layout 的问题
Posted by Ross Wan 于 2009/03/03
<div id="wrap">
<div id="main" dojoType="dijit.LayoutContainer">
...
在使用 Dojo 的 Layout（dijit.layout.xxxx），其 Wrap 容器必须设定其大小，如 style=”width:100px;height:100px;”。否则，将会显示空白页。在 1.2.3 和 1.3 都存在这个问题。如果其 Wrap 窗口是 Body，则将 Body 设为 style=”width:100%;height:100%;position:absolute” ；或者，将 Body 设为 style=”width:100%;height:100%;”, 将 #main 设为 style=”position:absolute”。
虽然不知道这是不是 Bugs，或者是不是一个正确的解决方法，但确实能解决目前问题：例如 《Book of Dojo》中的 Mail 应用例子。
Posted in Ajax, Dojo | Leave a Comment »
CodeIgniter: is_ajax，判断 AJAX 请求
Posted by Ross Wan 于 2009/02/27
CakePHP 的 RequestHandler 组件，有一个方便的方法 isAjax ，可以判断当前的请求是否为 AJAX 请求。貌似 CodeIgniter（以下简称 CI） 没有）。不过不要紧， 可以自行对 CI 的类库进行扩展，添加上 is_ajax 方法（之所以用下划线分隔的方式命名而不是骆驼峰方式，是因为要迎合 CI 的开发规范）。
我们决定扩充 CI 的CI_Input 类，不赞成直接对核心代码的修改，既然 CI 提供了良好的扩充机制，为什么不用呢？ :)
创建一个名为 MY_Input.php 的文件，放在自己的 App（默认是 aplication ）/libraries 文件夹下。内容如下：
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class MY_Input extends CI_Input {
function MY_Input() {
parent::CI_Input();
}
function isAjax() {
return (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH']=="XMLHttpRequest");
}
}
// END Input class
/* End of file Input.php */
/* Location: ./system/application/MY_Input.php */
注意：具体的文件名，要根据你在 config.php 中对 $config[‘subclass_prefix’] 的设置。默认是 $config[‘subclass_prefix’] = ‘MY_’;
下面，就可以在 Controller 里对 Input 类自行加载使用：
......
function foo() {
$this->load->library('input');
if ($this->input->is_ajax()) {
do_something();
....
}
}
......
Posted in Ajax, CodeIgniter, PHP | Tagged: Ajax, CodeIgniter, is_ajax | Leave a Comment »
神奇的浏览器嗅探代码
Posted by Ross Wan 于 2009/02/26
在 shortest way to test for IE 一文中， 讲述了20个方法嗅探 IE 浏览器 ，其中：
ie = '\v'=='v';
上面的代码是不是很神奇，但重要的是，它确实正确地判断出 IE 浏览器。这是利用浏览器的特性来作出判断的。其它的利用浏览器特性判断的 JS 代码：
ie = !!top.execScript;
ie = /*@cc_on!@*/!1;
ie8 = !!window.XDomainRequest;
IEVersion = 0/*@cc_on+ScriptEngineMajorVersion()@*/;
ff = /a/[-1]=='a';
ff3 = (function x(){})[-5]=='x';
ff2 = (function x(){})[-6]=='x';
safari=/a/.__proto__=='//';
chrome=/source/.test((/a/.toString+''));
opera=/^function \(/.test([].sort);
在 Mootools 1.2.1 里，也是利用浏览器的特性来作出嗅探的：
if (window.opera) Browser.Engine = {
name: 'presto',
version: (document.getElementsByClassName) ? 950 : 925};
else if (window.ActiveXObject) Browser.Engine = {
name: 'trident',
version: (window.XMLHttpRequest) ? 5 : 4};
else if (!navigator.taintEnabled) Browser.Engine = {
name: 'webkit',
version: (Browser.Features.xpath) ? 420 : 419};
else if (document.getBoxObjectFor != null) Browser.Engine = {
name: 'gecko',
version: (document.getElementsByClassName) ? 19 : 18};
Browser.Engine[Browser.Engine.name] =
Browser.Engine[Browser.Engine.name + Browser.Engine.version] = true;
Posted in Ajax, Javascript | Leave a Comment »
Mootools: toElement 方法
Posted by Ross Wan 于 2009/01/31
toElement 是 Mootools 1.2 里的一个新特性（但并没有在其官方文档里说明）。toElement 只是一个返回 element 对象的方法。当向 $ 传递一个对象时，它会尝试调用对象的 toElement 方法来取得当前 element。
示例
var User = new Class({
initialize: function(name){
this.name = name;
},
toElement: function(){
if (!this.element) {
this.element = new Element('div', {'class': 'user'});
var avatar = new Element('img', {
src: '/avatars/' + this.name + '.jpg'
});
var description = new Element('div', {
'class': 'username',
'text': this.name
});
this.element.adopt(avatar, description);
}
return this.element;
}
});
window.addEvent('domready', function(){
var alice = new User('Alice');
var bob = new User('Bob');
$(alice).inject('header', 'after');
// let's inject bob after alice
$(bob).inject(alice, 'after');
});
Posted in Ajax, Javascript, Mootools | Tagged: feature, Mootools, toElement | Leave a Comment »
jQuery: 表格排序插件
Posted by Ross Wan 于 2009/01/11
这是本人写的一个简单的表格排序插件。支持字符串和数字的排序。
代码
/*
* jtablesortable plugin for jQuery。表格排序插件
*
* @author mrwlwan#gmail.com
*/
(function($){
// 定义可排序的数据类型，以及所对应的排序方法
var sortFuns = {
'default': sortDefault,
'string': sortDefault,
'num': sortNum,
'date': sortDefault,
'none': null
};
// 二维数组排序的默认比较函数
function sortDefault(item1, item2){
if(item1[1] == item2[1]){
return 0;
}
if(item1[1] > item2[1]){
return 1;
}
if(item1[1] < item2[1]){
return -1;
}
}
// 二维数组排序的数字比较函数
function sortNum(item1, item2){
item1[1] = parseFloat(item1[1]);
item2[1] = parseFloat(item2[1]);
return sortDefault(item1, item2);
}
// 表格排序函数
function sortTable(jRows,sortFun, col, jThis){
// 创建一临时的二维数组，元素数组的第一个元素是 jRows 行的索引，第二个元素是该行的 col 列的值
var tempArray = [];
for(var i=0;i<jRows.length;i++){
tempArray.push([i, $.trim(jRows.eq(i).children('td').eq(col).text())]);
}
// 对 tempArray 数组进行排序
tempArray.sort(sortFun);
// 重排表格行
for(var i=0;i<tempArray.length;i++){
jRows.eq(tempArray[i][0]).appendTo(jThis);
}
}
// 表格反转函数
function reverseTable(jRows, jThis){
$.each(jRows.get().reverse(), function(index, item){
$(item).appendTo(jThis);
});
}
//////////////////////////////////////////////////
$.fn.extend({
// 参数是可变的
jtablesortable: function(){
// 取得参数数组
var args = arguments;
// 设置当前 this 的一个引用。用于部分函数内部
var jThis = this;
// 设置 tr 对象样式
this.find('tr').css({
cursor: 'default'
// 设置 thead 样式
}).eq(0).css({
cursor: 'pointer'
//
}).children().each(function(index, el){
// 将当前项的索引保存到当前项对象的数据里
$(el).data('col', index);
// 取得当前项的排序方式
var sortFun = 'default';
if(index < args.length && ($.trim(args[index]) in sortFuns)){
sortFun = $.trim(args[index]);
}
// 如果为 none，表示当前项不进行排序操作
if(sortFun == 'none'){
return;
}
// 将当前项的排序方式保存到当前项对象的数据里
$(el).data('sortfun', sortFun);
// 添加图标，并且处理单击事件
$(el).append($('<img class="itemimg000" src="bg.gif"/>')).click(function(){
// 取得被单击项的索引值
var col = $(this).data('col');
// 取得当前表格的所有列
var jRows = jThis.children('tbody').children('tr');
// 取出 this 对象 sortcol 里的值，并判断是否该列上次进行排序过。如果是，则直接调用表格反转函数
if(jThis.data('sortcol') == col){
// 处理图标。先对当前排序是升序还是降序当出判断
var desc = $(this).data('desc');
var sortImg = desc ? 'asc.gif' : 'desc.gif';
$(this).children('.itemimg000').attr('src', sortImg);
$(this).data('desc', !desc);
// 反转表格
reverseTable(jRows, jThis);
return;
}
// 处理图标
$(this).parent('tr').children('td, th').eq(jThis.data('sortcol')).children('.itemimg000').attr('src', 'bg.gif');
$(this).children('.itemimg000').attr('src', 'desc.gif');
// 设置当前为降序
$(this).data('desc', true);
// 将当前列的索引保存到 jThis 对象的数据里
jThis.data('sortcol', col);
// 进行排序
sortTable(jRows, sortFuns[$(this).data('sortfun')], col, jThis);
});
});
}
});
})(jQuery);
用法
$('#tableid').jtablesortable('default', 'num', 'string', 'date', 'num', 'none');
参数指定对应列的数据类型，插件会根据不用的数据类型选择不同的方法来进行排序。支持的类型有 default(默认的字符串排序方法)、string(字符串)、num(数字)、date(日期)。还有一个是 none，表示对应列不进行排序。
注： 某数据类型还未实现，可能在以后会跟进。
兼容性
支持 IE 6.0+, FF2+, Safari 3.1+, Opera 9.0+ 。
Posted in Ajax, Javascript, jQuery | Tagged: jQuery, jtablesortable, plugins, table sortable | Leave a Comment »
