<!-- X characters remaining example http://alloyui.com/tutorials/ --> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/2.0.0/aui-css/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<input type="text" id="some-input" />
<span id="counter"></span> character(s) remaining
<script>
YUI().use(
'aui-char-counter',
function(Y) {
new Y.CharCounter(
{
counter: '#counter',
input: '#some-input',
maxLength: 10
}
);
}
);
</script>
</body>
</html> another example of elegent info message with nice close animation
<html>
<head>
<script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
</head>
<body>
<div id="myAlert">this is a test alert</div>
<script>
YUI().use(
'aui-alert',
function(Y) {
new Y.Alert(
{
animated: true,
boundingBox: '#myAlert',
closeable: true,
cssClass: 'alert-warning',
destroyOnHide: false,
duration: 1,
render: true
}
);
}
);
</script>
</body>
</html>
Comments
Post a Comment