如何创建类似ScriptLab Code任务窗格的顶部按钮栏？

Got it, let's walk through how to build that top button bar for your Office add-in task pane—just like ScriptLab's! Here's a step-by-step breakdown with code you can copy-paste and tweak:

First, add the button bar structure to your task pane's HTML file (usually taskpane.html if you used the Yeoman Office generator). Place this at the top of your content container to mimic ScriptLab's fixed-top bar:

<!-- Inside your task pane's main container -->
<div id="top-button-bar">
  <button id="menu-btn">Menu</button>
  <button id="info-btn">Info</button>
  <button id="run-btn">Run</button>
  <button id="delete-btn">Delete</button>
</div>
<div id="main-content">
  <!-- Your core task pane content (forms, previews, etc.) goes here -->
</div>

Next, add CSS to make the bar look polished—fixed at the top, with proper spacing and hover effects. Drop this into your taskpane.css file:

#top-button-bar {
  display: flex;
  gap: 8px;
  padding: 10px 15px;
  background-color: #f3f3f3;
  border-bottom: 1px solid #e0e0e0;
  position: sticky;
  top: 0;
  z-index: 100; /* Ensures the bar stays above other content when scrolling */
}

#top-button-bar button {
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: white;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
}

#top-button-bar button:hover {
  background-color: #e8f0fe;
  border-color: #165dff;
  transition: all 0.2s ease;
}

#main-content {
  padding: 15px;
}

Finally, wire up the buttons to do what you need. Use Office's onReady method to ensure the Office JS library is loaded before attaching event handlers. Add this to your taskpane.js file:

Office.onReady(() => {
  // Menu button: Example shows a simple alert, but you could add a dropdown menu
  document.getElementById('menu-btn').addEventListener('click', () => {
    // Replace this with your menu logic (e.g., show/hide a dropdown)
    alert('Menu options would appear here!');
  });

  // Info button: Display details about your add-in
  document.getElementById('info-btn').addEventListener('click', () => {
    alert('My Custom Add-in\nVersion 1.0\nBuilt with Office JS');
  });

  // Run button: Execute your core add-in logic (e.g., interact with the Office document)
  document.getElementById('run-btn').addEventListener('click', async () => {
    try {
      await Word.run(async (context) => {
        // Example: Insert text into the active Word document
        const body = context.document.body;
        body.insertParagraph('Executed via the Run button!', Word.InsertLocation.end);
        await context.sync();
      });
    } catch (error) {
      console.error('Run command failed:', error);
      alert('Oops, something went wrong. Check the browser console for details.');
    }
  });

  // Delete button: Add confirmation before performing destructive actions
  document.getElementById('delete-btn').addEventListener('click', () => {
    if (confirm('Are you sure you want to delete the selected content?')) {
      // Replace with your delete logic (e.g., clear document content)
      alert('Delete action completed!');
    }
  });
});

• If you're starting from scratch, use the Yeoman Office Generator to create a new Office add-in project—it sets up the basic task pane structure for you.
• Adjust the button styles, text, and functionality to match your add-in's needs (e.g., replace the alert in the Menu button with a custom dropdown component).
• Test the task pane by sideloading your add-in in Office (File > Options > Add-ins > Manage COM Add-ins > Go... > Add) to see the button bar in action.

内容的提问来源于stack exchange，提问作者Ekalavya