Developing (v7+)

i18n Menu

Permalink April 21, 2011 at 1:57 PM

How do I make a drop down menu like when you click to edit/add a block? See attached for reference.

I've been looking through the code and can't seem to find an example.

1 Attachment

ijessup replied on Apr 21, 2011 at 4:33 pm Permalink Reply 1 Attachment

Figured it out. Code follows:

External JS File:

ccm_showMenu = function(obj, e, items) {
   var addOnly = (obj.addOnly)?1:0;
   ccm_hideMenus();
   e.stopPropagation();
   ccm_menuActivated = true;
   // now, check to see if this menu has been made
   var aobj = document.getElementById("ccm-item-menu" + obj.attr("itemID"));
   if (!aobj) {
      // create the 1st instance of the menu
      el = document.createElement("DIV");
      el.id = "ccm-item-menu" + obj.attr("itemID");
      el.className = "ccm-menu";
      el.style.display = "none";
      document.body.appendChild(el);
      aobj = $("#ccm-item-menu" + obj.attr("itemID"));

Viewing 15 lines of 52 lines. View entire code block.

ccm_showMenu = function(obj, e, items) {
   var addOnly = (obj.addOnly)?1:0;
 
   ccm_hideMenus();
   e.stopPropagation();
   ccm_menuActivated = true;
 
   // now, check to see if this menu has been made
   var aobj = document.getElementById("ccm-item-menu" + obj.attr("itemID"));
 
   if (!aobj) {
      // create the 1st instance of the menu
      el = document.createElement("DIV");
      el.id = "ccm-item-menu" + obj.attr("itemID");
      el.className = "ccm-menu";
      el.style.display = "none";
      document.body.appendChild(el);
 
      aobj = $("#ccm-item-menu" + obj.attr("itemID"));
      aobj.css("position", "absolute");
 
      //top wrapper
      var html = '<div class="ccm-menu-tl"><div class="ccm-menu-tr"><div class="ccm-menu-t"></div></div></div>';
      html += '<div class="ccm-menu-l"><div class="ccm-menu-r">';
      html += '<ul>';
 
      //begin menu items      
      $.each(items, function(index, Element) {
         if(Element['title']) {
            html += ccm_addMenuItem(
               Element['title'],
               Element['iconURL'],
               Element['ID'],
               Element['URL'],
               Element['width'],
               Element['height']
            );
         }
         if(Element['break']) {
            html += ccm_addLineBreak();
         }
      });
 
      //bottom wrapper
      html += '</ul>';
      html += '</div></div>';
      html += '<div class="ccm-menu-bl"><div class="ccm-menu-br"><div class="ccm-menu-b"></div></div></div>';
      aobj.append(html);
 
   } else {
      aobj = $("#ccm-item-menu" + obj.attr("itemID"));
   }
 
   ccm_fadeInMenu(aobj, e);
}
 
ccm_addMenuItem = function(title, iconURL, ID, URL, width, height) {
   return    '<li><a class="ccm-icon" dialog-title="' + title + '" dialog-modal="false" dialog-width="' + width + '" dialog-height="' + height + '" id="' + ID + '" href="' + URL + '"><span style="background-image: url(' + iconURL +'">' + title + '</span></a></li>';
}
 
ccm_addLineBreak = function() {
   return '<li class="header"></li>';
}

Add onClick event:

<script type="text/javascript">
var menuItems = [
   {
      'title' : 'Add Something',
      'iconURL' : CCM_IMAGE_PATH + '/icons/add.png',
      'ID' : 'menuAddNewBlock' + $(this).attr("menuID"), //optional 
      'URL' : '', 
      'width' :  550, //optional 
      'height' : 380 //optional
   },
   {'break' : 1 },
   {
      'title' : 'Another Add Something',
      'iconURL' : CCM_IMAGE_PATH + '/icons/add.png',
      'ID' : 'anotherUniqueID' + $(this).attr("menuID"), //optional

Viewing 15 lines of 22 lines. View entire code block.

<script type="text/javascript">
var menuItems = [
   {
      'title' : 'Add Something',
      'iconURL' : CCM_IMAGE_PATH + '/icons/add.png',
      'ID' : 'menuAddNewBlock' + $(this).attr("menuID"), //optional 
      'URL' : '', 
      'width' :  550, //optional 
      'height' : 380 //optional
   },
   {'break' : 1 },
   {
      'title' : 'Another Add Something',
      'iconURL' : CCM_IMAGE_PATH + '/icons/add.png',
      'ID' : 'anotherUniqueID' + $(this).attr("menuID"), //optional
      'URL' : '', 
      'width' :  550, //optional 
      'height' : 380 //optional
   }
]
</script>
<div menuID="someUniqueID" onClick="ccm_showMenu($(this), e, menuItems);"></div>

Attached shows the results of using the menuItem variable.

ijessup replied on Apr 21, 2011 at 4:48 pm Permalink Reply

Sorry, the above assumes you have the dialog window js active as well. Other wise the menu item is just a regular link.

var menuItems = [
   {
      'title' : 'Add Something',
      'iconURL' : CCM_IMAGE_PATH + '/icons/add.png',
      'ID' : 'menuItem_' + $(this).attr("menuID"), 
      'URL' : ''
   },
   {'break' : 1 },
   {
      'title' : 'Another Add Something',
      'iconURL' : CCM_IMAGE_PATH + '/icons/add.png',
      'ID' : 'menuItem_' + $(this).attr("menuID"), 
      'URL' : ''
   }
]

Balance replied on May 31, 2011 at 7:20 am Permalink Reply

Hi,

Thanks for the code,
Minor correction needed to display the icons:

<span style="background-image: url(' + iconURL +')">'

The closing ")" was missing from your code.

TheRealSean replied on Oct 1, 2011 at 6:57 pm Permalink Reply

I think I am missing something here I am attempting to use this in the dashboard.

I have loaded the custom.js

But when I select the div, I get a "Uncaught ReferenceError: e is not defined", am I not including something here? I thought that the dialog js had been loaded?

Forums

Developing (v7+)

i18n Menu

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?