兼容 IE ,Firefox, Chrome 等浏览器 :)
pre{ display: block; overflow: auto; word-wrap:break-word; white-space: pre-wrap; }
Posted by Ross Wan 于 2011/08/19
兼容 IE ,Firefox, Chrome 等浏览器 :)
pre{ display: block; overflow: auto; word-wrap:break-word; white-space: pre-wrap; }
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 »
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 »
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 »
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 »
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 »
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 »