我们能在Gitkit初学者工具包中添加菜单项吗？

Question

我们可以在入门工具包Gitkit NavBar中添加菜单项吗？

下拉列表中有两个项：Manage Account和Sign Out。

是否可以在URL链接中添加第三个选项(比如Update Profile )？

#navbar的html通过Gitkit的Javascript代码加载。

我使用GAE Python。

我可以想到的可能解决办法是：

在我的网页完全加载之后，我可以将我自己的<li>项目添加到#navbar提供的下拉菜单列表中。

或

编写一个自定义的“”( #navbar )小部件。

有没有更好、更简单的方法？

我向GITKIT团队提出的增强的请求

如果我们能够提供自定义菜单项以及它们的URL链接，作为加载#navbar的JS代码下面的选项，那就太好了：

<script type=text/javascript>
  window.google.identitytoolkit.signInButton(
    '#navbar', // accepts any CSS selector
    {
      widgetUrl: "http://www.mywebsite.com/oauth2callback",
      signOutUrl: "/", 

      // Example of possible solution ( my suggestion ): 
      custom_menu_item__1__name : "item_1", // My Custom Menu Item 1 
      custom_menu_item__1__link : "http://site/link_url_1", 
      :: 
      custom_menu_item__n__name : "item_1", // My Custom Menu Item n 
      custom_menu_item__n__link : "http://site/link_url_1", 
    }
  );
</script>

​

​

更新

临时Fix =我临时使用jquery添加了所需的菜单选项。下面提供的代码片段可以帮助任何有类似需求的人，直到官方解决方案到来为止：

在页面加载时，

custom_menu_add_job_id = setInterval(function(){ 
        add_custom_menu(); 
    }, 5000); 

function add_custom_menu(){ 
    if ($("#navbar").find(".gitkit-user-card-menu").length){ 
        $(".gitkit-user-card-menu").append($("<li class='gitkit-user-card-menuitem' id='smh_user_profile' tabindex='0'> <img src='/images/person_32x32.png' class='user_profile_menu_icon' > Profile </li>")
            .click(function(){ 
                window.location.href = window.location.protocol + "//" + window.location.host + "/user/"; 
            }) 
        ); 
        clearInterval(custom_menu_add_job_id); 
    } 
}

如果你愿意，你可以在ShowMyHall现场查看。

Answer 1

自定义菜单项现在在Google javascript小部件中得到支持。示例：

window.google.identitytoolkit.signInButton(
  '#navbar', // accepts any CSS selector
  {
    widgetUrl: "...",
    dropDownMenu: [
        {
          'label': 'Check Configuration',
          'url': '/config'
        },
        {
          'label': 'Sign out',
          'handler': function() {google.identitytoolkit.signOut();}
        },
        {
          'label': 'Manage Account',
          'handler': function() {google.identitytoolkit.manageAccount();}
        },
      ]
  };

Answer 2

在此特性出现之前，我还实现了一个类似的临时修复，您在问题结束时对此进行了概述。我使用了一个计时器，如下所示(注意，我的gitkit使用的是div login)：

    $(window).load(function() {
        $("#login").hover(function() {
            add_custom_menu_items();
        })
    });

    function add_custom_menu_items(){
        if ($("#login").find(".gitkit-user-card-menu").length == 1){
            if ($("#my_data_link").length == 0) {
                $(".gitkit-user-card-menu li:eq(0)").after($('<li class="gitkit-user-card-menuitem" id="my_data_link" tabindex="0"><a href="/my_data/">My data</a></li>'));
            }
        }
    }

基本上，当您在div上悬停时，它会添加菜单项，但前提是它还没有添加。

Answer 3

navbar下拉菜单不支持图像，但是如果您真的需要这样做，这里有一种在jquery中使用的方法：

var config = {...}; // your config which includes the custom drop down menu.
// Render button on load. (now supported)
window.onload = function() {
  window.google.identitytoolkit.signInButton(
    '#navbar', // accepts any CSS selector
    config);
  // This will modify the html content of the first option in drop down menu.
  // Make menu dom changes.
  jQuery('#navbar li:first-child').html('<img src="img.png">My Label');
}