tabpanetest.xml

在流览器上仿CS界面的JAVASCRIPT脚本

<?xml version="1.0"?>

<application>
	<window caption="Tab Pane Test" width="500" height="400" centered="true"/>
	<resources>
		<script><![CDATA[

function TabPaneTest() {
	var win = application.getWindow();

	//////////////////////////////////////////
	// tab bar test start
	var tb = new BiTabBar;
	tb.setLocation(10, 10);
	tb.setRight(10);

	var t1 = new BiTabButton("Tab 1");
	var t2 = new BiTabButton("Tab 2");
	var t3 = new BiTabButton("Tab 3");

	tb.add(t1);
	tb.add(t2);
	tb.add(t3);
	win.add(tb);

	var tf = new BiTextField;
	tf.setLocation(10, 50);
	win.add(tf);

	tb.addEventListener("change", function (e) {
		var t = tb.getSelected();
		if (t)
			tf.setText(t.getText());
	});

	var count = 4;
	var addButton = new BiButton("Add");
	var removeButton = new BiButton("Remove");

	addButton.setLocation(120, 50);
	removeButton.setLocation(160, 50);

	win.add(addButton);
	win.add(removeButton);

	addButton.addEventListener("action", function (e) {
		tb.add( new BiTabButton("Tab " + count++) );
		tb.layoutAllChildren();
	});
	removeButton.addEventListener("action", function (e) {
		var t = tb.getSelected();
		if (t) {
			tb.remove(t);
			tb.layoutAllChildren();
		}
	});

	// end tab bar test
	/////////////////////////////////////////

	/////////////////////////////////////////
	// Tab Pane test

	var image = new BiImage( application.getPath() + "images/infomark.16.png", 16, 16 );

	var tabPane = new BiTabPane;
	tabPane.setLocation(10, 100);

	var tabPage1 = new BiTabPage("Tab 1", image);
	var tabPage2 = new BiTabPage("Tab 2", image);
	var tabPage3 = new BiTabPage("Tab 3", image);

	var label1 = new BiTextField("Label in tab 1");
	var label2 = new BiTextField("Label in tab 2");
	var label3 = new BiTextField("Label in tab 3");

	label1.setLocation(10, 10);
	label2.setLocation(10, 40);
	label3.setLocation(10, 70);

	win.add(tabPane);

	tabPane.add(tabPage1);
	tabPane.add(tabPage2);
	tabPane.add(tabPage3);

	tabPage1.add(label1);
	tabPage2.add(label2);
	tabPage3.add(label3);

	tabPane.setRight(10);
	tabPane.setBottom(10);

	var ph = tabPane.getTabBar().getPreferredHeight();
	tabPane.getTabBar().setHeight(ph);
}


TabPaneTest.main = function () { new TabPaneTest; };

		]]></script>
	</resources>
</application>