ComponentOne Wijmo Open for Juice UI
In This Topic
    Working with Shortcuts
    In This Topic

    You can create menus with shortcut menu items.

    Complete the following steps:

    1. Create an ASP.NET Web application with a ScriptManager control and install Juice UI and the Wijmo Juice libraries to your project via NuGet.
    2. Add a standard Panel to the main content of your page.
    3. Add the folloring markup within the <asp:Panel> tags to create a list that will become the menu.
      <ul id="menu1">
      
              
      
                  <li><a href="#">File</a>
      
                      <ul>
      
                          <li>
      
                              <div>
      
                                  <a href="#" class="wijmo-wijmenu-text">New</a><span class="wijmo-wijmenu-icon-right">Ctrl+N</span>
      
                              </div>
      
                          </li>
      
                          <li>
      
                              <div>
      
                                  <a href="#" class="wijmo-wijmenu-text">Open</a><span class="wijmo-wijmenu-icon-right">Ctrl+O</span>
      
                              </div>
      
                          </li>
      
                          <li>
      
                              <div>
      
                                  <a href="#" class="wijmo-wijmenu-text">Save</a><span class="wijmo-wijmenu-icon-right">Ctrl+S</span>
      
                              </div>
      
                          </li>
      
                      </ul>
      
                  </li>
      
                  <li><a href="#">Edit</a>
      
                      <ul>
      
                          <li>
      
                              <div>
      
                                  <a href="#" class="wijmo-wijmenu-text">Undo</a><span class="wijmo-wijmenu-icon-right">Ctrl+Z</span>
      
                              </div>
      
                          </li>
      
                          <li></li>
      
                          <li>
      
                              <div>
      
                                  <a href="#" class="wijmo-wijmenu-text">Cut</a><span class="wijmo-wijmenu-icon-right">Ctrl+X</span>
      
                              </div>
      
                          </li>
      
                          <li>
      
                              <div>
      
                                  <a href="#" class="wijmo-wijmenu-text">Copy</a><span class="wijmo-wijmenu-icon-right">Ctrl+C</span>
      
                              </div>
      
                          </li>
      
                          <li>
      
                              <div>
      
                                  <a href="#" class="wijmo-wijmenu-text">Paste</a><span class="wijmo-wijmenu-icon-right">Ctrl+V</span>
      
                              </div>
      
                          </li>
      
                      </ul>
      
                  </li>
      
              </ul>
      
    4. In Source view, use the following markup to add a WijMenu control to the page and set the TargetControlID to Panel1.
      <cc1:WijMenu ID="Panel1_WijMenu" runat="server"    
      
              TargetControlID="Panel1">     
      
      </cc1:WijMenu>
      
    5. Press F5 to run your program.  The menu will contain shortcut items as in the following image.