Getting Started

21 Feb 20173 minutes to read

This section explains briefly on how to create a Radial Menu control in your mobile application.

Create basic mobile layout

Create an HTML file and paste the following template for mobile layout.

  • HTML
  • <!doctype html>
    <html lang="en">
    <head>
        <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
        <title>Radialmenu</title>
    <link href="http://cdn.syncfusion.com/23.1.36/js/mobile/ej.mobile.all.min.css" rel="stylesheet"/>
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
    <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery.globalize.min.js"></script>
    <script src="http://cdn.syncfusion.com/23.1.36/js/mobile/ej.mobile.all.min.js"></script>
    </head>
    <body>
        <div>
            <!--- Adds Header Element Here  --->
            <!--- Adds Page Content Here  --->
            <!--- Adds Radialmenu Element Here  --->
        </div>
    </body>
    </html>

    You can create header element with the following code.

  • HTML
  • <div id="header" data-role="ejmnavigationbar" data-ej-title="RadialMenu" data-ej-isrelative="true">
        </div>

    Create the page content as follows.

  • HTML
  • <div style="padding: 66px 25px; text-align: justify">
            <p>
               Model–view–controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it.                             The model consists of application data, business rules, logic, and functions. A view can be any output representation of data, such as a chart or a diagram. Multiple views of the same data are possible, such as a bar chart for management and a tabular view for accountants.
            </p>
        </div>

    Add RadialMenu control

    Create a div element and set its data-role attribute as ejmradialmenu as follows.

  • HTML
  • <div id="defaultradialmenu" data-role="ejmradialmenu">
         <ul>
              <!--- Add Menu Items Here  --->
         </ul>
    </div> 

    You can specify the images for each menu using data-ej-imageurl attribute for the inner list elements as follows.

  • HTML
  • <div id="defaultradialmenu" data-role="ejmradialmenu">
      <ul>
          <li data-ej-windows-text="google" data-ej-imageurl="http://js.syncfusion.com/UG/Mobile/Content/radial/google.png"></li>
          <li data-ej-windows-text="music" data-ej-imageurl="http://js.syncfusion.com/UG/Mobile/Content/radial/music.png"></li>
          <li data-ej-windows-text="direction" data-ej-imageurl="http://js.syncfusion.com/UG/Mobile/Content/radial/direction.png"></li>
          <li data-ej-windows-text="message" data-ej-imageurl="http://js.syncfusion.com/UG/Mobile/Content/radial/message.png"></li>
          <li data-ej-windows-text="browser" data-ej-imageurl="http://js.syncfusion.com/UG/Mobile/Content/radial/browser.png"></li>
       </ul>      
    </div>

    Run the above code to render the following output.