[jQuery插件] 弹出框
来源地
http://stefangabos.ro/jquery/zebra-dialog/
测试html文件主要代码
测试js文件
配置的参数如下(来源于官网)：
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文件
测试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文件