Skip to content

Separators.md

Latest commit

 

History

History
155 lines (111 loc) · 4.02 KB

Separators.md

File metadata and controls

155 lines (111 loc) · 4.02 KB
layout post
title Getting Started with JavaScript Separators Control | Syncfusion
description Learn about getting started with the Syncfusion JavaScript separators control with its basic features.
platform js
control Menu
documentation ug
api /api/js/ejmenu

Separators

Separators can be added to menu to display a horizontal bars between menu items. Separators are similar to borders and cannot be selected.enableSeparator is the property that is used to display the separators in the Menu control. It accepts Boolean type value. Its default value is true.

Add the following <script> in the above code sample to display the Menu control without separator by setting enableSeparator as false.

{% highlight html %}

  • Home
    • Foundation
    • Launch
    • About
      • Company
      • Location
  • Services
    • Consulting
    • Outsourcing
  • About
  • Contact us
    • Contact number
    • E-mail
  • Careers
    • Position
      • Developer
      • Manager
    • Apply online

{% endhighlight %}

{% highlight javascript %}

jQuery(function ($) {
    $("#menu").ejMenu({
        width: 500,
        enableSeparator: false
    });
});

{% endhighlight %}

The following screenshot displays the output for the above code.

Separators for Context Menu

We can add the separators for particular ContextMenu items by including e-separator class in the required LI elements. Add the following code to display ContextMenu with separator lines.

{% highlight html %}

HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>),within the web page content. HTML tags most commonly come in pairs like and ,although some tags, known as empty elements, are unpaired, for example <img>. The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.
  • Cut
  • Copy
  • Paste
  • Comments
  • Links
  • Clear Formatting

{% endhighlight %}

{% highlight javascript %}

<script type="text/javascript"> jQuery(function ($) { $("#contextMenu").ejMenu( { menuType: ej.MenuType.ContextMenu, openOnClick: false, contextMenuTarget: "#target", }); }); </script>

{% endhighlight %}

{% highlight css %}

<style type="text/css">'

    .textarea {
        border: 1px solid;
        padding: 10px;
        position: relative;
        text-align: justify;
        width: 463px;
        color: gray;
    }
	
</style>

{% endhighlight %}

The following screenshot displays the output for the above code.