~~SLIDESHOW~~

====== Drupal: jquery_jstree Example Module ======
This example module shows the usage of [[http://drupal.org/project/jquery_jstree|jquery_jstree.]].

If you are not in pressentation mode, press the slideshow icon to start.

===== Prerequisites =====
  * module dependencies:
    * jq, jquery_update, jquery_jstree
  * As mentioned in the [[http://dominiquedecooman.com/blog/drupal-install-jquery142|documentation]] by the [[http://drupal.org/user/199987|maintainer]], apply patches


<code bash>
cd /path/to/jquery_update
wget -O - http://drupal.org/files/issues/jquery_update_775924_0.patch | patch -p0
cd /path/to/drupal_root
wget -O - http://drupal.org/files/issues/479368_drupal_to_js_all_escaped_13.patch | patch -p0
</code>
===== Installation =====
  * Download [[http://www.jstree.com/|jsTree]]
  * extract to the folder ''jquery'' inside the ''jquery_jstree'' module folder

<code bash|h replace with your paths>
wget -P /tmp http://jstree.googlecode.com/files/jsTree.v.1.0rc2.zip                                                                                     
mkdir /path/to/jquery_jstree/jquery
unzip /tmp/jsTree.v.1.0rc2-1.zip -d /path/to/jquery_jstree/jquery
</code>
===== Building the module jstree_demo =====
Create a folder ''jstree_demo''
<code bash>
cd /path/to/drupal_root/sites/all/modules
mkdir jstree_demo
cd jstree_demo
</code>
Create the ''.info'' file
<code php 1|h jstree_demo.info>
name = jsTree Demo
description = jsTree Demonstration plugin
dependencies[] = jquery_jstree
core = 6.x
</code>
===== Basic Function: Permissions =====
<code php 1|h jstree_demo.module>
function jstree_demo_perm() {
    return array('access jstree_demo items');
} // function jstree_demo_perm()
</code>

===== A Basic Menu (will be extended later)  =====

<code php 1|h jstree_demo.module>

function jstree_demo_menu() {
    $items = array();

    // link to the jstree_demo, starts with jstree_demo_message_simple:
    $items['jstree'] = array(
        'title' => 'jsTree',
        'description' => 'simple jsTree Demos with static js file or inline',
        'page callback' => 'jstree_demo_message_simple',
        'access arguments' => array('administer jstree_demo_module'),
        'type' => MENU_NORMAL_ITEM,
    );

    return $items;
}
</code>

===== A simple example with a external Javascript file =====

<code php 1|h jstree_demo.module>
function jstree_demo_message_simple () {
  $page_content = '';
  // jstree needs a 'canvas', identified by id within the javascript part
  $page_content = '<div id="demo" class="demo"></div>';
  drupal_add_js(drupal_get_path('module', 'jstree_demo') . '/jstree_demo.js');
  jq_add('jstree');
  return $page_content;
} // function jstree_demo_module_message ()
</code>

===== the Javasript part in the file =====
  * line 3: //#demo// has to match the  ''<div ...>'' within the function above [[#a_simple_example_with_a_external_javascript_file|see line 4 of the function]]
  * line 20: doublecheck the path
<code javascript 1|h jstree_demo.js>
  Drupal.behaviors.ews_gestconf_services = function (context) {
    $(function () {
      $("#demo").jstree({ 
        "json_data" : {
          "data" : [
            { 
              "data" : "A node", 
              "children" : [ "Child 1", "Child 2" ]
            },
            { 
              "attr" : { "id" : "li.node.id" }, 
              "data" : { 
                "title" : "Long format demo", 
                "attr" : { "href" : "#"+"foo" } 
              } 
            }
          ]
        },
        "themes" : {"theme" : "classic",
              "url" : "sites/all/modules/contrib/jquery_jstree/jquery/themes/classic/style.css"
        },
        "plugins" : [ "themes", "json_data" ]
      });
    });
  }
</code>

===== About Me=====
{{page>vcards:stefan_pampel&nofooter}}

{{tag>drupal}}<flattr>
title=Drupal: jquery_jstree Example Module
uid=30553
description=How to use jquery_jstree
category=software
align=left
language=en_GB
</flattr>