为Autodesk Viewer添加自定义工具条

如果你参加过我们近期的活动，你就会频繁的听到我们现在正在做的Autodesk Viewer大模型浏览器，这是一个不需要下载任何插件，基于WebGL技术的浏览器，可以支持几十种数据格式。同时viewer也提供了API，你可以把这个viewer嵌入到你自己的web程序中。我们也写了不少sample，发布到了 github 上，这些示例都需要ConsumerKey，你需要向Autodesk来申请，目前该产品还没有正式发布，我们只邀请了一些客户做测试，很快就会发布，大家还需要耐心等待一下。

在最近的code push中新增加了自定义界面API，使用这些API你可以创建和viewer内置工具条一样风格的自定义工具条。首先你需要在页面上创建一个容器，一般是div标签，用css控制好它的位置，下面的Javascript代码来生成自定义的工具条：

(screen-shot)

 

function addToolBar(container) {

    //create a toolbar

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


    //create a subToolbar

    var subToolbar = toolbar.addSubToolbar('sub1');


    //add some  buttons to it

    var button1 = Autodesk.Viewing.UI.ToolBar.createMenuButton("Button1",

        "Tooltip for Button1",

        function (e) {

            alert("Button1 is clicked.");

        });


    //add icon for the button

    button1.className = 'glyphicon glyphicon-euro';


    var button2 = Autodesk.Viewing.UI.ToolBar.createMenuButton("Button2",

        "Tool tip for Button2",

        function (e) {

            alert("Button2 is clicked");

        });

    //Add buttons to subtoolbar

    toolbar.addToSubToolbar("sub1", button1);

    toolbar.addToSubToolbar("sub1", button2);



    //create a radio sub toolbar

    var radioSubToolbar = toolbar.addSubToolbar('radioSub2', true); //id, isRadio

    

    // add some buttons to it

    var button3 = Autodesk.Viewing.UI.ToolBar.createMenuButton("Button3",

        "Tool tip for Button3",

        function (e) {

            alert("Button2 is clicked");

        });

    var button4 = Autodesk.Viewing.UI.ToolBar.createMenuButton("Button4",

        "Tool tip for Button4",

        function (e) {

            alert("Button4 is clicked");

        });


    //add buttons to radioSubToolbar

    toolbar.addToSubToolbar("radioSub2", button3);

    toolbar.addToSubToolbar("radioSub2", button4);



}

下来我们会介绍一种更容易组织和维护的方式来创建自定义工具条。

作者： 峻祁连
邮箱：junqilian@163.com 
出处： http://junqilian.cnblogs.com 
转载请保留此信息。

本文转自峻祁连. Moving to Cloud/Mobile博客园博客，原文链接：http://www.cnblogs.com/junqilian/p/3910594.html ，如需转载请自行联系原作者