kityminder
Version:
125 lines (91 loc) • 3.4 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>FUI</title>
<link rel="stylesheet" type="text/css" href="../theme/default/fui.all.css">
<script src="../dev-lib/jhtmls.min.js"></script>
<script src="../dev-lib/jquery-1.11.1.js"></script>
<script src="../dev-lib/dev-define.js"></script>
<script>
inc.config({
base: '../src'
});
</script>
<script src="../dev-lib/exports.js"></script>
<script src="../dev-lib/dev-start.js"></script>
<script>
window.onload = function () {
initCommonButton();
initToggleButton();
};
function initCommonButton () {
var panel = new FUI.Panel(),
button = new FUI.Button( {
// disabled: true,
// preventDefault: true,
label:'按钮',
text: '清理垃圾',
width: 500,
height: 40,
// icon: "demo/assets/icon/clean.png",
icon: {
img: 'assets/icon/clean.png'
},
// layout: 'bottom',
padding: '2px 10px'
} );
button.on( "click", function ( e ) {
console.log( 'this: ' + this.widgetName )
console.log( 'event: ' + e.type )
console.log( this.getLabel() )
this.setLabel( "为什么呢" );
} );
button.on( "labelchange", function ( e, info ) {
console.log( e.type )
console.log( info.currentText )
console.log( info.prevText )
} );
panel.appendWidget( button );
panel.appendTo( $( "#common" )[ 0 ] );
// panel.disable();
}
function initToggleButton () {
var button = new FUI.ToggleButton( {
// disabled: true,
// preventDefault: true,
pressed: true,
label: {
text: 'Linux'
},
text: '启动Linux',
icon: 'assets/icon/linux.png',
layout: 'right'
} );
button.on( "change", function ( e, currentState, oldState ) {
console.log( this.widgetName + " 发生了 " + e.type + " 事件; 当前按钮" +
( this.isPressed() ? "已" : "未" ) + "按下!" +
"按钮当前的状态值: "+ currentState);
// this.disable();
} );
button.on( "click", function () {
this.setLabel( 'Unix' );
} );
button.on( "labelchange", function ( e, info ) {
console.log( e.type + '： from "' + info.prevText + '" to "' + info.currentText + '"' )
} );
console.log( '当前按钮是否已经按下? ' + button.isPressed() );
button.appendTo( $( "#toggle" )[ 0 ] );
window.button = button;
}
</script>
</head>
<body>
<h1>FUI Button Widget 示例</h1>
<h2>通用Button</h2>
<input type="text">
<div id="common"></div>
<h2>可切换Button</h2>
<div id="toggle"></div>
</body>
</html>