Creating a custom block with JQuery

Permalink 1 user found helpful March 17, 2011 at 7:12 PM

I am trying to figure out how to build a custom block using a jquery library (jquery menu - dropdown menu) and not finding enough step by step instruction anywhere. Wondering if there is a decent tutorial out there for this or if someone here can assist. I know there is an add-on available for this but I want to know/do this for future blocks as well.

I think I understand the framework for a block such as the files required to include and that I will place them in the /packages/ directory under a folder with the name of the block.

I am having difficulty understanding where to place the code that I have from the jquery UI code I am using. For instance, does the code to display the dropdown menu go into the view.php file? And if so, where/how do I incorporate it? Also, not sure of which c5 function to call, do I use something like "$menu = new Area('Menu');"

If someone has created a block from a known jquery library and wouldn't mind sharing info, I would sure appreciate it.

frizzleb replied on Mar 18, 2011 at 4:58 pm Permalink Reply

Concrete5 has a build in jquery library, to load it into the controller add something on these lines. This will load the libraries so they can be used in the view.php file

public function on_page_view() {
  $html = Loader::helper('html');
  $this->addHeaderItem($html->css('jquery.ui.css'));
  $this->addHeaderItem($html->javascript('jquery.ui.js'));
}

Once you have choose the correct libs open the view.
It should be easy to adapt some simple script to create the menu. I would download the code for the autonav block to begin to understand how you handle pages and menus in concrete5.

Feel free to ask if you need further guidance. Note there is already a block that can do this in the marketplace.

Please note that areas are used to define areas in themes, this function is technically not linked to menus for rather positioning of blocks. so the autonav block would be loaded into this area.