[jQuery插件] 弹出框

编程足球

浏览: 257124 次
性别:
来自: 福州

最近访客更多访客>>

awerty3450p

hou3417202

cicr

eric_lee2019

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery

jQuery

来源地http://stefangabos.ro/jquery/zebra-dialog/
测试html文件主要代码

  <body>
		<button id="button1">click Me 1</button><br>
		<button id="button2">click Me 2</button><br>
		<button id="button3">click Me 3</button><br>
		<button id="button4">click Me 4</button><br>
		<button id="button5">click Me 5</button><br>
  </body>

测试js文件

$(function(){
	$("#button1").click(function(){
		$.Zebra_Dialog('<strong>Zebra_Dialog</strong>' + '可以加入html的提示框');
	});
	
	$("#button2").click(function(){
		$.Zebra_Dialog(	'<strong>Zebra_Dialog</strong> 可以设置标题和Dialog类型', 
    					{
   					 		'type':     'error',
   					 		'title':    'Error'
   					 	}
   					   );
		
	});
	
	$("#button3").click(function(){
		$.Zebra_Dialog('<strong>Zebra_Dialog</strong>', 
						{
    						'type':     'question',
    						'title':    'Custom buttons',
    						'buttons':  ['Yes', 'No', 'Help'],
    						'onClose':  function(caption) {
										alert("刚刚选择的是" + caption);
    								}
						}
		);
	});
	
	$("#button4").click(function(){
		$.Zebra_Dialog('<strong>Zebra_Dialog</strong>', 
						{
    						'title':    'Custom positioning',
    						'position': ['right - 20', 'top + 20']
						}
		);
	});
	
	
	$("#button5").click(function(){
		new $.Zebra_Dialog('<strong>Zebra_Dialog</strong> 2秒后自动消失',
							{
    							'buttons':  false,
  					  			'modal': false,
    							'position': ['right - 20', 'top + 20'],
    							'auto_close': 2000
							}
		);
	});
});

配置的参数如下(来源于官网)：
Configuration

All parameters are optional.
animation_speed integer

The speed, in milliseconds, by which the overlay and the dialog box will be animated when closing.

Default is 250
auto_close mixed

The number of milliseconds after which to automatically close the dialog box or FALSE to not automatically close the dialog box.

Default is FALSE.
buttons mixed

Use this for localization and for adding custom buttons.

If set to TRUE, the default buttons will be used, depending on the type of the dialog box: ['Yes', 'No'] for “question” type and ['Ok'] for the other dialog box types.

For custom buttons, use an array containing the captions of the buttons to display: ['My button 1', 'My button 2'].

Set to FALSE if you want no buttons.

Note that when the dialog box is closed as a result of clicking a button, the “onClose” event is triggered and the callback function (if any) receives as argument the caption of the clicked button.

See the comments for the “onClose” event below for more information.
vcenter_short_message boolean

Should short messages be vertically centered?

Default is TRUE.
keyboard boolean

When set to TRUE, pressing the ESC key will close the dialog box.

Default is TRUE.
message string

The message in the dialog box – this is passed as argument when the plugin is called.
modal boolean

When set to TRUE there will be a semitransparent overlay behind the dialog box, preventing users from clicking the page’s content.

Default is TRUE.
overlay_close boolean

Should the dialog box close when the overlay is clicked?

Default is TRUE.
overlay_opacity double

The opacity of the overlay (between 0 and 1)

Default is .9
position mixed

Position of the dialog box.

Can be either “center” (which would center the dialog box) or an array with 2 elements, in the form of ['horizontal_position +/- offset', 'vertical_position +/- offset'] (notice how everything is enclosed in quotes) where “horizontal_position” can be “left”, “right” or “center”, “vertical_position” can be “top”, “bottom” or “middle”, and “offset” represents an optional number of pixels to add/substract from the respective horizontal or vertical position.

Positions are relative to the viewport (the area of the browser that is visible to the user)!

Examples:

['left + 20', 'top + 20'] would position the dialog box in the top-left corner, shifted 20 pixels inside.

['right - 20', 'bottom - 20'] would position the dialog box in the bottom-right corner, shifted 20 pixels inside.

['center', 'top + 20'] would position the dialog box in center-top, shifted 20 pixels down.

Default is ['center', 'middle']
title string

Title of the dialog box

Default is “” (an empty string – no title)
type mixed

Dialog box type.

Can be any of the following:

- confirmation
- error
- information
- question
- warning

If you don’t want an icon, set the “type” property to FALSE.

By default, all types except “question” have a single button with the caption “Ok”; type “question” has two buttons, with the captions “Ok” and “Cancel” respectively.

Default is “information”.
width integer

Width of the dialog box

By default, the width of the dialog box is set in the CSS file. Use this property to override the default width at run-time.

Must be an integer, greater than 0. Anything else will instruct the script to use the default value, as set in the CSS file. Value should be no less than 200 for optimal output.

Default is 0 – use the value from the CSS file.
Events
onClose

Event fired when the dialog box is closed.

The callback function (if any) receives as argument the caption of the clicked button or boolean FALSE if the dialog box is closed by pressing the ESC key or by clicking on the overlay.
Public methods
close

Call this method to manually close the dialog box.

Must be called like $(element).data(‘Zebra_Dialog’).close()

下面带上测试的包html 和必须的js css文件

messagebox.zip (80.5 KB)
下载次数: 3

zebra-dialog-1.0.zip (37.1 KB)
下载次数: 2

分享到：

Syntax error, annotations are only avail ... | Tomcat 配置

2011-07-24 03:26
浏览 1450
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论