“jsTree mobile plugin”


Table of Contents

  1. Overview
  2. HTML Structure
  3. CSS Files and Structure
  4. JavaScript
  5. API Usage
  6. Sources and Credits

Overview - top

Mobile plugin for a popular free open source jQuery tree plugin “jstree.com”. Makes navigating and updating big tree structures on a mobile device super simple and efficient.

For jsTree documentation and downloads please go to https://www.jstree.com


HTML Structure - top

The plugin doesn’t require any extra html structure. Only standard jsTree html. For detailed information please check this page: https://www.jstree.com/docs/html/

The minimal required markup is a <ul> node with some nested <li> nodes with some text inside. Please check a basic html structure example below:

        <div id="html1">
            <ul>
                <li>Root node 1</li>
                <li>Root node 2</li>
            </ul>
        </div>
        

CSS Files and Structure - top

One css file is required for the plugin "themes\mobile\style.css". Since jsTree control supports themes the css is profided as part of the mobile theme. The theme is specified at jsTree initialization as per example below:

         $('#html').jstree({
            'core': {
                "themes": {
                    "name": "mobile"
                },
                "check_callback": true
            }
         });
        

For more information on configuring jsTree themes please visit https://www.jstree.com/docs/config/


JavaScript - top

This plugin requires the Javascript files specified below:

  1. jQuery jquery-2.2.2.min.js
  2. jsTree.js
  3. popModal.js this is an optional free open source jquery plugin that provides popup dialogs functionality. The plugin was added just for demonstrating tree editing. This can be replaced with any similar library or removed if not required
  4. jstree.mobile.js the actual plugin file. Minimized version also provided

jstree.mobile.js plugin is initialized as a standard jsTree plugin. Example:

        $('#html').jstree({
            /*initialization of mobile plugin parameters*/
            "mobile": {
                /*optional mobile plugin parameters*/
                /*
                "showZoomInContextIcon": false,
                "showContextMenuIcon": false,
                "showSidewaysScrollButtons": false,
                "scrollPositioningOffset": 0
                */
            },
            "plugins": [/*include mobile plugin*/"mobile", "contextmenu"]
         });
        

Optional parameters with description and default values

/*
* a boolean indicating if the context menu icond should display
*/
showContextMenuIcon: true,

/*
* a boolean indicating if the context menu icond should display on node selection
*/
showZoomInContextIcon: true,

/*
* a boolean indicating if the sideways scroll buttons should show
*/
showSidewaysScrollButtons: true,

/*
* an integer value indicating the scroll positioning offset after zomm in/out. Can be negative
*/
scrollPositioningOffset: 30
        

API Usage - top

Functions:

  1. zoomIn(nodeSelector) Zooms in to the specified node. Usage examples: $('#html').jstree('zoomIn', '#j1_4');
  2. zoomOut(nodeSelector) Zooms out to the root or previous zommed in node. Usage examples: $('#html').jstree('zoomOut', '#j1_9');
  3. removeZoom() Removes any zoom and goes to the root. Usage examples: $('#html').jstree('removeZoom');
  4. destroyMobile() Destroys any mobile plugin specific html elements. Usage examples: $('#html').jstree('destroyMobile').jstree('destroy');
  5. get_zoom_path() Gets current zoom in path array. Returns an array of objects [{ /*the id of the zoomed in node. Goes from to to bottom*/ nodeId }, { nodeId } ...]. Usage examples: $('#html').jstree('get_zoom_path');

Mobile plugin events:

  1. zoomIn.jstree triggers after zoom in. paseed in data { node, zoomPath} Usage examples:
        .on('zoomIn.jstree', function (e, data) {
                /*bind to zoom in event*/
                refreshZoomPath(data.zoomPath);
            })
    
  2. zoomOut.jstree triggers after zoom out. paseed in data { node, zoomPath} Usage examples:
        .on('zoomOut.jstree', function (e, data) {
                /*bind to zoom out in event*/
                refreshZoomPath(data.zoomPath);
            })
    
  3. removeZoom.jstree triggers after any zoom in is removed. No data is passed. Usage examples:
        .on('removeZoom.jstree', function (e) {
                /*bind to remove zoom event*/
                refreshZoomPath([]);
            })
    

Sources and Credits - top

I've used the following images, icons or other files as listed.