AUI常见列子
焦阎宝
1、按钮。
<body>
<script type="text/javascript" charset="utf-8">
AUI().ready('aui-button-item', function(A) {
var instance = new A.ButtonItem({
icon: 'pencil',
label: 'myFirstButton',
handler :function(){
alert('hello word');
},
render: '#divId2'
});
});
</script>
<div id='divId'>
instance
</div>
<div id='divId2'></div>
</body>2、弹出对话框
<!DOCTYPE html>
<html>
<head>
<script src="D:/myDocument/myBeforeNote/js/aui/build/aui/aui.js" type="text/javascript"></script>
<link rel="stylesheet" href="D:/myDocument/myBeforeNote/js/aui/build/aui-skin-classic/css/aui-skin-classic-all-min.css" type="text/css" media="screen" />
<style type="text/css" media="screen">
body {
font-size: 12px;
}
#wrapper {
padding: 10px;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Alloy - aui-widget Demo</h1>
<div id="demo">
<input id="cloneButton" type="button" value="Clone" />
<input id="toggleButton" type="button" value="Toggle" />
</div>
</div>
<script type="text/javascript" charset="utf-8">
AUI().ready('aui-dialog', 'aui-overlay-manager', 'dd-constrain', function(A) {
var instance = new A.Dialog({
bodyContent: 'Dialog body by lance',
centered: true,
constrain2view: true,
destroyOnClose: true,
draggable: true,
height: 250,
resizable: false,
stack: true,
title: 'Dialog title',
width: 500,
close: true,
buttons: [
{
text: 'MyGo',
handler: function(){
alert('你点击了Go！');
}
},
{
text: 'cancel',
handler: function(){
this.close( );
}
}
]
});
A.one('#cloneButton').on('click',function(){
instance.render();
});
A.one('#toggleButton').on('click',function(){
instance.hide();
});
});
</script>
</body>
</html>
类似资料：