ejmSplitPane

1 Apr 202124 minutes to read

The Essential JavaScript Mobile SplitPane divides a region on the web page. It is configured to split up the horizontal view vertically. Center pane displays content from an external URL that is specific to the item selected in the left pane or right pane.

Custom Design for HTML SplitPane control.

$(element).ejmSplitPane()

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="splitview" data-role="ejmsplitpane">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="splitview">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

    <script>
        $("#splitview").ejmSplitPane();
    </script>

Requires

• module:jQuery

• module:ej.core

• module:ej.unobtrusive

• module:ej.mobile.core

• module:ej.data

• module:ej.touch

Members

contentPane

Specifies content pane specific properties.

contentPane.templateId string

Specifies Id for template content of content pane.

Default Value

• null

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="splitview" data-role="ejmsplitpane" data-ej-contentpane-templateid="contenttemplate">
        <div id="target2" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
    </div>

    <script id="contenttemplate" type="text/x-jsrender">
            <div>Main contents goes here</div>
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <div id="splitview">
        <div id="target2" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
    </div>

    <script id="contenttemplate" type="text/x-jsrender">
            <div>Main contents goes here</div>
    </script>

    <script>
        $("#splitview").ejmSplitPane({ contentPane: { templateId: "contenttemplate" } });
    </script>

cssClass string

Sets the root class for SplitPane theme. This cssClass API helps to use custom skinning option for SplitPane control. By defining the root class using this API, we need to include this root class in CSS.

Default Value

• ””

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="splitview" data-role="ejmsplitpane" data-ej-cssclass="customclass">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

    <style>
        .customclass * {
            color: red;
        }
    </style>

HTML

<!-- Obtrusive way of rendering -->
    <div id="splitview">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

    <script>
        $("#splitview").ejmSplitPane({ cssClass: "customclass" });
    </script>

    <style>
        .customclass * {
            color: red;
        }
    </style>

edgeThreshold number

Sets swipe threshold width for both left and right panes.

Default Value

• 50

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="splitview" data-role="ejmsplitpane" data-ej-edgethreshold="100">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="splitview">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

    <script>
        $("#splitview").ejmSplitPane({ edgeThreshold: 100 });
    </script>

enablePersistence boolean

Saves current model value to browser cookies for state maintains. While refreshing the page retains the model value apply from browser cookies.

Default Value

• false

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="splitview" data-role="ejmsplitpane" data-ej-enablepersistence="true">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="splitview">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

    <script>
        $("#splitview").ejmSplitPane({ enablePersistence: true });
    </script>

enableSwipe boolean

Enable or Disable the swiping behavior to the content.

Default Value

• true

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="splitview" data-role="ejmsplitpane" data-ej-enableswipe="false">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="splitview">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

    <script>
        $("#splitview").ejmSplitPane({ enableSwipe: false });
    </script>

height string

Specifies the height of the SplitPane.

Default Value

• “auto”

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="splitview" data-role="ejmsplitpane" data-ej-height="300px">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="splitview">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

    <script>
        $("#splitview").ejmSplitPane({ height: "300px" });
    </script>

isRelative string

Sets relative position to the SplitPane if this property is true. Otherwise absolute position.

NOTE

If you set relative positioning for SplitPane, you should set height for SplitPane.

Default Value

• false

Example

HTML

<!-- Unobtrusive way of rendering -->
    <br /><br /><br />
    <div id="splitview" data-role="ejmsplitpane" data-ej-isrelative="true" data-ej-height="200px">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <br /><br /><br />
    <div id="splitview">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

    <script>
        $("#splitview").ejmSplitPane({ isRelative: true, height: "200px" });
    </script>

leftPane

Specifies left pane specific properties.

leftPane.animationType enum

Specifies the animation type for leftpane on its open or close. See SliptpaneAnimationType

NOTE

To animate leftpane while opening or closing, set the property leftPane.showOnTablet to false.

Default Value

• “overlay”

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="splitview" data-role="ejmsplitpane" data-ej-leftpane-showontablet="false" data-ej-leftpane-animationtype="reveal">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="splitview">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

    <script>
        $("#splitview").ejmSplitPane({ leftPane: { showOnTablet: false, animationType: "reveal" } });
    </script>

leftPane.showOnTablet boolean

Specifies the leftpane visibility for tablet devices. If this property set as false, the leftpane will be hidden and it will be open from left side window on swipe.

Default Value

• true

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="splitview" data-role="ejmsplitpane" data-ej-leftpane-showontablet="false">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="splitview">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

    <script>
        $("#splitview").ejmSplitPane({ leftPane: { showOnTablet: false } });
    </script>

leftPane.templateId string

Specifies Id for template content of leftpane.

Default Value

• null

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="splitview" data-role="ejmsplitpane" data-ej-leftpane-templateid="lefttemplate">
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

    <script id="lefttemplate" type="text/x-jsrender">
            <div>Leftpane contents goes here</div>
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <div id="splitview">
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

    <script id="lefttemplate" type="text/x-jsrender">
        <div>Leftpane contents goes here</div>
    </script>

    <script>
        $("#splitview").ejmSplitPane({ leftPane: { templateId: "lefttemplate" } });
    </script>

leftPane.width string

Specifies the width of leftpane.

Default Value

• “280px”

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="splitview" data-role="ejmsplitpane" data-ej-leftpane-width="350px">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="splitview">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

    <script>
        $("#splitview").ejmSplitPane({ leftPane: { width: "350px" } });
    </script>

renderMode enum

Changes the rendering mode of the SplitPane. See RenderMode

Default Value

• auto

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="splitview" data-role="ejmsplitpane" data-ej-rendermode="android">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="splitview">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

    <script>
        $("#splitview").ejmSplitPane({ renderMode: "android" });
    </script>

rightPane

Specifies right pane specific properties.

rightPane.animationType enum

Specifies the animation type for rightpane on its open or close. See SliptpaneAnimationType

NOTE

To animate rightpane while opening or closing, set the property rightPane.showOnTablet to false.

Default Value

• “overlay”

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="splitview" data-role="ejmsplitpane" data-ej-rightpane-showontablet="false" data-ej-rightpane-animationtype="reveal">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="splitview">

        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

    <script>
        $("#splitview").ejmSplitPane({rightPane: { showOnTablet: false, animationType: "reveal" } });
    </script>

rightPane.showOnTablet boolean

Specifies the rightpane visibility for tablet devices. If this property set as false, the rightpane will be hidden and it will be open from right side window on swipe.

Default Value

• false

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="splitview" data-role="ejmsplitpane" data-ej-rightpane-showontablet="true">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="splitview">

        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

    <script>
        $("#splitview").ejmSplitPane({ rightPane: { showOnTablet: true } });
    </script>

rightPane.templateId string

Specifies Id for template content of rightpane.

Default Value

• null

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="splitview" data-role="ejmsplitpane" data-ej-rightpane-templateid="righttemplate">

        <div id="target2" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

    <script id="righttemplate" type="text/x-jsrender">
            <div>Rightpane contents goes here</div>
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <div id="splitview">

        <div id="target2" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

    <script id="righttemplate" type="text/x-jsrender">
        <div>Rightpane contents goes here</div>
    </script>

    <script>
        $("#splitview").ejmSplitPane({ rightPane: { templateId: "righttemplate" } });
    </script>

rightPane.width string

Specifies the width of rightpane.

Default Value

• “280px”

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="splitview" data-role="ejmsplitpane" data-ej-rightpane-width="350px">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="splitview">

        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

    <script>
        $("#splitview").ejmSplitPane({ rightPane: { width: "350px" } });
    </script>

stopEventPropagation boolean

Stops event propagation for other elements.

Default Value

• true if windows render mode, otherwise false.

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="splitview" data-role="ejmsplitpane" data-ej-stopeventpropagation="true">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="splitview">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

    <script>
        $("#splitview").ejmSplitPane({ stopEventPropagation: true });
    </script>

width string

Specifies the width of the SplitPane.

Default Value

• “auto”

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="splitview" data-role="ejmsplitpane" data-ej-width="700px">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="splitview">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

    <script>
        $("#splitview").ejmSplitPane({ width: "700px" });
    </script>

Methods

closePane()

To close the currently opened pane.

Example

HTML

<div id="splitview" data-role="ejmsplitpane" data-ej-leftpane-animationtype="reveal"  data-ej-leftpane-showontablet="false">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <input data-role="ejmbutton" type="button" data-ej-text="Open LeftPane" data-ej-touchend="open" />
            <input data-role="ejmbutton" type="button" data-ej-text="Close Pane" data-ej-touchend="close" />
            <div>Main contents goes here</div>
        </div>
    </div>

    <script>
        function open() {
            $("#splitview").ejmSplitPane("openLeftPane");
        }
        function close() {
            $("#splitview").ejmSplitPane("closePane");
        }
    </script>

openLeftPane()

To open leftpane on demand.

Example

HTML

<div id="splitview" data-role="ejmsplitpane" data-ej-leftpane-showontablet="false">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <input data-role="ejmbutton" type="button" data-ej-text="Open LeftPane" data-ej-touchend="open" />
            <div>Main contents goes here</div>
        </div>
    </div>

    <script>
        function open() {
            $("#splitview").ejmSplitPane("openLeftPane");
        }
    </script>

openRightPane()

To open rightpane on demand.

Example

HTML

<div id="splitview" data-role="ejmsplitpane">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <input data-role="ejmbutton" type="button" data-ej-text="Open RightPane" data-ej-touchend="open" />
            <div>Main contents goes here</div>
        </div>
    </div>

    <script>
        function open() {
            $("#splitview").ejmSplitPane("openRightPane");
        }
    </script>

Events

beforeClose

Event triggers before the leftpane or rightpane closing.

Name	Type	Description
argument	Object	Event parameters from SplitPane. Name Type Description cancel boolean Returns true if the event should be cancelled; otherwise, false. type string Returns the name of the event. model object Returns the model value of the control. panel string Returns the panel which is closing content object Returns closing panel contents as HTML elements element object Returns closing panel as HTML elements

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="splitview" data-role="ejmsplitpane" data-ej-beforeclose="close">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

    <script>
        function close(args) {
            //Handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <div id="splitview">
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

    <script id="lefttemplate" type="text/x-jsrender">
        <div>Leftpane contents goes here</div>
    </script>

    <script>
        $("#splitview").ejmSplitPane({ beforeClose: "close" });
        function close(args) {
            //Handle the event
        }
    </script>

beforeOpen

Event triggers before the leftpane or rightpane opening.

Name	Type	Description
argument	Object	Event parameters from SplitPane. Name Type Description cancel boolean Returns true if the event should be cancelled; otherwise, false. type string Returns the name of the event. model object Returns the model value of the control. panel string Returns the panel which is closing content object Returns opening panel contents as HTML elements element object Returns opening panel as HTML elements

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="splitview" data-role="ejmsplitpane" data-ej-beforeopen="open">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

    <script>
        function open(args) {
            //Handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <div id="splitview">
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

    <script id="lefttemplate" type="text/x-jsrender">
        <div>Leftpane contents goes here</div>
    </script>

    <script>
        $("#splitview").ejmSplitPane({ beforeopen: "open" });
        function open(args) {
            //Handle the event
        }
    </script>

close

Event triggers while the leftpane or rightpane close.

Name	Type	Description
argument	Object	Event parameters from SplitPane. Name Type Description cancel boolean Returns true if the event should be cancelled; otherwise, false. type string Returns the name of the event. model object Returns the model value of the control. panel string Returns the panel which is closing content object Returns closed panel contents as HTML elements element object Returns closed panel as HTML elements

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="splitview" data-role="ejmsplitpane" data-ej-close="close">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

    <script>
        function close(args) {
            //Handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <div id="splitview">
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

    <script id="lefttemplate" type="text/x-jsrender">
        <div>Leftpane contents goes here</div>
    </script>

    <script>
        $("#splitview").ejmSplitPane({ close: "close" });
        function close(args) {
            //Handle the event
        }
    </script>

open

Event triggers while the leftpane or rightpane open.

Name	Type	Description
argument	Object	Event parameters from SplitPane. Name Type Description cancel boolean Returns true if the event should be cancelled; otherwise, false. type string Returns the name of the event. model object Returns the model value of the control. panel string Returns the panel which is closing content object Returns opened panel contents as HTML elements element object Returns opened panel as HTML elements

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="splitview" data-role="ejmsplitpane" data-ej-open="open">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

    <script>
        function open(args) {
            //Handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <div id="splitview">
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

    <script id="lefttemplate" type="text/x-jsrender">
        <div>Leftpane contents goes here</div>
    </script>

    <script>
        $("#splitview").ejmSplitPane({ open: "open" });
        function open(args) {
            //Handle the event
        }
    </script>

swipe

Event triggers while swipe happens in the page to open leftpane or rightpane.

Name	Type	Description
argument	Object	Event parameters from SplitPane. Name Type Description cancel boolean Returns true if the event should be cancelled; otherwise, false. type string Returns the name of the event. model object Returns the model value of the control. event object Returns the event object which contains information about the event direction string Returns the direction from which swipe event happens

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="splitview" data-role="ejmsplitpane" data-ej-swipe="swipe">
        <div id="target1" data-ej-pane="left">
            <div>Leftpane contents goes here</div>
        </div>
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

    <script>
        function swipe(args) {
            //Handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <div id="splitview">
        <div id="target2" data-ej-pane="right">
            <div>Rightpane contents goes here</div>
        </div>
        <div id="target3" data-ej-pane="content">
            <div>Main contents goes here</div>
        </div>
    </div>

    <script id="lefttemplate" type="text/x-jsrender">
        <div>Leftpane contents goes here</div>
    </script>

    <script>
        $("#splitview").ejmSplitPane({ swipe: "swipe" });
        function swipe(args) {
            //Handle the event
        }
    </script>