迷途知返 » Js/AJAX http://pwwang.com 专注技术,用心生活! Fri, 03 Sep 2010 08:13:35 +0000 en hourly 1 http://wordpress.org/?v=3.0 简单写了个jquery的鼠标提示文字插件 http://pwwang.com/technology/js-javascript/jquery_tip/ http://pwwang.com/technology/js-javascript/jquery_tip/#comments Fri, 27 Aug 2010 01:51:07 +0000 pwwang http://pwwang.com/?p=968 Read More: 1137 Words Totally]]>  

效果图:

调用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.tip.js"></script>
<script>
$(function(){
    $('div').tip('This is a multipul style tip. I\'m <font style="font-weight:bold">bold</font>.<br />Line break. I\'m <font style="color:red">red</font>. Images are also availale. <br /> <img src="http://pwwang.com/logo.gif" >');
});
</script>
</head>
<body>
<div style="float:left; width:300px; height:300px; background:#f90;">handler</div>
</body>
</html>

源码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

(function($) {
 
    $.tip = function(src, content, cls) {
 
        var $tdiv = $('<div />');
        $tdiv.css({
            'position':'absolute',
            'display':'none',
            'z-index':'9999'
        }).html(content).appendTo('body');
 
        if( cls ){
            $tdiv.addClass(cls);
        } else {
            $tdiv.css({
                'border' : '1px solid #969696',
                'background' : '#ffe',
                'font-size' : '12px',
                'padding' : '2px'
            });
        }
 
        var move = function(e){
            $tdiv.css({
                'top' : (e.pageY+23) + 'px',
                'left' : (e.pageX) + 'px'
            });
        };
 
        $(src).mouseenter(function(e){
            $tdiv.show();
            $(document).bind('mousemove', move);
        });
 
        $(src).mouseleave(function(){
            $tdiv.hide();
            $(document).unbind('mousemove', move);
        });
 
    }
 
    // content: what is the tip
    // cls: the style class of the tip div
    $.fn.tip = function(content, cls) {
 
        this.each(function() {
            new $.tip(this, content, cls);
        });
        return this;    
    };
})(jQuery);

]]> http://pwwang.com/technology/js-javascript/jquery_tip/feed/ 0 谈HTML表单元素的一种写法 http://pwwang.com/technology/js-javascript/talk_about_an_insertion_of_html_form/ http://pwwang.com/technology/js-javascript/talk_about_an_insertion_of_html_form/#comments Thu, 26 Aug 2010 07:38:43 +0000 pwwang http://pwwang.com/?p=964 Read More: 921 Words Totally]]>  

默认的表单(form)是有margin的, 所以插入的时候, 可能会使布局变形.

有时候表单内的元素较多, 需要排版, 较为方便的还是table.

为了消除表单给页面布局带来的影响, 我常常喜欢这样插入表单:

1
2
3
4
5
6
7

<table>
    <form method="post" action="?" name="form1" id="form1">
 
        <tr><td><input type="submit" value="submit" /></td></tr>
 
    </form>
</table>

这样就没有表单带来的布局影响了.

然而, 当我用js来操作时, IE下影响不大, 但在FF下就出现问题了:

 

1
2

alert($('#form1').html());
//用纯js操作效果是一样的

 

IE下正常,可以得到表单的innerHTML, 但FF下却为空.

如果我用js在表单中插入一个元素, 但来alert,发现只有插入的那个元素的html:

 

1
2
3
4

$('#form1').append('<input type="text" name="textfield" />');
alert($('#form1').html());
//FF中结果是<input type="text" name="textfield" >
//ie中可以得到原有元素加上插入的元素的html

 

查看源代码发现, 原来FF把form的结束tag解释在了开始tag之后:

 

1
2
3
4
5

<table>
            <form action="?" method="post" name="form1" id="form1"></form>
        <tbody><tr><td><input name="textfield" type="text"></td></tr>
        </tbody>
</table>

 

故而form的innerHTML为空.

正确的写法应该是这样的:

 

1
2
3
4
5
6
7
8
9

<style> /*可在css文件中定义*/
form{margin:0; padding0;}
</style>
 
<form method="post" action="?" name="form1" id="form1">
    <table>
        <tr><td><input type="submit" value="submit" /></td></tr>
    </table>
</form>

 

]]> http://pwwang.com/technology/js-javascript/talk_about_an_insertion_of_html_form/feed/ 0 Mine-Sweeping(扫雷) in jQuery/JavaScript http://pwwang.com/technology/js-javascript/mine-sweeping-in-jqueryjavascript/ http://pwwang.com/technology/js-javascript/mine-sweeping-in-jqueryjavascript/#comments Fri, 30 Oct 2009 16:01:09 +0000 pwwang http://pwwang.com/?p=772 Read More: 616 Words Totally]]> Mine_Sweeping_in_jQuery_JavaScript

Demo:   http://pwwang.com/tools/mine-sweeping.html

Google Code Project Home Page:  http://code.google.com/p/mine-sweep-in-jquery-javascript/

Introduction

A simulation of windows mine-sweeping(扫雷) in jQuery/JavaScript?

Information

pwwang http://pwwang.com

page http://pwwang.com/technology/js-javascript/mine-sweeping-in-jquery-javascript/

demo http://pwwang.com/tools/mine-sweeping.html

Details

  • Performs perfectly in Firefox
  • Works well in IE but not ideally
  • Basicly realize all the functions of all windows mine-sweeping has
  • Especially realize an event that the left-button and right-button clicks at the "same" time —- that is, it differs in a very short time,and then the event will fire.

 

]]> http://pwwang.com/technology/js-javascript/mine-sweeping-in-jqueryjavascript/feed/ 0 JavaScript中左右键“同时”点击(click,mousedown,mouseup)事件 http://pwwang.com/technology/js-javascript/left-right-simultaneously-click-in-javascript/ http://pwwang.com/technology/js-javascript/left-right-simultaneously-click-in-javascript/#comments Thu, 29 Oct 2009 01:35:09 +0000 pwwang http://pwwang.com/?p=760 Read More: 3939 Words Totally]]>  

之所以同时加上引号，是因为真正的同时，除了机器人，是不可能做到的。

这个是利用jQuery的事件管理机制来实现的，并把它写成了一个jQuery插件。

在Firefox中表现完美， 在IE中能够实现想要的功能，但是总是有些不尽如人意。

在IE中左键的button值是1,右键是0；而在Firefox中左键是0,右键是2.

问题倒不在这里，问题在于，如果你在IE中先点右键，再很短的时间内再点左键，你会发现得到的button值是3！并且如果是这么简单也就好了，直接检测button值，如果是3,就直接执行事件就行了。可是问题总不是想象中的那样简单，在button＝3的事件执行完之后，IE还会激发一个button=1的事件（先点的右键，那点的左键）。这在处理起来就麻烦多了。

我的思路和网上想实现这类功能的人的思路大致相同，也是通过一个计时器来判断。

具体思路是这样的：

这个插件可以处理鼠标左右键的同时点击（click），鼠标按下（mousedown），鼠标弹起（mouseup）事件。在讲思路的时候就以点击为

例。

首先我们必须先找出所有绑定为点击的事件，unbind它们，因为要阻止它们在一点击鼠标的时候就执行。

在找这些事件的时候还是颇费了一番功夫的。因为jQuery的源码还没有真正的读通。所以机制也并没有弄很清楚明白。jQuery将事件存在了一个缓存里面（jQuery.cache），但是如果从这个缓存里把这些事件取出来？关键问题是找到元素对应的在缓存的位置，我找遍了jQuery(…)就是没有这样的公有方法。于是用了一个小trick，我们知道jQuery允许我们给一个元素绑定data，而这个data也是存在缓存里的。所以我就可以赋一个唯一的属性值给data（时间戳或者随机数），再后再通过这个唯一值找到这个元素并找到存储的事件。

这时候我们就可以处理左右键的事件了。因为无论左键还是右键先点，我们要达到的效果是一样的，所以这里只说一下其中一个键点击的事件。

当点击一个键的时候，我们先需要先判断另一个键是否已经点击，如果还没有点击，这时候判断一下时间差（这个是专为IE设计的。。。因为IE会引起一个button=1的事件，在button＝3的事件执行之后，就把时间变量设置为当前时间），如果不在时间差内，就等待另一个按键的点击。如果另一个键已经点击了的话，那就直接判断时间差，在时间差内就执行给定的事件；如果不在，就执行原有的事件。

这样，在bindLR后，也不影响原来已经bind的事件的执行（会有设定时间的延时，为了等待另一个键的点击），在unbindLR之后，也能够恢复原来已经bind的事件，我没有采用循环绑定，所以在绑定了bindLR事件之后，无法再用unbind来原有事件的绑定，并且，unbindLR现在的功能有限，只能解除所有的bindLR事件，并不能解除指定事件的绑定。

jquery.LRmouse.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180

/**
 *
 * jquery.LRmouse 1.0.0
 * 
 * Author: pwwang ( http://pwwang.com )
 * 2009.10.26
 *
 * Bind an event handle to a listener that 
 * LButton and RButton of the mouse act
 * ( click, mousedown, mouseup ) "simultaneously"
 *
 * It works on both IE and Firefox, distinguishedly,
 * however, it performs perfectly in Firefox; not
 * exactly ideally in IE.
 *
 **/
(function($){
 
    $.bindLR = function( elem, type, data, fn, intv ){
 
        var L_BUTTON = $.browser.msie ? 1 : 0 ;
        var R_BUTTON = $.browser.msie ? 0 : 2 ;    
        var LR_BUTTON = 3; // ie
 
        var orgType = type.substr(2);
 
        var L_flag = false;
        var R_flag = false;                
 
        var getTime = function(){
            return +new Date;
        };        
 
        var lrId = getTime();
        // for finding the elem in $.cache
        // a trick, 'cz I don't know how to
        // find the function directly
        elem.data('lrId', lrId);  
        var orgFns = [];
        for( var i in $.cache ){  
        // find original binded functions
            if( $.cache[i]['lrId'] == lrId ){
                var fns = $.cache[i]['events'][orgType];
 
                for( var j in fns ){
                    orgFns.push( fns[j] );
                    elem.unbind( orgType, fns[j] );
                }
                //remove it
                elem.removeData('lrId');
                break;
            }
        }
        elem.data('lrTempEvents',orgFns); 
 
        var timer = getTime();
        var timeOut;
 
        var reset = function(){
            L_flag = false;
            R_flag = false;
            clearTimeout( timeOut );
        };        
 
        var orgFnHandle = function(e, data){
            reset();
            for( var i=0; i<orgFns.length; i++ ){
                orgFns[i].call(elem, e, data);
            }
        };
 
        var L_event = function(e, data){
            if( !R_flag ){ //waiting
                // if LR_BUTTON, do NOT wait
                // LR_BUTTON in ie will call L_BUTTON event
                if( getTime() - timer > intv ){  
                    L_flag = true;
                    timer = getTime();
                    timeOut = setTimeout( 
                        function(){orgFnHandle(e, data);}, 
                        intv+1
                    );
                }
            } else {
                reset();
                var deltT = getTime() - timer;
                if( deltT <= intv ){
                    fn.call(elem, e, data);
                } else {
                    orgFnHandle(e, data);
                }
            }
        };
 
        var R_event = function(e, data){
            if( !L_flag ){
                if( getTime() - timer > intv ){
                    R_flag = true;
                    timer = getTime();
                    timeOut = setTimeout( 
                        function(){orgFnHandle(e, data);}, 
                        intv+1
                    );
                }
            } else{
                reset();
                var deltT = getTime()-timer;
                if( deltT <= intv ){
                    fn.call(elem, e, data)
                } else {
                    orgFnHandle(e, data);
                }
            }
        }
        var eventHandle = function(e, data){
            if( L_BUTTON === e.button )
                L_event (e, data);
            else if( R_BUTTON === e.button )
                R_event (e, data);
            else if( LR_BUTTON === e.button ) { //ie
                timer = getTime();
                fn.call(elem, e, data);
            }
        };    
 
        //ban context menu;
        elem.bind('contextmenu', function(){ return false; });  
        //bind new
        elem.bind( orgType, data, eventHandle );
 
    };
 
    $.unbindLR = function(elem, type){
        elem.unbind('contextmenu');
        elem.unbind( type );
        var orgType = type.substr(2);
        elem.unbind( orgType );    
 
        var lrId = Math.random();
 
        elem.data('lrId', lrId);  
 
        for( var i in $.cache ){  
            if( $.cache[i]['lrId'] == lrId ){
                var fns = $.cache[i]['lrTempEvents'];
                for( var j in fns ){
                    elem.bind( orgType, function(){ fns[j].apply(elem,arguments) });
                }
                //remove it
                elem.removeData('lrId');
                elem.removeData('lrTempEvents');
                break;
            }
        }
    };
 
    $.fn.bindLR = function(type, data, fn, intv){
        if( $.isFunction( data ) ){
            intv = fn || 500;
            fn = data;
            data = {};
        } else {
            data = data || {};
            fn = fn || {};
            intv = intv || 500;
        }
        // lr bind for $(...).trigger()
        this.bind(type,data,fn);   
 
        if( type.substr(0,2)=='lr' ){
            $.bindLR( this, type, data, fn, intv );
        }
        return this;
    };
 
    $.fn.unbindLR = function(type){
        $.unbindLR( this,type );
        return this;
    }
})(jQuery);

 

]]> http://pwwang.com/technology/js-javascript/left-right-simultaneously-click-in-javascript/feed/ 1 JavaScript中的print_r http://pwwang.com/technology/js-javascript/print_r-in-javascript/ http://pwwang.com/technology/js-javascript/print_r-in-javascript/#comments Mon, 26 Oct 2009 16:59:03 +0000 pwwang http://pwwang.com/?p=754 Read More: 1151 Words Totally]]>  

做JavaScript开发, 特别是稍微复杂一点的程序, 难免要用到JavaScript面对对象的特性, 现在JavaScript的调试工具逐渐多和强大起来, 然而有时候要看一个object的值, 还是很不方便, 这时候就开始想念php的print_r功能了, 它可以将数组和对象的皮剥得干干净净, 让你看得一清二楚.

网上已经有很多版本了,但都不太好用,没有达到想要的效果,我自己写了一个, 稍微看得清楚一点.

先看一下效果图:

js_print_r

图中我只截取了一个元素,下面还有几个元素没有截取, 从这张图中可以看出来这个object的结构是:

[
   {  events: {
    unload: [ function(){...} ],
    load: [ function(){...} ]
   } },
  { … }
]

功能特色:

1. 同一父级下的子元素,不同的层级显示不同的字体颜色

2. 同一层级的开始和结束的地方用 | 连接, 极好辩认

3. 显示数据类型

4. 如果类型是函数的话, 格式保持不变( IE和firefox下表现不同, 但能保持格式 )

 源代码:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

function print_r(o){
    function print(o,i){
        i = i || 0;  // how many tabs
        var color = '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).substr(-6); 
        // randomly generate a color
        var indent = '|    '
        // form of a tab, you can use '|\t' instead
 
        var space = '';
        for( var k=0; k<i; k++ ){
            space += indent;
        }
        var ret = '';
        for( var name in o ){
            var val = o[name];   
            ret += space + '<font style="color:' + color + '">' + name + " => "+ typeof(val) +'( </font>';
            if( typeof val == 'object' ){
                ret += '\n'+print(val,i+1);
                ret += space;
            } else if( typeof val == 'function' ){
                ret += '\n' + space + indent + val.toString().replace(/\n/g, '\n'+space+indent) + '\n'+space;
            } else
                ret += val + ' ' ;
            ret += '<font style="color:' + color + '">' + ')</font>\n';
        }
        return ret;
    }
    if( typeof o == 'object' )
        return '<pre>'+print(o)+'</pre>';  //use pre to prevent structure destruction
    else
        return o;
}

 

]]> http://pwwang.com/technology/js-javascript/print_r-in-javascript/feed/ 2 Tetris(俄罗斯方块) in jQuery/JavaScript! http://pwwang.com/technology/js-javascript/tetris-in-jquery-javascript/ http://pwwang.com/technology/js-javascript/tetris-in-jquery-javascript/#comments Sat, 24 Oct 2009 18:09:48 +0000 pwwang http://pwwang.com/?p=746 Read More: 2427 Words Totally]]>  

All in jQuery/JavaScript + HTML!

Demo：Tetris(俄罗斯方块) in jQuery/JavaScript!

文章最后会给出源码下载。

先上两张图：

其实很早就有这样的想法，无奈思想一直不是很成熟，各个细节没有想好。突然某一天灵光闪现，就想到办法了。相信应该也有很多人有过这样的想法，可是总是会被一些细节问题所卡住。只要思路有了，代码的实现上并不难。所以我重点说一下思路。

先说一下这样程序的功能吧。图里面能够看得很清楚了。基本的功能就不说了，其它的包括下一个下落形状的预览（左上角的小方块中），隐藏、显示网格线，隐藏、显示下落时对好的阴影形状。其它的就是俄罗斯方块的基本功能了。

很重要的一点，很多人可能受到了思维定势的影响，觉得既然是俄罗斯方块，那当然是一个个方块往下落。如果你这样想，我敢说这样就算程序的功能都可以完成，也绝对在1000行以上（我的程序不超过1000行，包括各个函数的注释），甚至要远远超过这个数。如果跳出了这个方块下落和思维定势，那问题就好解决了。

有人可能要问了，既然方块不动，那是什么在动呢？有人说颜色，但更确切地说是样式！每一次，让下一个方格的样式用上一个方块来替代，这样下落就成了对样式的操作了！虽然下落是位置在变，位置（top,left）也是样式，但是这可能要涉及到HTML，或者DOM元素的操作了。相比而言，前一种思路不用动任何的HTML元素！这是简化的最关键所在了。

再说一下其它方面。

方块的排列：

用一个float:left就能排列好了，需要注意的是，在设置容器的长宽时，要注意小方块的方框宽度，这个也要计算在内。

按键的处理：

我们知道，像DIV，SPAN（容器用的DIV，方块用的SPAN）无法直接响应按键按下的事件（onkeydown），那我们只好先用可以响应的元素来接收这个事件，我用的是document，由于我把它写在了类的内部，所以，要把事件内容的this变成实际要处理的元素（Tetris），就需要用到javascript的call函数了。

形状在移动（左、右、下、旋转）的时候出界或者是否压住了其他方块的判断：

有两种方式，第一种是先计算好方块可以移动的最小距离，然后再判断方块是否移动超过了这个最小距离。（注意我这里说的移动都是对样式的操作）。这种方式比较麻烦，因为首先要得到方块的最左，最右和最下的方块，然后再通过这些方块来计算这个最小距离，并且旋转就无法用距离来衡量了。但是如果要得到阴影（后面解释阴影的实现）的话，还是得计算这个最小距离。我的做法是移动一步（包括旋转）采取第二种方法，而直接下落和生成阴影而采用第一种方法。

第二种方式是先将坐标值预存起来，然后假设方块移动了，再判断这个方块是否在界内，并没在压住其它的方块。如果不符合条件，再将坐标值还原回去。这里插一句，如果预存坐标？我的坐标采用的是数组的形式储存的，不能直接用＝来赋值，这个只能将变量指向右值而成为右值的引用。要复制数组或对象，必须采用循环或者遍历对象属性，且元素或属性的值为基本类型时才能赋值。

下一个形状预览的问题：

想清楚了最关键的问题，这个问题很好解决，这个就是大容器的缩小版，当前显示形状的时候同时计算下一个形状的序列号，并存储。下次显示形状的时候调用这个序列号就行了。

最后说一下旋转的问题：

其实这是一个数学问题。

由于旋转前后，向量的长度（设为R）不变，所以：

cosA = x0/R,  sinA = y0/R     ……   （2）

对于右图：

x1 = R * cos（A+B）＝R（cosAcosB – sinAsinB）

y1 = R|* sin（A+B）＝R（sinAcosB + cosAsinB）

将（2）代入得到：

x1 = x0 * cosB – y0 * sinB

y1 = x0 * sinB + y0 * cosB

由于我设定的是逆时针旋转，所以再将B＝-B代入上式：

x1 = x0 * cosB + y0 * sinB

y1 = -x0 * sinB + y0 * cosB

再者，我们旋转的角度为90度，再代入，得到：

x1=y0, y1=-x0   …………. （3）

这是以原点为出发的向量，如果不是原点为出发点，假设这个点（旋转中心）为（cx，cy），将向量进行平移：

x1-cx = y0-cy, y1-cy = cx-x0，于是（3）变成：

x1 = cx-cy+y0, y1 = cx+cy-x0  （4）

这里值得提一下的是，尽管我们的坐标系和正规的xy平面坐标系不同，我们的原点在左上角，x（二维数组第一下标）轴垂直向下，y（二维数组第二下标）轴水平向右，但是由于我们旋转的时候选取的是向量，它的方向是确定的，不随坐标系的变化而变化，所以（4）仍然适用于我们的坐标系。

有了公式（4）,选取适当的旋转中心（x0,y0）就可以进行转换了。为了效率，我们可以把由四个小方块组成的大方块排除在外，不用旋转。

源代码下载

 

Home Page in Google Code: http://code.google.com/p/tetris-in-jquery-javascript/

Introduction

jQuery.msgbox game called tetris(俄罗斯方块) in jQuery/JavaScript?

Information

pwwang http://pwwang.com

page http://pwwang.com/technology/js-javascript/tetris-in- jquery-javascript/

demo http://pwwang.com/tools/tetris.html

Details

  • It’s a classic tetris
  • It has basic functions of tetris
  • You could decide to show the grids or not
  • You could choose to show the shadow( will the falling shape will locate ) or not
  • Pause or resume game
]]> http://pwwang.com/technology/js-javascript/tetris-in-jquery-javascript/feed/ 2 jquery.msgbox is now hosting in Google Code http://pwwang.com/technology/js-javascript/jquery-msgbox-is-now-hosting-in-google-code/ http://pwwang.com/technology/js-javascript/jquery-msgbox-is-now-hosting-in-google-code/#comments Thu, 22 Oct 2009 13:02:22 +0000 pwwang http://pwwang.com/?p=735 Read More: 712 Words Totally]]>  

Introduction

jQuery.msgbox Popups a msgbox on the web pages using jquery JavaScript Library

Information

pwwang http://pwwang.com

plugin page http://pwwang.com/technology/js-javascript/jquery%e6%8f%92%e4%bb%b6%ef%bc%9adiv%e6%8f%90%e7%a4%ba%e6%a1%86jquery-msgbox-2-0/

Details

It can:

  • simulate window.alert, and the title of the box will flash if you try to click other part of the page
  • simulate window.confirm
  • allow you to popup a plain text box
  • allow you to popup a iframe in the box
  • allow you to popup a box with Ajax method
  • be closed automatically as you wish
  • mask the back contents of page when box showed
  • do an event you designated when the box closes
  • be dragged to anywhere in the window as you wish
  • decided whether popup another box if the page is in the iframe of a box

 Project Home Page: http://code.google.com/p/jquery-msgbox/

]]> http://pwwang.com/technology/js-javascript/jquery-msgbox-is-now-hosting-in-google-code/feed/ 0 DIV提示框：jquery.msgbox.3.1 http://pwwang.com/technology/js-javascript/div%e6%8f%90%e7%a4%ba%e6%a1%86%ef%bc%9ajquery-msgbox-3-1/ http://pwwang.com/technology/js-javascript/div%e6%8f%90%e7%a4%ba%e6%a1%86%ef%bc%9ajquery-msgbox-3-1/#comments Mon, 12 Oct 2009 14:24:25 +0000 pwwang http://pwwang.com/?p=700 Read More: 146 Words Totally]]>  

jquery.msgbox 3.1    历史版本：  1.0   2.0  3.0

3.1 更新：

1. 修正IE8以下“无法得到 display 属性。 参数无效”的bug

2. 关闭提示框后移动提示框的HTML代码

下载：

jquery.msgbox.js

jquery.msgbox.css

close.gif

]]> http://pwwang.com/technology/js-javascript/div%e6%8f%90%e7%a4%ba%e6%a1%86%ef%bc%9ajquery-msgbox-3-1/feed/ 0 DIV提示框：jquery.msgbox.3.0 http://pwwang.com/technology/js-javascript/div%e6%8f%90%e7%a4%ba%e6%a1%86%ef%bc%9ajquery-msgbox-3-0/ http://pwwang.com/technology/js-javascript/div%e6%8f%90%e7%a4%ba%e6%a1%86%ef%bc%9ajquery-msgbox-3-0/#comments Sat, 03 Oct 2009 02:55:14 +0000 pwwang http://pwwang.com/technology/js-javascript/div%e6%8f%90%e7%a4%ba%e6%a1%86%ef%bc%9ajquery-msgbox-3-0/ Read More: 369 Words Totally]]>  

jquery.msgbox 3.0    历史版本：  1.0   2.0

测试页面

3.0 更新：

1. 真正加入关闭后事件（上一版本忘了加）

2. 加入字符串调用模式，仅给出字符串参数就可以弹出提示框

3. 加入了定义标题的css，修正了titleClass不能定义标题的bug

4. 加入针对iframe的oneBoxMode，控制在iframe中是否能再弹出提示框

5. 加入单击背景层标题栏闪动的功能（类似alert）

6. 自动计算以定位关闭图标的位置

7. 自动计算iframe的高度

8. 修正页面较窗口短时背景层不能盖住整个页面的bug，并修正背景层过长的bug

9. 修正iframe模式下，拖拽提示框鼠标进入iframe后拖拽不结束的bug

3.0后版本不贴出源代码，请大家下载后自行浏览。

下载：

jquery.msgbox.js

jquery.msgbox.css

close.gif

 

]]> http://pwwang.com/technology/js-javascript/div%e6%8f%90%e7%a4%ba%e6%a1%86%ef%bc%9ajquery-msgbox-3-0/feed/ 2 jQuery插件：DIV提示框jquery.msgbox http://pwwang.com/technology/js-javascript/jquery%e6%8f%92%e4%bb%b6%ef%bc%9adiv%e6%8f%90%e7%a4%ba%e6%a1%86jquery-msgbox-2-0/ http://pwwang.com/technology/js-javascript/jquery%e6%8f%92%e4%bb%b6%ef%bc%9adiv%e6%8f%90%e7%a4%ba%e6%a1%86jquery-msgbox-2-0/#comments Wed, 30 Sep 2009 16:20:21 +0000 pwwang http://pwwang.com/?p=678 Read More: 2279 Words Totally]]>  

此插件所有的更新都会跟在此文章后, 特此通知!

Google Code Project Home Page: http://code.google.com/p/jquery-msgbox/

原1.0版本查看：又见div提示框,jQuery版

2.0版本改进：

1. 修改了插件的整个写法，可读性更好，将直接的HTML操作改为jquery对象的操作，出错可能性减小

2. 自动关闭时间初始值由-1改为0, 逻辑更可取

3. 分离了各部分样式（除了显示必须的样式）

4. 关闭时的事件，由原有的eval实现，改为直接函数传递，操作性更强

5. 加入了关闭图标，更美观

6. 背景透明值可设定（0~1）

7. 加入了ajax方式完成后的事件，且参数data可以传递

8. 解决了原版拖拽时鼠标容易脱离的问题，使得拖拽更加连贯

9. 解决了IE中背景层无法盖住select的bug

10. 解决了拖拽时提示框可以拖出界外的bug

11. 将原有的click关闭提示框的方式改为mousedown，防止关闭按钮上的拖拽

12. 解决了手动关闭提示框后，自动关闭数秒仍然运行的bug

13. 加入改变窗口大小重置提示框位置的功能

 

下载：

jquery.msgbox.js

jquery.msgbox.css

close.gif

3.0 更新：   测试页面

1. 真正加入关闭后事件（上一版本忘了加）

2. 加入字符串调用模式，仅给出字符串参数就可以弹出提示框

3. 加入了定义标题的css，修正了titleClass不能定义标题的bug

4. 加入针对iframe的oneBoxMode，控制在iframe中是否能再弹出提示框

5. 加入单击背景层标题栏闪动的功能（类似alert）

6. 自动计算以定位关闭图标的位置

7. 自动计算iframe的高度

8. 修正页面较窗口短时背景层不能盖住整个页面的bug，并修正背景层过长的bug

9. 修正iframe模式下，拖拽提示框鼠标进入iframe后拖拽不结束的bug

下载：

jquery.msgbox.js

jquery.msgbox.css

close.gif

3.1 更新：

1. 修正IE8以下“无法得到 display 属性。 参数无效”的bug

2. 关闭提示框后移动提示框的HTML代码

下载：

jquery.msgbox.js

jquery.msgbox.css

close.gif

4.0更新:   测试页面

1. 彻底修正ie6中无法得到display属性的问题和找不到关闭图标的问题

2. 增加firefox有效的弹出对话框时隐藏滚动条的功能（IE下无效）

3. 增加alert模式，模拟window.alert的效果

4. 增加confirm模式，模拟window.confirm效果，并可得到返回值

5. 修正oneBoxMode，只针对iframe中再弹出iframe的情况

6. 对代码进行了其他调整

7. 提供jquery.msgbox.min.js的下载，代码更简化，调用效率更高

下载：

jquery.msgbox.rar

 

jquery.msgbox.4.1  Demo

更新:   

1. 关闭图标载入之前是加入“关闭”字样

2. 修正页面过长或过宽时提示框仍在左上的bug（感谢 hxhui08 的提醒）

下载：

jquery.msgbox.4.1.rar

jquery.msgbox.4.2  Demo

更新:   

1. 修正IE6下背景层无法盖住select的bug(感谢yygcom)

下载：

jquery.msgbox.4.2.zip

jquery.msgbox.5.0  Demo

 

更新:   

 

1. 更改了一些设置的参数名称: 如closeAfter => autoClose, closeEvent => onClose, 意思更加明确

2. 增加了对input的支持, 并支持自定义input box的class, 采用onInputed函数来返回输入的值

3. 增加了是否允许拖拽的设置参数: enableDrag

4. 增加了提示框打开和关闭时是否允许动画的设置参数

5. 页面滚动时, 使得提示框相对窗口的位置不动

6. 增加了从外部关闭提示框的方法 $.closemsgbox, 具体设置参见demo中的说明

7. 不再强行需要关闭图标,当不设置closeImg时,显示"关闭"字样

8. 去掉了oneboxmode及hidescrollbar等一些鸡肋属性设置, 去掉了处理select的遮盖问题的方法

9. 更改了拖拽函数, 使用jquery.dragndrop插件, 对dragndrop进行了一些修正(请使用我提供的这个插件)

10. 针对text或ajax, 内容框的overflow默认方法不再是hidden, 更改为auto.

 

下载：

 

jquery.msgbox.5.0.rar

jquery.msgbox.6.0  Demo       date ： 2010.5.12

更新:   

1. 更改整个插件的编码框架，有利于从外部操作msgbox

2. 增加多种外部操作方法（例如从外部关闭msgbox）

3. type参数不再独立，合并到content中

4. closeImg更改为closeIcon，结构为’close’ 或 {type:’icon’, content: ‘close.gif’} 或{type:’string’, content: ‘close’}

5. msgbox的返回值可以直接从外部方式$mb.value得到，其中$mb是msgbox的handle（$mb=$.msgbox(…)）

6. 可以通过参数animation指定不同的动画效果

7. 提供README和CHANGELOG文件，介绍插件详细使用方法

8. 修改其他小bug

下载：

jquery.msgbox.6.0.rar

]]> http://pwwang.com/technology/js-javascript/jquery%e6%8f%92%e4%bb%b6%ef%bc%9adiv%e6%8f%90%e7%a4%ba%e6%a1%86jquery-msgbox-2-0/feed/ 82