IT教程 | 加入收藏 | 简体 | 繁体
Tangram教程:JavaScript...JQuery教程ExtJS教程Tangram教程Ajax教程
当前位置: 首页 > Js+Ajax > Tangram教程

baidu.ui.Toolbar 建立toolBar实例

2012-07-28来源:[www.121ask.com]热度:0℃ 【字体:

baidu.ui.Toolbar 

toolBar基类,建立toolBar实例

  语法: new baidu.ui.Toolbar(options)  

返回值:<instance> 实例对象

   

参数

<Object> * options config参数.
<String>    options.title toolbar的title参数,默认为空.
<String> * options.name name参数,每个toolbar对象都有一个name参数.
<String>    options.direction 有效值:"vertical","horizontal" toolbar只能在横向和纵向之间进行选择,默认为横向,及"horizontal".
<String>    options.position 当direction为horizontal时,默认值为left;当direction为vertical时,默认值为top. align有效值:'left', 'right', 'center', 'justify', 'inherit' valign有效值:'top', 'middle', 'bottom', 'baseline'
<String|Number> * options.width 宽度.
<String|Number> * options.height 高度.
<String|HTMLElement> * options.container 实例容器.
<Array> * options.items Object数组,创建ui的JSON.
<String> * options.type ui控件类型
<Object> * options.config 创建ui控件所需要的config参数.

实例方法

<void> render(...) 绘制toolbar
<baidu.ui> add(...) 使用传入config的方式添加ui组件到toolBar
<void> addRaw(...) 直接向toolbar中添加已经创建好的uiInstance
<void> remove(...) 删除toolbar item
<void> removeAll() 删除所有ui控件
<void> enable(...) enable ui组件,当不传入name时,enable所有ui组件到
<void> disable(...) disable ui组件,当不传入name时,disable所有ui组建
<void> enableAll() 激活toolbar中所有的item
<void> disableAll() 禁用toolbar中所有的item
<baidu.ui.Instance> getItemByName(...) 通过name获取ui组件
<void> dispose()

 实例:

<body>
 
<div id="toolbarId"></div
 
</body>
 
<script type="text/javascript">
 
var instance = new baidu.ui.Toolbar({items: [ { type: "combox", config:{ width: 93, skin: "family", name: "font-family", data:[ { content: '宋体', value: '1' }, { content: '黑体', value: '2' }, { content: '楷体', value: '3' } ] } }, { type: "toolbar-spacer", config: { width: "10px" } }, { type: "combox", config:{ width: 68, skin: "size", name: "font-size", data:[ { content: '10', value: '1' }, { content: '12', value: '2' }, { content: '14', value: '3' } ] } }, { type: "toolbar-spacer", config: { width: "10px" } }, { config: { skin: "boldBtn", onclick: function(){alert("bold");} } }, { config: { skin: "italicBtn", onclick: function(){alert("italic");} } }, { config: { skin: "underlineBtn", onclick: function(){alert("underline");} } }, { config: { skin: "colorBtn" } }, { config: { skin: "backColorBtn" } }, { config: { skin: "linkBtn" } } ] });
 
instance.render("toolbarId");
 
/*
 
instance.enable('font-family');
 
*/
 
/*
 
instance.disable('font-family');
 
*/
 
/*
 
instance.enableAll();
 
*/
 
/*
 
instance.disableAll();
 
*/
 
//提示:您可以使用注释中的代码进行演示
 
</script>

 

以上IT文章《baidu.ui.Toolbar 建立toolBar实例》由名客技术网[www.121ask.com]提供阅读!
名客技术网是一个免费为广大IT技术人员提供IT教程,绿色软件,asp/php/jsp/java/net等实例视频教程,CMS教程,破解软件下载以及学习相关源码、知识的IT网站。
名客技术网如果无意之中侵犯了您的版权,请来电告知,本站将在3个工作日内删除 QQ:175352796
Copyright 2011-2017 Powered by 121ASK.COM, All Rights Reserved.
备案号:鄂ICP备11013833号-3