上一篇文章中我介紹了使用Autodesk Viewer的UI API來給viewer添加自定義工具條的方法，看起來很簡單是吧。不過有個(gè)問題，就是關(guān)于自定義工具條的信息(包括按鈕的文本、圖標(biāo)、樣式、callback等等)全都散落在代碼中，如果要添加或者修改的話，得特別小心的掃描代碼，非常容易出錯(cuò)。有沒有更好的辦法呢？這篇文章就來介紹一下。

既然關(guān)于Toolbar button等京城需要更改的部分散落到各處不方便維護(hù)，那我就把他們集中到一起獨(dú)立出來。于是我寫了個(gè)自定義的toolbarConfig對象，采用JSON格式，剛好符合JavaScript的語法，如果我需要添加或者修改工具條或按鈕，只需要修改這個(gè)config對象就可以了： /

// custom toobar config

var toolbarConfig = {

‘id‘: ‘toolbar_id_1‘,

‘containerId‘: ‘toolbarContainer‘,

‘subToolbars‘: [

{

‘id‘: ‘subToolbar_id_non_radio_1‘,

‘isRadio‘: false,

‘visible‘: true,

‘buttons‘: [

{

‘id‘: ‘buttonRotation‘,

‘buttonText‘ : ‘Rotation‘,

‘tooltip‘: ‘Ratate the model at X direction‘,

‘cssClassName‘: ‘glyphicon glyphicon glyphicon-play-circle‘,

‘iconUrl‘ :‘Images/3d_rotation.png‘,

‘onclick‘: buttonRotationClick

},

{

‘id‘: ‘buttonExplode‘,

‘buttonText‘: ‘Explode‘,

‘tooltip‘: ‘Explode the model‘,

‘cssClassName‘: ‘‘,

‘iconUrl‘: ‘Images/explode_icon.jpg‘,

‘onclick‘: buttonExplodeClick

}

]

},

{

‘id‘: ‘subToolbar_id_radio_1‘,

‘isRadio‘: true,

‘visible‘: true,

‘buttons‘: [

{

‘id‘: ‘radio_button1‘,

‘buttonText‘: ‘radio_button1‘,

‘tooltip‘: ‘this is tooltip for radio button1‘,

‘cssClassName‘: ‘‘,

‘iconUrl‘: ‘‘,

‘onclick‘: radioButton1ClickCallback

},

{

‘id‘: ‘radio_button2‘,

‘buttonText‘: ‘radio_button2‘,

‘tooltip‘: ‘this is tooltip for radio button2‘,

‘cssClassName‘: ‘‘,

‘iconUrl‘: ‘‘,

‘onclick‘: radioButton2ClickCallback

}

]

}

]

};

function buttonRotationClick(e) {

}

function buttonExplodeClick() {

}

function button2ClickCallback(e) {

alert(‘Button2 is clicked‘);

}

function radioButton1ClickCallback(e) {

alert(‘radio Button1 is clicked‘);

}

function radioButton2ClickCallback(e) {

alert(‘radio Button2 is clicked‘);

}

接下來創(chuàng)建一個(gè)工具方法，解讀這個(gè)toolbarConfig并利用viewer UI API來創(chuàng)建對于的工具條和按鈕，使用方法也和簡單：

add custom toolbar , usage example:

//addToolbar(toolbarConfig);

function addToolbar(toolbarConfig, viewer) {

//find the container element in client webpage first

var containter = document.getElementById(toolbarConfig.containerId);

// if no toolbar container on client‘s webpage, create one and append it to viewer

if (!containter) {

containter = document.createElement(‘div‘);

containter.id = ‘custom_toolbar‘;

//‘position: relative;top: 75px;left: 0px;z-index: 200;‘;

containter.style.position = ‘relative‘;

containter.style.top = ‘75px‘;

containter.style.left = ‘0px‘;

containter.style.zIndex= ‘200‘;

viewer.clientContainer.appendChild(containter);

}

//create a toolbar

var toolbar = new Autodesk.Viewing.UI.ToolBar(containter);

for (var i = 0, len = toolbarConfig.subToolbars.length; i < len; i++) {

var stb = toolbarConfig.subToolbars[i];

//create a subToolbar

var subToolbar = toolbar.addSubToolbar(stb.id, stb.isRadio);

subToolbar.setToolVisibility(stb.visible);

//create buttons

for (var j = 0, len2 = stb.buttons.length; j < len2; j++) {

var btn = stb.buttons[j];

var button = Autodesk.Viewing.UI.ToolBar.createMenuButton(btn.id, btn.tooltip, btn.onclick);

//set css calss if availible

if (btn.cssClassName) {

button.className = btn.cssClassName;

}

//set button text if availible

if (btn.buttonText) {

var btnText = document.createElement(‘span‘);

btnText.innerText = btn.buttonText;

button.appendChild(btnText);

}

//set icon image if availible

if (btn.iconUrl) {

var ico = document.createElement(‘img‘);

ico.src = btn.iconUrl;

ico.className = ‘toolbar-button‘;

button.appendChild(ico);

}

//add button to sub toolbar

toolbar.addToSubToolbar(stb.id, button);

}

}

下面就是運(yùn)行效果了：

原文：http://www.cnblogs.com/junqilian/p/3912274.html

總結(jié)

以上是生活随笔為你收集整理的html自定义工具条,为Autodesk Viewer添加自定义工具条的更好方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。