Skip to content

Latest commit

 

History

History
344 lines (220 loc) · 5.53 KB

README.md

File metadata and controls

344 lines (220 loc) · 5.53 KB

Alert7.js

The pure JavaScript plugin. Create the iOS style alerts simply.

preview-alert7

Usage

Include file of Alert7.js

Include alert7.js file.

<script src="alert7.js"></script>

Or minify file with alert7.min.js.

<script src="alert7.min.js"></script>

There has two ways to execute Alert7.js.

Create static Alert7

Just use Alert7.alert method with title attribute. In the moment, There will appear a basic alert with a default button. And return an Alert7-Object. Click button what without handler will just close the alert.

Alert7.alert("This is Title");

preview-alert7-a

Add content text attribute and change the button letter with third attribute.

Alert7.alert("This is Title", "Put some text contents in here", "Got it");

Or incloud button handler in the next attribute. Alert will disappear when any button handler completed.

Alert7.alert("This is Title", "Put some text contents in here", "Got it", function () {});

preview-alert7-b

Append any amount of action buttons.

Alert7.alert("This is Title", "Put some text contents in here", 
	"BUTTON 1", function () {}, 
	"BUTTON 2", function () {}, 
	"BUTTON 3"
);

preview-alert7-c

To launch a simple confirm with using Alert7.confirm method. And return an Alert7-Object too.

Alert7.confirm("This is Title", "Put some text contents in here", 
	"BUTTON 1", function () {}, 
	"BUTTON 2", function () {}
);

preview-alert7-e

New Alert7-object

Use new to create an Alert7-Object.

var a7Alert = new Alert7();

Set title of the Alert7-Object.

a7Alert.title = "This is Title";
a7Alert.setTitle("This is Title");

Set text messages of the Alert7-Object.

a7Alert.message = "Put some text contents in here";
a7Alert.setMessage("Put some text contents in here");

Add action button to the Alert7-Object.

a7Alert.addAction("Got it");
a7Alert.actions.push({
	title: "Got it"
});

With handler.

a7Alert.addAction("Got it", function () {});
a7Alert.actions.push({
	title: "Got it",
	handler: function () {}
});

Or set multiple actions with a command with Array.

a7Alert.actions = [{
	title: "BUTTON A",
	handler: function () {}
}, {
	title: "BUTTON B",
	handler: function () {}
}, {
	title: "BUTTON C"
}];

Present the Alert7-Object.

a7Alert.present();

preview-alert7-c

Change type for confriming with Alert7 type enumerations. (Enumerations with Consts section)

a7Alert.type = Alert7.TYPE_CONFIRM;
a7Alert.setType(Alert7.TYPE_CONFIRM);

Present it. Confirm Alert7 only has two actions at most.

preview-alert7-d

All of action button will close the alert. But it can be broken by called Alert7.break method in handler.

function () {
	Alert7.break();
}

Methods

Alert7.alert

Appear an alert of Alert7 and return Alert7-Object.

_a7Obj = Alert7.alert( _titleStr, _messageStr,
	_btn1Str, _btn1Handler,
	_btn2Str, _btn2Handler,
	...	
)

parameter: _titleStr:String, _messageStr:String, _btn1Str:String, _btn1Handler:Function... / return: _a7Obj:Alert7Object


Alert7.confirm

Appear an confirm of Alert7 and return Alert7-Object.

_a7Obj = Alert7.confirm( _titleStr, _messageStr,
	_btn1Str, _btn1Handler,
	_btn2Str, _btn2Handler
)

parameter: _titleStr:String, _messageStr:String, _btn1Str:String, _btn1Handler:Function... / return: _a7Obj:Alert7Object


Alert7.break

Prevent closing alert when an action button is clicked. It can only use at handler Function.

Alert7.break()

setTitle

Set title of Alert7-Object.

_a7Obj.setTitle( _titleStr )

parameter: _a7Obj:Alert7Object, _titleStr:String


setMessage

Set message of Alert7-Object.

_a7Obj.setMessage( _messageStr )

parameter: _a7Obj:Alert7Object, _messageStr:String


setType

Set type of Alert7-Object with type enumerations.

_a7Obj.setType( _typeEnum )

parameter: _a7Obj:Alert7Object, _typeEnum:Number (Enumerations with Consts section)


addAction

Append an action button for Alert7-Object and what will be handled.

_a7Obj.addAction( _text, _handler )

parameter: _a7Obj:Alert7Object, _text:String, _handler:Function


present

Present and show the alert of Alert7-object.

_a7Obj.present()

parameter: _a7Obj:Alert7Object


dismiss

Disappear the alert of Alert7-object.

_a7Obj.dismiss()

parameter: _a7Obj:Alert7Object


Values

title

Title of the Alert7-Object.

type: String


message

Message of the Alert7-Object.

type: String


type

Type of the Alert7-Object with type enumerations.

type: Number (Enumerations with Consts section)


actions

JSON list of action data of the Alert7-Object.

type: Array


Consts

Alert7.TYPE_DEFAULT

Type default enumerations.

type: Number


Alert7.TYPE_CONFIRM

Type confirm enumerations.

type: Number


Examples

Todo

  • Some methods to change style.
  • Incloud inputs.
  • Incloud template HTML.

License

Released under the MIT license.