Posts tagged with "jQuery"
Thursday, 21. May 2009, 04:33:39
jQuery, Firefox, JavaScript
输入法打开时， 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);
Thursday, 9. April 2009, 00:49:03
jQuery, extjs, JavaScript
在网上搜索关键字 “javascript object clone”，可以找到很多实现克隆 Object 的代码，可是据我测试，让人满意的几乎没有。
今天发现 jQuery 的作者 John Resig 给别人的
答复，尝试了一下确实很好用。
方法如下：
// 浅层复制（只复制顶层的非 object 元素）
var newObject = jQuery.extend({}, oldObject);
// 深层复制（一层一层往下复制直到最底层）
var newObject = jQuery.extend(true, {}, oldObject);
测试如下：
var obj1 = {
'a': 's1',
'b': [1,2,3,{'a':'s2'}],
'c': {'a':'s3', 'b': [4,5,6]}
}
var obj2 = $.extend(true, {}, obj1);
obj2.a='s1s1';
obj2.b[0]=100;
obj2.c.b[0]=400;
console.log(obj1);
console.log(obj2);
obj2 内部元素的值改变之后，如果 obj1 的相应值保持不变，就说明复制成功。
ExtJS 也有类似的方法 Ext.apply，因此单独用 ExtJS 应该也能实现同样的功能。
Thursday, 15. January 2009, 06:58:00
jQuery, JavaScript
闲来无事，打开 jQuery 的主页看了一下，发现，下载链接下面的当前版本已经变成 1.3。仔细一看，新版本的 jQuery 已经于 1月 14 日发布。
和前一版本 1.2.6 相比，jQuery 1.3 的主要改进如下：
1. 集成 Sizzle 引擎Sizzle 是一个独立的 CSS 查询引擎，同样出自 jQuery 的作者
John Resig 。
2. 增加 .live() 和 .die() 方法。这两个方法用来实现网页上新追加元素的事件自动绑定和解除。
3. 彻底检修事件处理的代码完全重新布置，简化了事件处理。
4. 重写了动态插入 HTML 的代码比如 append, prepend, before 和 after 等方法，重写之后速度快了很多。
5. 重写了偏移计算的代码元素定位的偏移计算方法超级快速。
6. 不再增加新浏览器的探测增加 jQuery.support 属性，jQuery.browser 保留但不推荐使用。
Wednesday, 23. July 2008, 06:18:02
jQuery, Plugin, JavaScript
效果图(ScreenShot)：
用法：一.绑定到单个text输入框
$('#txt_color').colorPicker();
二.绑定到多个text输入框）
$('.color_fields').colorPicker();
三. 所选颜色值传递给回调函数（callback）
$.colorInput.toggleMenu($('#test_box'), function(sColor){
alert(sColor);
});
下载（Download）:jquery.colorPicker.js
Friday, 16. May 2008, 08:20:10
jQuery, JavaScript
方法一：
if ($("#checkbox-id")get(0).checked) {
// do something
}
方法二：
if($('#checkbox-id').is(':checked')) {
// do something
}
方法三：
if ($('#checkbox-id').attr('checked')) {
// do something
}
Monday, 5. May 2008, 15:21:12
jQuery, IE, JavaScript
可编辑 div 内光标位置的记忆和恢复实在是太难，情急之下想了个很土的办法：做一个不可见的 span 紧跟光标，在光标位置插入内容的时候只需找到这个 span 即可。
程序如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>(jQuery) Cursor Position Test </title>
<script type="text/javascript" src="jquery.pack.js"></script>
<style type="text/css" media="all">
#editor {
width:500;
height:100;
margin:10px;
padding:2px;
border:1px solid #0000FF;
overflow:auto;
}
#info {
width:500;
height:200;
margin:10px;
padding:2px;
border:1px solid #00FF00;
background-color:#F8F8F8;
overflow:auto;
}
#caret_pos {
display:none;
cursor:default;
}
</style>
<script type="text/javascript">
function trace(obj) {
if(typeof(obj) == 'object') {
for(var x in obj) {
$('#info').append(x + '<br/>');
}
} else {
$('#info').append(obj + '<br/>');
}
}
$(document).ready(function(){
var caretRange;
//update Caret Pos
function updateCaretPos(e) {
caretRange = document.selection.createRange();
if(caretRange.text != '') {
return;
}
var caretHtml = '<span id="caret_pos"></span>';
if($('#caret_pos').length > 0) {
$('#caret_pos').remove();
}
caretRange = document.selection.createRange();
caretRange.pasteHTML(caretHtml);
caretRange.collapse(true);
}
//insert HTML at Caret Pos
function insertAtCaret(sHtml) {
$('#caret_pos').before(sHtml);
var caret = document.getElementById('caret_pos');
var txtRange = document.body.createTextRange();
txtRange.moveToElementText(caret);
txtRange.select();
}
$('#editor').keyup(function(e){
updateCaretPos(e);
}).click(function(e){
updateCaretPos(e);
}).focus(function(e){
updateCaretPos(e);
});
$('#insert').click(function(e){
insertAtCaret($('#instext').val());
});
$('#editor_html').click(function(e){
$('#info').text($('#editor').html());
});
$('#clear_info').click(function(e){
$('#info').html('');
});
});
</script>
</head>
<body>
<div><h2>Caret Position Test</h2></div>
<div id="editor" contentEditable="true">
<span>start</span>
</div>
<input type="button" id="editor_html" value="Html in Editor" />
<input type="text" id="instext" value="" />
<input type="button" id="insert" value="Insert" />
<div id="info">
</div>
<input type="button" id="clear_info" value="Clear Info" />
</body>
</html>
注：以上程序仅适用于IE。Mozilla系浏览器只需修改pasteHTML部分的代码
Friday, 2. May 2008, 07:11:08
jQuery, Mouse, JavaScript
废话不多说，直接贴程序：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery Mouse Test</title>
<script type="text/javascript" src="jquery.pack.js"></script>
<style type="text/css" media="all">
table.simple_grid {
width:100%;
height:100%;
margin:0;padding:0;
border:1px dashed #FF0000;
border-collapse:collapse;
border-spacing:0;
}
table.simple_grid td {
border: 1px dashed #FF0000;
text-align:center;
vertical-align:middle;
}
</style>
<script type="text/javascript">
function getMousePosition(e){
var x = 0, y = 0;
var e = e || window.event;
if (e.pageX || e.pageY) {
x = e.pageX;
y = e.pageY;
} else if (e.clientX || e.clientY) {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
return { 'x': x, 'y': y };
}
$(document).ready(function(){
$('#mouse_test').mousemove(function(e){
var o = $(this).offset();
var oX = o.left;
var oY = o.top;
$('#lblOriginXY').html(oX + ',' + oY);
var cX = oX + $(this).width()/2;
var cY = oY + $(this).height()/2;
$('#lblCenterXY').html(cX + ',' + cY);
pos = getMousePosition(e);
var mouseX = pos.x; //- this.offsetLeft;
var mouseY = pos.y; //- this.offsetTop;
$('#lblMouseXY').html(mouseX + ',' + mouseY);
if(mouseY < cY) {
if(mouseX < cX) {
$('#lblInfo').html('左上').hide().fadeIn();
} else {
$('#lblInfo').html('右上').hide().fadeIn();
}
} else {
if(mouseX < cX) {
$('#lblInfo').html('左下').hide().fadeIn();
} else {
$('#lblInfo').html('右下').hide().fadeIn();
}
}
});
});
</script>
</head>
<body>
<div id="mouse_test">
<table class="simple_grid">
<tr height="50%">
<td width="50%">Origin：<label id="lblOriginXY"></label></td>
<td width="50%">Center：<label id="lblCenterXY"></label></td>
</tr>
<tr height="50%">
<td width="50%">Mouse：<label id="lblMouseXY"></label></td>
<td><label id="lblInfo"></label></td>
</tr>
</table>
</div>
</body>
</html>
Saturday, 26. April 2008, 08:51:26
jQuery, Plugin, JavaScript
Select Box replacement 是一个用图片和text输入框代替select的Plugin，发现之后想用这个Plugin，试用过程中发现有不少问题，所以修改了一下代码。
由于改动比较多，就不一一细说了。
修改后的代码可以从这儿
下载。
Tuesday, 22. January 2008, 02:34:30
jQuery, 红楼梦, 在线书籍, JavaScript
...
没事又胡乱做了个小东西——《
脂砚斋重评石头记》，该书在网上多处有转载，为什么还要做呢？是因为所有的转载都是批注和正文夹杂在一起，看起来不是很清爽，而且累人。因此我用程序把批注部分处理了一下，取第一个字，做成红色链接，鼠标移到上面，才显示批注内容。经过这样的处理，网络版《脂评石头记》看起来清爽多了，相信会得到“红迷”的欢迎。
网页截图如下：
网址1：
http://staticlake.appspot.com/shitouji/index.html网址2：
http://geelake.com/shitouji/本网页用 JavaScript + jQuery 实现 Ajax 和显示特效，如果您对程序感兴趣，可以自己查看网页代码，代码很简单。
Thursday, 20. December 2007, 10:35:35
jQuery, 游戏, 算法, 数学
...
这些天研究排列组合的算法，是为了做一个“
二十四点”的小程序。
经过几天努力，总算做出了可以自动取得正确算式的程序，就在此发表一下。
程序截图如下：
网址1：
http://staticlake.appspot.com/point24/index.html网址2：
http://geelake.com/point24/因为用JavaScript做程序，还是借用了jQuery，如果您对程序本身感兴趣，可以自己查看网页代码。
技术要点：
数组操作技巧
排列组合算法
正则表达式
网页元素拖放处理从今往后,不论你身在何地，如果有人考你24点的算式，只需打开这个网页，答案很快就有啦。
1 2 Next »
Showing posts 1 -
10 of 20.
WIDGETIZE