|- mymodule.info
|- mymodule.module
|- mymodule.js
|- mymodule.css
|- images
|- file.gif
|- minus.gif
|- plus.gif
mymodule.info:
name = My Module
description = My Description
core = 7.x
mymodule.module:
<?php
function mymodule_menu(){
$items = array();
$items['mymodule_page'] = array(
'title' => 'demo',
'type' => MENU_CALLBACK,
'page callback' => 'mymodule_page',
'access arguments' => array('access content')
);
return $items;
}
function mymodule_page() {
drupal_add_library('system', 'drupal.collapse');
drupal_add_js(drupal_get_path('module', 'mymodule') . '/mymodule.js', 'file');
drupal_add_css(drupal_get_path('module', 'mymodule') . '/mymodule.css','file');
$title = 'My Title';
$type = 'ul';
$attributes = array(
'id' => 'my-custom-listing',
'class' => 'custom-class another-custom-class', // a string or indexed (string) array with the classes for the list tag
);
$items[] = array(
'data' => '1',
'class' => array('dummy'=>'category'),
'children' => array(
array(
'data'=> '1.1',
'class' =>array('dummy'=> 'deepest_item')),
array(
'data'=> '1.2',
'class' =>array('dummy'=> 'deepest_item')),
array(
'data'=> '1.3',
'class' => array('dummy'=> 'category'),
'children'=> array(
array('data'=>'1.3.1','class' => array('dummy'=>'deepest_item')),
array('data'=>'1.3.2','class' => array('dummy'=>'deepest_item'))
)
)
)
);
$output = array(
'first_para' => array(
'#type' => 'markup',
'#markup' => '<p>A paragraph about some stuff...</p>',
),
'second_para' => array(
'#items' => $items,
'#title' => $title,
'#type' => $type,
'#attributes' => $attributes,
'#theme' => 'item_list',
),
);
return $output;
//return theme_item_list(array('items' => $items, 'title' => $title, 'type' => $type, 'attributes' => $attributes)); }
mymodule.js:
(function ($) {
$(document).ready(function() {
$('li.category').addClass('expandable_icon');
$('li.category').children().addClass('deepest_item');
$('li.category').children().hide();
$('li.category').each(
function(column) {
$(this).click(function(event){
if (this == event.target) {
if($(this).is('.expandable_icon')) {
$(this).children().show();
$(this).removeClass('expandable_icon');
$(this).addClass('collapsible_icon');
}else{
$(this).children().hide();
$(this).removeClass('collapsible_icon');
$(this).addClass('expandable_icon');
}
}
});
});
}
);
})(jQuery);
mymodule.css:
.expandable_icon{
list-style-image:url("./images/plus.gif");
cursor:pointer;
}
.collapsible_icon{
list-style-image:url("./images/minus.gif");
cursor:pointer;
}
.deepest_item{
list-style-image:url("./images/file.gif");
cursor:pointer;
}
drush en -y mymodule
visit http://YOURSITE/mymodule_page
thanks
http://www.sendesignz.com/index.php/jquery/77-how-to-create-expand-and-collapse-list-item-using-jquery
http://api.drupal.org/api/drupal/includes--theme.inc/function/theme_item_list/7
Nice drupal 7 code. Thanks for sharing.
ReplyDeleteDrupal Development Company
So far one of the greatest post ever
ReplyDeleteGot it in a while.
Thank you
Brilliant code. My users will love me because of you. Collect your karma bonus immediately!
ReplyDelete