jQuery Plugins Plugins 

MaterialStart jQuery – Full Screen Panel For Material Design

SONHLAB , , , ,

MaterialStart is a jQuery plugin based on Material Design concept from Google that allows you to create fullscreen popups, panels, lightboxes in your page and also website themes with a left navigation menu bar, make unlimited panels as you want and support for responsive design. You can combine Inline and AJAX content, show them automatically OR via an URL param OR clicking on a button. By theses power functions, this plugin will bring you an easy way to control and display your content.

 

Buy Now

 

Demos:

MaterialStart jQuery Plugin Standard Demo

 

MaterialStart Features:

  • Unlimited Content, Unlimited NavBar.
  • Responsive Design.
  • Supports to Show Content Automatically.
  • Open by Click and URL Param.
  • Inline Content for SEO Purpose.
  • Support Ajax Content.
  • Support to change URL and Back Event.

 

 

Change Logs:

Feb 2015: First Version.

 

Credits:

This plugin is developed by SONHLAB.com and used below third parties:

 

Table of Contents:

  1. Setup MaterialStart.
  2. MaterialStart HTML Structure.
  3. Call MaterialStart Plugin.
  4. Parameters.

 

Section 1: Installing MaterialStart Plugin.

First of all, to ensure everything works correctly, please use <!DOCTYPE html> at top of the page.

Include the following code into HEAD section of the page.

Include CSS files:

<!-- SONHLAB Base -->
<link rel="stylesheet" href="css/sonhlab-base.css" type="text/css" />

<!-- MaterialStart CSS Pack -->
<link rel="stylesheet" href="css/materialstart-js.css" type="text/css" />

<!-- MaterialStart CSS Pack - Responsive Layout-->
<link rel="stylesheet" href="css/materialstart-mobile.css" type="text/css" />

 

Add Viewport Meta:

<meta name="viewport" content="width=device-width, user-scalable=no" />

 

Include Javascript files:

<!-- Start jQuery Library -->
<!--[if !IE]> -->
<script type="text/javascript" src="js/jquery/jquery.min.2.1.3.js"></script>
<!-- <![endif]-->
<!--[if gte IE 9]>
<script type="text/javascript" src="js/jquery/jquery.min.2.1.3.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/jquery/jquery.min.1.11.2.js"></script>
<![endif]-->
<!-- End jQuery Library -->

<!-- NiceScroll jQuery Plugin -->
<script type="text/javascript" src="js/nicescroll/jquery.nicescroll.js"></script>

<!-- MaterialStart jQuery Plugin-->
<script type="text/javascript" src="js/materialstart.dev.js"></script>

Done. MaterialStart Installation is completed and ready to use.

 

Section 2: MaterialStart HTML Structure.

This section should be read along with the demo files also contained in the download package.

The HTML Structure of MaterialStart includes three parts:

  1. Header Bar (Place to add Control Buttons like: Enable/Disable Left NavBar, Close the panel). Also including Company Name.
  2. Left NavBar (ListView). Including all Menu Items to open contents or external links. You can also add some special materials: Logo, Small Photos, Copyrights info…
  3. ContentView: Place to show content (Text, images, videos…). Content is displayed in this area can be stored in MaterialStart Station block (Inline load method) or external file in “content/mdstart” folder (AJAX load method).

This is a sample of MaterialStart HTML Structure:

<!-- Start MaterialStart Panel Container -->
<div class="mdstart-panel-container">

  <!-- Start Header Bar -->
  <div class="mdstart-headerbar">
  
    <!-- Start List Button -->
	<div class="mdstart-ctrlicon"></div>
	<!-- End List Button -->
	
	<!-- Start Close Button -->
	<div class="mdstart-closebt"></div>
	<!-- End Close Button -->
	
	<div class="clearspace"></div>
	
  </div>
  <!-- End Header Bar -->
  
  
  <!-- Start Panel ListView -->
  <div class="mdstart-listview">
  
    <!-- Start ListView Container -->
	<div  class="mdstart-listcontainer">
	
	  <!-- Start A ListView -->
	  <div data-listid="" class="mdstart-list">
	  <ul>
	  
	    <!-- Start An Item to show content -->
		<li>
		  <div data-contentid="ContentID" class="mdstart-listitem">
		    <span class="mdstart-itemicon"><img src="image-url" alt="" /></span>
		    <span class="mdstart-itemtitle">Sample Content</span>
		  </div>
		<li>
		<!-- End An Item -->
		
		<!-- Start An Item to show new ListView -->
		<li>
		  <div data-listid="ListView-ID" class="mdstart-listitem">
		    <span class="mdstart-itemicon"><img src="image-url" alt="" /></span>
		    <span class="mdstart-itemtitle">New ListView</span>
			<span class="mdstart-itemtrail"><img src="image-url" alt="" /></span>
		  </div>
		<li>
		<!-- End An Item -->
		
		<!-- Start An Item to show content and set as Default Item -->
		<li>
		  <div data-contentid="ContentID" class="mdstart-listitem mdstart-dfitem">
		    <span class="mdstart-itemicon"><img src="image-url" alt="" /></span>
		    <span class="mdstart-itemtitle">Default Content</span>
		  </div>
		<li>
		<!-- End An Item -->
		
		<!-- Start An Item to show content and change URL -->
		<li>
		  <a href="url-be-changed" data-contentid="ContentID" class="mdstart-listitem">
		    <span class="mdstart-itemicon"><img src="image-url" alt="" /></span>
		    <span class="mdstart-itemtitle">Sample Content</span>
		  </a>
		<li>
		<!-- End An Item -->
		
		<!-- Start An Item to go to another page -->
		<li>
		  <a href="link-to-new-page">
		    <span class="mdstart-itemicon"><img src="image-url" alt="" /></span>
		    <span class="mdstart-itemtitle">External Link</span>
		  </a>
		<li>
		<!-- End An Item -->
		
	  </ul>
	  </div>
	  <!-- End A ListView -->
	
	</div>
	<!-- End ListView Container -->
  
  </div>
  <!-- End Panel ListView -->
  
  
  <!-- Start Panel ContentView -->
  <div class="mdstart-contentview"></div>
  <!-- End Panel ContentView -->

  
</div>
<!-- End MaterialStart Panel Container -->

 

Now, creating content that will be shown in the ContentView. A simple content structure:

<!-- Start ContentView -->
<div data-contentid="" class="mdstart-contentholder">

  <!-- Start Mobile Bar - Display on small screen only -->
  <div class="mdstart-mobile-headbar">
    <h3 class="mdstart-mobile-title">Title</h3>
  </div>
  <!-- End Mobiel Bar -->
  
  <!-- Start Content -->
  <div>
	Add some content here
  </div>
  <!-- End Content -->

</div>
<!-- End ContentView -->

You can place Content block in MaterialStart Station or in External Files in “content/mdstart” folder.

 

How does the plugin work?

When an item in ListView is clicked, the plugin will search “data-listid” and “data-contentid” values to get relevant NavBar and Content to show them in ListView and ContentView areas.

If you want to open a content via URL param, you can provide a “ContentID” value for “mdscontent” param (you can change the param name). When the plugin see “mdscontent” param on URL, it will show the relevant content automatically at the first load.

 

Section 3: Call MaterialStart Plugin.

Simple way to call the MaterialStart plugin:

<script type="text/javascript">
$(window).load(function(){
  $('body').materialstart();
});
</script>

To call the MaterialStart plugin with parameters:

<script type="text/javascript">
$(window).load(function(){
  $('body').materialstart({
    AutoShow:true,
    AutoID:'content-ID',
    AutoUrlParam:'mdscontent',
    ext: 'php'
  });
});
</script>

 

Section 4: Parameters

 

Javascript Parameters:

Parameters Properties Description
ext string. This param is used to define AJAX file extension.
Value: php, html, …
AutoShow string. This param is used to enable/disable AutoShow feature. Value: true|false.
AutoID boolean. This param is used to set Content ID will be shown automatically when the main page is loaded. Works with AutoShow:true only.
AutoUrlParam string. This param is used to set Parameter name. When this param has a value, the plugin will shown a content has ID equal the ‘param-value’ automatically at the first load. Works with AutoShow:true only.

 

HTML Parameters:

Parameters Positions Description
data-listid mdstart-button, mdstart-list,
mdstart-listitem		 This param is used to determine which ListView will be displayed.
data-state mdstart-list This param is used to set ListView state. If you want to auto hide ListView, just provide “hidden” value for it.
data-ext mdstart-listitem This param is used to set AJAX file extension. It will override “ext” Javascript param. Value: php/html/…
data-contentid mdstart-listitem This param is used to determine which content will be shown in ContentView when the list item is clicked.

 

 

[endedwords product=”MaterialStart”]http://talk.sonhlab.com/room/materialstart-jquery-plugin[/endedwords]