Alert demo

Alerts

Sample alert message.

html


<div
	id="alert1"
	data-urushi-type="alert"
	data-urushi-options='{"header" : "Test Alert"}'>Test message.</div>

javascript


//main.js
require.config(requireConfig);
require(
	['templateEngine', 'templateConfig', 'Urushi'],
	function(templateEngine, templateConfig, Urushi) {
		templateEngine.renderDocument(document.body, templateConfig).then(function(result) {
			result.widgets.alert1.show();
		});
	}
);

Default alert message.

html


<div
	id="alert2"
	class="alert-default"
	data-urushi-type="alert"
	data-urushi-options='{"header" : "Test Alert", "isDisplayCloseIcon" : true}'>Test message.</div>

javascript


//main.js
require.config(requireConfig);
require(
	['templateEngine', 'templateConfig', 'Urushi'],
	function(templateEngine, templateConfig, Urushi) {
		templateEngine.renderDocument(document.body, templateConfig).then(function(result) {
			result.widgets.alert2.show();
		});
	}
);

Primary alert message. Please read me!

html


<div
	id="alert3"
	class="alert-primary"
	data-urushi-type="alert"
	data-urushi-options='{"header" : "Test Alert"}'>Test message.</div>

javascript


//main.js
require.config(requireConfig);
require(
	['templateEngine', 'templateConfig', 'Urushi'],
	function(templateEngine, templateConfig, Urushi) {
		templateEngine.renderDocument(document.body, templateConfig).then(function(result) {
			result.widgets.alert3.show();
		});
	}
);

Success alert message. Congratulation!

html


<div
	id="alert4"
	class="alert-success"
	data-urushi-type="alert"
	data-urushi-options='{"header" : "Test Alert"}'>Test message.</div>

javascript


//main.js
require.config(requireConfig);
require(
	['templateEngine', 'templateConfig', 'Urushi'],
	function(templateEngine, templateConfig, Urushi) {
		templateEngine.renderDocument(document.body, templateConfig).then(function(result) {
			result.widgets.alert4.show();
		});
	}
);

Info alert message. Read me for more information.

html


<div
	id="alert5"
	class="alert-info"
	data-urushi-type="alert"
	data-urushi-options='{"header" : "Test Alert"}'>Test message.</div>

javascript


//main.js
require.config(requireConfig);
require(
	['templateEngine', 'templateConfig', 'Urushi'],
	function(templateEngine, templateConfig, Urushi) {
		templateEngine.renderDocument(document.body, templateConfig).then(function(result) {
			result.widgets.alert5.show();
		});
	}
);

Warning alert message. Please check for potential troubles!

html


<div
	id="alert6"
	class="alert-warning"
	data-urushi-type="alert"
	data-urushi-options='{"header" : "Test Alert"}'>Test message.</div>

javascript


//main.js
require.config(requireConfig);
require(
	['templateEngine', 'templateConfig', 'Urushi'],
	function(templateEngine, templateConfig, Urushi) {
		templateEngine.renderDocument(document.body, templateConfig).then(function(result) {
			result.widgets.alert6.show();
		});
	}
);

Danger alert message. Need your urgent attention!

html


<div
	id="alert7"
	class="alert-danger"
	data-urushi-type="alert"
	data-urushi-options='{"header" : "Test Alert"}'>Test message.</div>

javascript


//main.js
require.config(requireConfig);
require(
	['templateEngine', 'templateConfig', 'Urushi'],
	function(templateEngine, templateConfig, Urushi) {
		templateEngine.renderDocument(document.body, templateConfig).then(function(result) {
			result.widgets.alert7.show();
		});
	}
);

Content dom

html


<div id="alert8" data-urushi-type="alert" data-urushi-options='{"header" : "Test Alert"}'>
	<span style="color: #FF80AB;">content dom</span>
</div>

javascript


//main.js
require.config(requireConfig);
require(
	['templateEngine', 'templateConfig', 'Urushi'],
	function(templateEngine, templateConfig, Urushi) {
		templateEngine.renderDocument(document.body, templateConfig).then(function(result) {
			result.widgets.alert8.show();
		});
	}
);