SharePoint 2010/2013 使用Javascript 动态添加Ribbon 按钮

本文讲述如和在SharePoint 210/2013中使用JavaScript 动态添加Ribbon 按钮。

效果如上，废话少说，直接上代码：

<script type="text/javascript">
        window.attachEvent("onload", CreateTab);
        function CreateTab() {
            SelectRibbonTab('Ribbon.Read', true);
            setTimeout(createMyTab, 1000);
        }

        function createMyTab() {
            var ribbon = SP.Ribbon.PageManager.get_instance().get_ribbon();
            if (ribbon !== null) {
                var tab = new CUI.Tab(ribbon, 'Sample.Tab', 'Sample', 'Tab description', 'Sample.Tab.Command', false, '', null, null);
                ribbon.addChild(tab);
                var group = new CUI.Group(ribbon, 'Sample.Tab.Group', 'Sample Group', 'Group Description', 'Sample.Group.Command', null);
                tab.addChild(group);
                var layout = new CUI.Layout(ribbon, 'Sample.Layout', 'The Layout');
                group.addChild(layout);
                var section = new CUI.Section(ribbon, 'Sample.Section', 2, 'Top'); //2==OneRow
                layout.addChild(section);
                var controlProperties = new CUI.ControlProperties();
                controlProperties.TemplateAlias = 'o1';
                controlProperties.ToolTipDescription = 'Use this button';
                controlProperties.Image32by32 = '_layouts/15/images/placeholder32x32.png';
                controlProperties.ToolTipTitle = 'A Button';
                controlProperties.LabelText = 'Something';
                var button = new CUI.Controls.Button(ribbon, 'Sample.Button', controlProperties);
                var controlComponent = button.createComponentForDisplayMode('Large');
                var row1 = section.getRow(1);
                row1.addChild(controlComponent);
                group.selectLayout('The Layout');
            }
        }

        function SelectTab(e) {
            setTimeout(function () { SelectRibbonTab('Sample.Tab', true); }, 1000);
            setTimeout(OverWriteEvents, 1500);
        }

        function OverWriteEvents() {
            var sampleButton = document.getElementById("Sample.Button-Large");
            sampleButton.classList.remove('ms-cui-disabled');
            sampleButton.onclick = function () { alert("Clicked Sample.Button"); };
        }

 </script>

触发事件的link 

<a οnclick="SelectTab(); return false;">add ribbon by JS</a>