mirror of
https://github.com/FlipsideCrypto/DefinitelyTyped.git
synced 2026-02-06 19:07:08 +00:00
Add JQuery SimpleModal plugin.
This commit is contained in:
parent
7145db5ef4
commit
5dd40108b9
80
jquery.simplemodal/jquery.simplemodal-tests.ts
Normal file
80
jquery.simplemodal/jquery.simplemodal-tests.ts
Normal file
@ -0,0 +1,80 @@
|
||||
// Tests taken from documentation: http://www.ericmmartin.com/projects/simplemodal/
|
||||
|
||||
/// <reference path="../jquery/jquery.d.ts"/>
|
||||
/// <reference path="jquery.simplemodal.d.ts"/>
|
||||
|
||||
// Chained call with no options
|
||||
$("#sample").modal();
|
||||
|
||||
// Stand-alone call with no options
|
||||
$.modal($("#sample"));
|
||||
|
||||
// Enable overlay click-to-close
|
||||
$("#sample").modal({overlayClose:true});
|
||||
|
||||
// Change overlay color and opacity
|
||||
$("#sample").modal({
|
||||
opacity:80,
|
||||
overlayCss: {backgroundColor:"#fff"}
|
||||
});
|
||||
|
||||
// Disable focus (allows tabbing away from dialog)
|
||||
$("#sample").modal({focus:false});
|
||||
|
||||
// Change min height and width
|
||||
$("#sample").modal({
|
||||
minHeight:400,
|
||||
minWidth: 600
|
||||
});
|
||||
|
||||
// Manually set position
|
||||
$("#sample").modal({position: [10,10]});
|
||||
|
||||
// Manually set position using percentages
|
||||
$("#sample").modal({position: ["50%","50%"]});
|
||||
|
||||
// Display an external page using an iframe
|
||||
var src = "http://365.ericmmartin.com/";
|
||||
$.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', {
|
||||
closeHTML:"",
|
||||
containerCss:{
|
||||
backgroundColor:"#fff",
|
||||
borderColor:"#fff",
|
||||
height:450,
|
||||
padding:0,
|
||||
width:830
|
||||
},
|
||||
overlayClose:true
|
||||
});
|
||||
|
||||
// Opening animations
|
||||
$("#sample").modal({onOpen: function (dialog) {
|
||||
dialog.overlay.fadeIn('slow', function () {
|
||||
dialog.data.hide();
|
||||
dialog.container.fadeIn('slow', function () {
|
||||
dialog.data.slideDown('slow');
|
||||
});
|
||||
});
|
||||
}});
|
||||
|
||||
// Closing animations
|
||||
$("#sample").modal({onClose: function (dialog) {
|
||||
dialog.data.fadeOut('slow', function () {
|
||||
dialog.container.hide('slow', function () {
|
||||
dialog.overlay.slideUp('slow', function () {
|
||||
$.modal.close();
|
||||
});
|
||||
});
|
||||
});
|
||||
}});
|
||||
|
||||
// Default Values
|
||||
|
||||
// Example – Single Property:
|
||||
$.modal.defaults.closeClass = "modalClose";
|
||||
|
||||
// Example – Multiple Properties:
|
||||
$.extend($.modal.defaults, {
|
||||
closeClass: "modalClose",
|
||||
closeHTML: "<a href='#'>Close</a>"
|
||||
});
|
||||
118
jquery.simplemodal/jquery.simplemodal.d.ts
vendored
Normal file
118
jquery.simplemodal/jquery.simplemodal.d.ts
vendored
Normal file
@ -0,0 +1,118 @@
|
||||
// Type definitions for SimpleModal 1.4.4
|
||||
// Project: http://www.ericmmartin.com/projects/simplemodal/
|
||||
// Definitions by: Friedrich von Never <https://github.com/ForNeVeR>
|
||||
// Definitions: https://github.com/borisyankov/DefinitelyTyped
|
||||
|
||||
/// <reference path="../jquery/jquery.d.ts" />
|
||||
|
||||
declare module SimpleModal {
|
||||
interface SimpleModalOptions {
|
||||
/** The jQuery selector to append the elements to. For ASP.NET, use 'form'. Default: 'body'. */
|
||||
appendTo?: string;
|
||||
|
||||
/** Focus in the first visible, enabled element? Default: true. */
|
||||
focus?: boolean;
|
||||
|
||||
/** The opacity value for the overlay div, from 0 - 100. Default: 50. */
|
||||
opacity?: number;
|
||||
|
||||
/** The DOM element id for the overlay div. Default: 'simplemodal-overlay'. */
|
||||
overlayId?: string;
|
||||
|
||||
/** The CSS styling for the overlay div. Default: {}. */
|
||||
overlayCss?: Object;
|
||||
|
||||
/** The DOM element id for the container div. Default: 'simplemodal-container'. */
|
||||
containerId?: string;
|
||||
|
||||
/** The CSS styling for the container div. Default: {}. */
|
||||
containerCss?: Object;
|
||||
|
||||
/** The DOM element id for the data div. Default: 'simplemodal-data'. */
|
||||
dataId?: string;
|
||||
|
||||
/** The CSS styling for the data div. Default: {}. */
|
||||
dataCss?: Object;
|
||||
|
||||
/** The minimum height for the container. Default: null. */
|
||||
minHeight?: number;
|
||||
|
||||
/** The minimum width for the container. Default: null. */
|
||||
minWidth?: number;
|
||||
|
||||
/** The maximum height for the container. If not specified, the window height is used. Default: null. */
|
||||
maxHeight?: number;
|
||||
|
||||
/** The maximum width for the container. If not specified, the window width is used. Default: null. */
|
||||
maxWidth?: number;
|
||||
|
||||
/** Resize the container if it exceeds the browser window dimensions? Default: false. (Changed in 1.4) */
|
||||
autoResize?: boolean;
|
||||
|
||||
/** Automatically position the container upon creation and on window resize? Default: true. (Changed in 1.4) */
|
||||
autoPosition?: boolean;
|
||||
|
||||
/** Starting z-index value. Default: 1000. */
|
||||
zIndex?: number;
|
||||
|
||||
/** If true, closeHTML, escClose and overlayClose will be used if set. If false, none of them will be used. Default: true. */
|
||||
close?: boolean;
|
||||
|
||||
/** The HTML for the default close link. SimpleModal will automatically add the closeClass to this element. Default: ''. */
|
||||
closeHTML?: string;
|
||||
|
||||
/** The CSS class used to bind to the close event. Default: 'simplemodal-close'. */
|
||||
closeClass?: string;
|
||||
|
||||
/** Allow Esc keypress to close the dialog? Default: true. */
|
||||
escClose?: boolean;
|
||||
|
||||
/** Allow click on overlay to close the dialog? Default: false. */
|
||||
overlayClose?: boolean;
|
||||
|
||||
/** Position of container [top, left]. Can be number of pixels or percentage. Default: null. */
|
||||
position?: Array<any>;
|
||||
|
||||
/** Persist the data across modal calls? Only used for existing DOM elements. If true, the data will be maintained across modal calls, if false, the data will be reverted to its original state. Default: true. */
|
||||
persist?: boolean;
|
||||
|
||||
/** User will be unable to interact with the page below the modal or tab away from the dialog. If false, the overlay, iframe, and certain events will be disabled allowing the user to interact with the page below the dialog. Default: true. (Added in 1.3.4. Name changed from transient in 1.3.5) */
|
||||
modal?: boolean;
|
||||
|
||||
/** The callback function used in place of SimpleModal's open. Default: null. */
|
||||
onOpen?: (dialog: SimpleModalDialog) => void;
|
||||
|
||||
/** The callback function used after the modal dialog has opened. Default: null. */
|
||||
onShow?: (dialog: SimpleModalDialog) => void;
|
||||
|
||||
/** The callback function used in place of SimpleModal's close. Default: null. */
|
||||
onClose?: (dialog: SimpleModalDialog) => void;
|
||||
}
|
||||
|
||||
/** Sent to callbacks as a parameter. */
|
||||
interface SimpleModalDialog {
|
||||
overlay: JQuery;
|
||||
container: JQuery;
|
||||
data: any;
|
||||
iframe: JQuery;
|
||||
}
|
||||
|
||||
interface Static {
|
||||
defaults: SimpleModalOptions;
|
||||
(element: JQuery, options?: SimpleModalOptions): JQuery;
|
||||
(html: string, options?: SimpleModalOptions): JQuery;
|
||||
close(): void;
|
||||
}
|
||||
|
||||
interface JQueryExtension {
|
||||
(options?: SimpleModalOptions): JQuery;
|
||||
}
|
||||
}
|
||||
|
||||
interface JQueryStatic {
|
||||
modal: SimpleModal.Static;
|
||||
}
|
||||
|
||||
interface JQuery {
|
||||
modal: SimpleModal.JQueryExtension;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user