Webarch v2.8.0

Change log


1 General Information

This theme is built on top of bootstrap a very high customizable responsive UI framework, We have thought about most of things when it comes to admin panel UI templates. As show in the above diagram the template consist of


  1. Main header - Consist of logo, quick navigation options and toggle options like the chat and notifications
  2. Side bar - Consist of user image and details, Main menu, Task list and footer widget
  3. Content Body
  4. Chat Slider - Consist of opened and group chat contacts for instant messaging



1.1 HTML Structure

HTML Head

Note - Please add new plugins css or any css file to the very top of the the file which helps to keep a good CSS hierarchy.

Source code 




Webarch - Responsive Admin Dashboard

Body Wrappers
Source Code: 

	
	

	...
	

	
	

	...
	

	
	

	...

Main Menu
Source Code:
Important : Please refer the barebone/index.html file

1.2 Folder structure and files

List of folders and main files


Main CSS files - located in webarch/css/

1.3 JavaScript

All Core component are intialized in webarch/js/webarch.js file




2.1 Typography

An important phase of any good design is typography, We have carefully selected the necessary font sizes and its weights that is applied in different scenarios to get the best viewing experiences. Fonts have a unique pixel perfect size where you don't see grudgy edges.

Fonts Faces

  • "Helvetica Neue"/Helvetica/Arial - Default Body fonts and used almost everywhere
  • Opensans - Used in headings, Notifications and many other places

Fonts Sizes

  • Body - 13px
  • Heading 1 - 38.5px
  • Heading 2- 31.5px
  • Heading 3 - 24.5px
  • Heading 4 - 22px

Font Weights & Styles

  1. Font Weights
  2. Font Variations and Styles

    OPEN ME, LIGHT , BOLD , EVERYTHING

    typographers do not design typefaces, and some type designers do not consider themselves typographers.
    In modern times, typography has been put into motion—in film, television and online broadcasts—to add emotion to mass communicatio

    Numbers looks great! - 1234567890

    Let your Creativity Flow 123$

    Numerics 233.00


    Source: 
    				
    
					OPEN ME, 
					LIGHT , 
					BOLD ,
					EVERYTHING
				
    
				
				
    
					typographers do not design typefaces, and some type designers do not consider themselves typographers. 
					In modern times, typography has been put into motion—in film, television and online broadcasts—	
					to add emotion to mass communication
				
    
				
				
    
					Numbers looks great! - 1234567890
				
    
				
				
    
					Let your Creativity Flow 
					123$
				
    
				
    
					Numerics 
					233.00

  3. Font Colors

    Now you don't have to create different classes for different font colors, We have used 5 different colors in our pallette


    Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

    Etiam porta sem malesuada magna mollis euismod.

    Donec ullamcorper nulla non metus auctor fringilla.

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam.

    Duis mollis, est non commodo luctus, nisi erat porttitor ligula.


    Source: 
    		
    Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
    
		
		
    Etiam porta sem malesuada magna mollis euismod.
    
		
		
    Donec ullamcorper nulla non metus auctor fringilla.
    
		
		
    Aenean eu leo quam. Pellentesque ornare sem lacinia quam.
    
		
		
    Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Bootstrap Address Block

Present contact information for the nearest ancestor or the entire body of work.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Source: 
		

			Twitter, Inc.

			795 Folsom Ave, Suite 600

			San Francisco, CA 94107

			P: (123) 456-7890

Bootstrap Wells

Tradition Boostrap well made awesome, The well comes in 3 different sizes use following .well-large & .well-small will get you two different sizes. The default size has no class.

Important : Remeber to add the .well class with the different size classes

OPEN ME, LIGHT , BOLD , EVERYTHING

OPEN ME, LIGHT , BOLD , EVERYTHING

is the art and technique of arranging type in order to make language visible. The arrangement of type involves the selection of typefaces, point size, line length, leading (line spacing), adjusting the spaces between groups of letters (tracking)

Source: 
 

	
OPEN ME, LIGHT , BOLD , EVERYTHING

 

 

	
OPEN ME, LIGHT , BOLD , EVERYTHING

 

 

	is the art and technique of arranging type in order to make language visible. The arrangement of type involves the selection of typefaces, point size, 
	line length, leading (line spacing), adjusting the spaces between groups of letters (tracking)

Blockquote

Wrap blockquote around any HTML as the quote. For straight quotes we recommend a p


It is during our darkest moments that we must focus to see the light.

Aristotle Onassis

The best and most beautiful things in the world cannot be seen or even touched - they must be felt with the heart.

Helen Keller 
		

		 
It is during our darkest moments that we must focus to see the light.

		 Aristotle Onassis 
		

		

		

			
The best and most beautiful things in the world cannot be seen or even touched - they must be felt with the heart.

			Helen Keller


2.2 Messages & Notifications

These both help to get use attention when its required. Elegant & simple methods like badges, alert boxes, message boxse, toot-tips, modals are used.


Simple Alert

Alerts help to gain user attention and give feedback for processed task. These alerts are built with different background and borders to show wrap it with the following class .alert


Warning: Your monthly traffic is reaching limit.
Success: The page has been added.
Info: You have 198 unread messages.
Danger: The daily cronjob has failed.

Need more description space? Change classes to alert-error alert-success alert-info alert-warning at ease with different customized color set.


Source: 
									

										
										Warning: Your monthly traffic is reaching limit.
									

									
									

										
										Success: The page has been added.									
									

									
									

										
										Info: You have 198 unread messages.
									

									
									

										
										Danger: The daily cronjob has failed.

Descriptive Alerts

Need more description space? Remeber to wrap it with .alert and .alert-block.If you want different colors change classes to alert-error alert-success alert-info alert-warning at ease with different customized color set.


Error!

Error-handling routine in x208888 and specifies the location of the routine within a procedure


Source: 
                             	

									
									
 Error!

									

										Error-handling routine in x208888 and specifies the location of the routine within a procedure

Simple Labels

A label, with optional background colors. Use the labelclass to create a label


DEFAULT VIEW HOLD ALERT SUCCESS SOLD

Source: 
								DEFAULT
								VIEW
								HOLD
								ALERT
								SUCCESS
								SOLD


Badge Variations

A Badge, with optional background colors. Use the badgeclass to create a Badge

2   8   12   300   25   5  

Source: 
								2  
								8  
								12  
								300  
								25  
								5  

Progress bar

We have tweaked the native Bootstrap to much more customizable options from colors, animation and size

Use the attribute data-percentage to change the fill of the progress bar


  1. Progress Bar Colors


    Source :

  2. Progress bar Sizes

    Different sizes can be achieved by using .progress-small and .progress-large


    I'm small!

    Source :

    I'm big!

  3. Progess bar Animated

    To have a cool stripped animated progress bar simply apply .progress-striped and .active



    Source:

Tooltips




HTML

Tool tip
or

Trigger the tooltip via JavaScript

$('#example').tooltip(options);

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".

Name type default description
animation boolean true apply a css fade transition to the tooltip
html boolean false Insert html into the tooltip. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.
placement string | function 'top' how to position the tooltip - top | bottom | left | right
selector string false If a selector is provided, tooltip objects will be delegated to the specified targets.
title string | function '' default title value if `title` tag isn't present
trigger string 'hover focus' how tooltip is triggered - click | hover | focus | manual. Note you case pass trigger mutliple, space seperated, trigger types.
delay number | object 0

delay showing and hiding the tooltip (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { show: 500, hide: 100 }
container string | false false

Appends the tooltip to a specific element container: 'body'



2.3 Icons

Icons are powered by font awesome icons, our very own pixel perfect icon set and also animated weather icons. These vector icons are scalable to piratically any size you want on any high resolution device


Font Awesome Icons

Font awesome has set of 361 icons, Please refer the following Font awesome 3.2.1 icon setTo display an icon wrap an tag as follows. Font awesome 3 icons set class are followed with a prefix oficon-


              

Source:

  1. Scalable

    As mentioned before it is scalable to any size you want, there are a set of predefine classes that helps you get what you want

    icon-camera-retro

    icon-camera-retro

    icon-camera-retro

    icon-camera-retro


    Source:

  2. Animated

    Spinner icon when loading content...

    Info: CSS3 animations aren't supported in IE7 - IE9.


2.4 Buttons

We have customized the Bootstrap native button set from top to bottom

Basic buttons are traditional buttons with borders and background. Use any of the available button classes to quickly create a styled button. Compatible for bootstrap version 2 and 3.



Example Source:

Size Options

Fancy larger or smaller buttons? Add .btn-large .btn-small or .btn-mini for additional sizes.



Example Source:

Button Blocks

Create block level buttons,those that span the full width of a parent by adding .btn-block



Example Source:

Button Disable

Customizable disabled buttons & links that works with both disable attribute and class. These are compatible for all color variations


Primary link Link


Example Source:

Basic Dropdowns

We've simplified our dropdown buttons by getting rid of the dedicated dropdown associated with them, this looks more clean and also available in all different colors


Default
Primary
Success
Info
Warning
Danger
White
Default

Example Source: 
 
				 
  Default

Single Button Group

Button groups are great when you need to display a group of actions in a bar. These build off the button styles and work perfectly with the grid. They come in different toggle options like switch or radio



Example Source:


2.5 Tabs and Accordians

There are no special tabs and accordions plug ins used, We have customized the native Bootstrap tabs and accordions to suit our color palette


2.5.1 Accordions

To create a according first you must have a main wrapper div


	......

Each section of the accordion will be as follows

		  

		  
			

			  

				
			  

			

			

			
			  

				 Content

Remember the attribute data-parent should have the id of the main wrapper class and the header link should be having the same id name of the body of the accordian

How does the plus and minus icons work?

Its all handle by css, everytime when the accordion is collapsed a class .collapse is applied to that section link by making use of this, the icon-plus is overwritten with a different content it can be see in the main style sheet.


Example HTML Source code : 

		  

			

			  

				
			  

			

			

			  

				 Click headers to expand/collapse content that is broken into logical sections, much like tabs. Optionally, toggle sections open/closed on mouseover. 
			  

			

		  

		  

			

			  

				
				  Typography Variables 
				
			  

			

			

			  
				
                  
go explore the world

                  
small things in life matters the most

                  
Big Heading Body, Variations 

                  
Open Me, Light , Bold , Everything

                  
 is the art and technique of arranging type in order to make language visible. The arrangement of type involves the selection of typefaces, point size, line length, leading (line spacing), adjusting the spaces between groups of letters (tracking) 

                  
and adjusting the Case space between pairs of letters (kerning). Type design is a closely related craft, which some consider distinct and others a part of typography

                
			  

			

		  

		  

			

			  

				
			  

			

			

			  

				 Click headers to expand/collapse content that is broken into logical sections, much like tabs. Optionally, toggle sections open/closed on mouseover.

Example Javascript Source code : 
	$('#accordion2').collapse({
		toggle: false
	})

2.5.2 Tabs

To create use the following sample code

HTML Source : 
	
	 
	

		
...

		
...

		
...

		
...
JavaScript Source : 
    $('#myTab a').click(function (e) {
		e.preventDefault();
		$(this).tab('show');
	});

To have tabs in different directions wrap the above code with the below tag 

	

				.......

Options available : tabs-left, tabs-right

For further reading please refer Bootstrap documentation



2.6 Sliders

iOS7 like sliders that are highly customizable and comes with all the colors in our palette. Use a simple input tag and wrap it with the class slider to get different color options.



Example HTML Source :
Example Javascript Source : 
	$('.element').slider();
Required Files

Options

These options can be added to the input attributes as show in the code

Name type default description
min float 0 minimum possible value
max float 10 maximum possible value
step float 1 increment step
orientation string 'horizontal' set the orientation. Accepts 'vertical' or 'horizontal'
value float|array 5 initial value. Use array to have a range slider.
selection string 'before' selection plament. Accepts: 'before', 'after' or 'none'. In case of a range slider, the selection will be placed between the handles
tooltip string 'show' whatever to show or hide the tooltip. Accepts: 'show' or 'hide'
handle string 'round' handle shape. Accepts: 'round', 'square' or 'triangle'
formater function returns the plain value formater callback. Return the value wanted to be displayed in the tooltip

For further documentation please visit the following link : Bootstrap Slider



2.7 Group List

A touch friendly drag n drop list that has the capability of multiple lists options

  1. Item 1
  2. Item 2
    1. Item 3
    2. Item 4
    3. Item 5
      1. Item 6
      2. Item 7
      3. Item 8
    4. Item 9
    5. Item 10
  3. Item 11
  4. Item 12

HTML Source: 
					

						

							
    
							 
								
  1. 
									
    Item 1
    
								
    2. 
							 
								
  2. 
									
    Item 2
    
									
      
										
    1. Item 3
      2. 
										
    2. Item 4
      3. 
										
    3. 
											
      Item 5
      
											
        
												
      1. Item 6
        2. 
												
      2. Item 7
        3. 
												
      3. Item 8
        4. 
											
      
										
      4. 
										
    4. Item 9
      5. 
										
    5. Item 10
      6. 
									
    
								
    3.
JavaScript Source: 
	$('#nestable').nestable({
			group: 1
	})
Reuqired Files:


3.1 Form elements

Form elements consist of basic elements that you need to create a form. We have added some extra components that will be needed and are customized to suite the template


3.1.1 Input Appends/Prepends

These are basic Bootstrap components, we have customized it in 3 different ways to use with a total of 9 options



Custom version


Example HTML Code

3.1.1 Checkbox and Radio

Our very own check box and radio elements that supports even retina version, no images just pure CSS. They will function like ordinary check box and radio components but with a label(the label can be blank too) with it.


Exampl HTML Code

Exampl HTML Code

Important!

A label is a must! but it can also be a BLANK label too, so you have the flexibility, Please remember to assign for attribute in the label class

More Options

They all come with all Bootstrap colors and check boxes can be also rounded ones too.

Color Class Circle Checkbox

Simply Apply .checkbox-circle class to the wrapper of the checkbox


3.1.2 Slide Toggle

Beautiful iOS7 slide toggle that has the option of all Bootstrap classes

HTML code:

JavaScript code: 
var Switch = require('ios7-switch')
        , checkbox = document.querySelector('.ios')
        , mySwitch = new Switch(checkbox);
 mySwitch.toggle();
      mySwitch.el.addEventListener('click', function(e){
        e.preventDefault();
        mySwitch.toggle();
      }, false);

Required Files:

3.1.3 Combo box

This plugin comes with a inbuilt search option that can be disabled later.



JavaScript code: 
  $("#source").select2();
  //Multi Select
   $("#multi").val(["Jim","Lucy"]).select2();

Required Files:

For more information please refer the form_elements.html file or Select2 Documentation


3.1.4 Date and Time Picker

This plugin is powered by eyecon Boostrap datepicker and is highly customizable, We have change the look and feel to suite our design

HTML Source:

JavaScript code: 
	  //Date Pickers
	  $('.input-append.date').datepicker({
				autoclose: true,
				todayHighlight: true
	   });
	   
	//Time pickers
	$('.timepicker-default').timepicker();
    $('.timepicker-24').timepicker({
                minuteStep: 1,
                showSeconds: true,
                showMeridian: false
     });

Required Files:

For more information please refer the form_elements.html file or DatePicker Documentation and TimePicker Documentation


3.1.5 Input Mask

These assure the user will never enter invalid phone no, email or anything that has a pattern even without validations, powerd by jquery-inputmask

HTML Source:

JavaScript code: 
  $("#date").mask("99/99/9999");

Required Files:

For more information please refer the form_elements.html file or Jquery Autonumeric Documentation


3.1.5 Input auto-numeric

Do you forget small things? here is something that helps to automatically placed forgotten dollar signs, decimal places and even comma separates and many more!, powered by jquery-autonumeric plugin

HTML Source:

For more information please refer the form_elements.html file or Jquery Autonumeric Documentation

JavaScript code: 
  $('.auto').autoNumeric('init');

Required Files:

3.1.6 HTML5 WYSIYG

Simple, elegant WYSIYG editor that acts as a word editor all necessary actions that is required to type simple content with style is available in this editor. Its powererd by HTML5 WYSIYG editor which will work even on any mobile device. Simply place it any textarea

HTML Source:

JavaScript code: 
 $('#text-editor').wysihtml5();

Required Files:

For more information please refer the form_elements.html file or bootstrap-wysihtml5 Documentation





3.2 Form Validations

A very important is form validations that helps users to enter the correct information. We have included three different views of validations, this is powered by jquery-validation plugin a widely used and highly customizable plugin


Tradition validation

e.g. "5000"
HTML Source : 
                      

						

							
							e.g. "5000"

JavaScript Source : 
		  	$('#form_traditional_validation').validate({
                focusInvalid: false, 
                ignore: "",
                rules: {
                    form1Amount: {
					digits: true,
                        minlength: 2,
                        required: true
                    }
                },

                invalidHandler: function (event, validator) {
					//display error alert on form submit    
                },

                errorPlacement: function (label, element) { // render error placement for each input type   
					$('').insertAfter(element).append(label)
                    var parent = $(element).parent('.input-with-icon');
                    parent.removeClass('success-control').addClass('error-control');  
                },

                highlight: function (element) { // hightlight error inputs
					var parent = $(element).parent('.input-with-icon');
					parent.removeClass('success-control').addClass('error-control'); 
                },

                unhighlight: function (element) { // revert the change done by hightlight
                    
                },

                success: function (label, element) {
					var parent = $(element).parent('.input-with-icon');
					parent.removeClass('error-control').addClass('success-control'); 
                },

                submitHandler: function (form) {
                
                }
            });

Iconic validation

e.g. "john@examp.com"
HTML Source : 
				

					

                        
                        e.g. "john@examp.com"

JavaScript Source : 
		  	   $('#form_iconic_validation').validate({
                errorElement: 'span', 
                errorClass: 'error', 
                focusInvalid: false, 
                ignore: "",
                rules: {
                    form1Email: {
                        required: true,
                        email: true
                    },
                },

                invalidHandler: function (event, validator) {
					//display error alert on form submit    
                },

                errorPlacement: function (error, element) { // render error placement for each input type
                    var icon = $(element).parent('.input-with-icon').children('i');
                    var parent = $(element).parent('.input-with-icon');
                    icon.removeClass('icon-ok').addClass('icon-exclamation');  
                    parent.removeClass('success-control').addClass('error-control');  
                },

                highlight: function (element) { // hightlight error inputs
					
                },

                unhighlight: function (element) { // revert the change done by hightlight
                    
                },

                success: function (label, element) {
                    var icon = $(element).parent('.input-with-icon').children('i');
					var parent = $(element).parent('.input-with-icon');
                    icon.removeClass("icon-exclamation").addClass('icon-ok');
					parent.removeClass('error-control').addClass('success-control'); 
                },

                submitHandler: function (form) {
                
                }
            });

Required files Source :

For more information please refer the form_validations.html file or jquery form validation plugin documentation





3.3 Form Wizard

A powerful and responsive wizard that uses jquery-validation plugin to validate its fields. We have customized its look and feel to suit our design

HTML Source:

JavaScript Source : 
	$('#rootwizard').bootstrapWizard({
	  		'tabClass': 'form-wizard',
	  		'onNext': function(tab, navigation, index) {
	  			var $valid = $("#commentForm").valid();
	  			if(!$valid) {
	  				$validator.focusInvalid();
	  				return false;
	  			}
				else{
					$('#rootwizard').find('.form-wizard').children('li').eq(index-1).addClass('complete');
					$('#rootwizard').find('.form-wizard').children('li').eq(index-1).find('.step').html('');	
				}
	  		}
	 });

Required files Source :

For more information please refer the form_validations.html file or bootstrap form wizard documentation




4.1 Grids/Portlets

A very important UI element that helps to represent your information separately, We have over 4 types of different portlets so that you will never get bored

  1. Simple - Default
  2. Bored - Comes with the boreded options
  3. Colored Bored- Comes with the Colored bored for one side
  4. Transparent - Blends with the background
  5. Solid - Pure colored portlet

Portlet consist of a header, controllers and a body, the following code helps to create a simple portlet

				 
						

							 
							

								
Grid One

								 
								

									
									
									
									
								

								 
							

							 
							 
							

								

									Content here

Type Description Code
Bordered Comes with the boreded options 
			   		

							

								
Grid Two

								

									
									
									
									
								

							

							

							...
Color Bordered Comes with the Colored bored for one side
Sides : vertical and horizontal
Colors : red,blue,green,yellow 
						

							

								
Grid One

								

									
									
									
									
								

							

							

							...
Transparent Blends with the background 
						

							

								
Grid One

								

									
									
									
									
								

							

							

								...
Solid Pure colored portlet
Available in all the colors in our palette 
						

							

								
Grid Two

								

									
									
									
									
								

							

							
			
								...


4.2 Drag-gable Grids/Portlets

Drag-gable is easy to apply since it uses the existing portlet code. Simply wrap with the class .sortable. Good new is that this is also compatible with touch devices!


The following javascript can be found in the core.js file. 
  
  $(".sortable").sortable({
            connectWith: '.sortable',
            iframeFix: false,
            items: 'div.grid',
            opacity: 0.8,
            helper: 'original',
            revert: true,
            forceHelperSize: true,
            placeholder: 'sortable-box-placeholder round-all',
            forcePlaceholderSize: true,
            tolerance: 'pointer'
        });

Required JS library

For further examples and code please view our template webarch file grids_draggable.html



5.1 Simple Tables

This is native Bootstrap tables that have different options like bored, highlighted and simple We have customized it with best suited color and size so that it fits in the design. By simply adding the class .table to any html table tag you can archieve it


Type Description Class
Simple Table default table view with no borders round it You dont need a special class
Stripped Table Colored strips for each even row .table-striped
Hover table Color row when table row hover .table-hover
Bordered table Classical bored table .table-bordered

To view example and it in action please do look at the webarch template file tables.html



5.1 DataTables

One of the most famous and highly customizable plugin with great documentation. By a few lines of code you can turn any table in to a datatable This is not the typical datatable but one that is customized to suite Bootstrap grid system and its native classes.Its all implemented

Sample Code : 
  
$('#table').dataTable( {
		//Table header options
		,
			"oTableTools": {
			"aButtons": [
				{
					"sExtends":    "collection",
					"sButtonText": "",
					"aButtons":    [ "csv", "xls", "pdf", "copy"]
				}
			]
		},
		//Pagination classes and customization
		"sPaginationType": "bootstrap",
		 "aoColumnDefs": [
          { 'bSortable': false, 'aTargets': [ 0 ] }
		],
		"aaSorting": [[ 1, "asc" ]],
		"oLanguage": {
			"sLengthMenu": "_MENU_ ",
			"sInfo": "Showing _START_ to _END_ of _TOTAL_ entries"
		},
		 bAutoWidth     : false,
        fnPreDrawCallback: function () {
            // Initialize the responsive datatables helper once.
            if (!responsiveHelper) {
                responsiveHelper = new ResponsiveDatatablesHelper(tableElement, breakpointDefinition);
            }
        },
        fnRowCallback  : function (nRow) {
            responsiveHelper.createExpandIcon(nRow);
        },
        fnDrawCallback : function (oSettings) {
            responsiveHelper.respond();
        }

})
Required Files

Is it responsive?

Yes we made it responsive, use the attribute data-hide on TD in Table header
This attribute will specify the weather to hide the column on which type of device - "phone" "tablet"

For more information please refer the demo webarch file - datatables.html and Datatable documentation



6.1 Google Maps

Google maps is powered by the plugin gmaps.js.What we have done is changed the representation of maps in different way.


Example code :

The class .demo-map is to represent full width and height of the screen and overlay-fixed helps it to stick on to the screen without scrolling


JavaScript code located in google_maps.js: 
  
	  //Initialize Map
	  map = new GMaps({
        el: '#map',
        lat: -12.043333,
        lng: -77.028333,
        zoomControl : false,
        zoomControlOpt: {
            style : 'SMALL',
            position: 'TOP_LEFT'
        },
		 markers: [
			{lat: -12.043333, lng: -77.028333},
			{lat: -12.045333, lng: -77.034},
			{lat: -12.045633, lng: -77.022}
		],
        panControl : false,
        streetViewControl : false,
        mapTypeControl: false,
        overviewMapControl: false,
		
      });
	  // Add a random mark
	  setTimeout( function(){
		  map.addMarker({
				  lat: -12.043333,
				  lng: -77.028333,
				  animation: google.maps.Animation.DROP,
				  draggable:true,
				  title: 'New marker'
		  });
	  },3000);
	  //Initialize Context Menu
	    map.setContextMenu({
        control: 'map',
        options: [{
          title: 'Add marker',
          name: 'add_marker',
          action: function(e){
            console.log(e.latLng.lat());
            console.log(e.latLng.lng());
            this.addMarker({
              lat: e.latLng.lat(),
              lng: e.latLng.lng(),
			  animation: google.maps.Animation.DROP,
			  draggable:true,
              title: 'New marker'
            });
            this.hideContextMenu();
          }
        }, {
          title: 'Center here',
          name: 'center_here',
          action: function(e){
            this.setCenter(e.latLng.lat(), e.latLng.lng());
          }
        }]
      });
      map.setContextMenu({
        control: 'marker',
        options: [{
          title: 'Center here',
          name: 'center_here',
          action: function(e){
            this.setCenter(e.latLng.lat(), e.latLng.lng());
          }
        }]
      });

Files required code :

For more demos and documentation please refer the demo webarch file - google_map.html and gmaps js



6.2 Vector Maps

Vector maps helps you to generator less detail but vector graphics of maps. They can be loaded without internet, this is powered by the plugin jvectormap

JavaScript code located in vector_maps.js: 
  
$('#world-map').vectorMap({
   map: 'world_mill_en',
    scaleColors: ['#C8EEFF', '#0071A4'],
    normalizeFunction: 'polynomial',
    focusOn:{
		   x: 0.5,
		  y: 0.5,
		  scale: 2.5
	},
	zoomMin:0.85,
    hoverColor: false,
	regionStyle:{
		  initial: {
			fill: '#babdc0',
			"fill-opacity": 1,
			stroke: '#babdc0',
			"stroke-width": 0,
			"stroke-opacity": 0
		  },
		  hover: {
			"fill-opacity": 0.8
		  },
		  selected: {
			fill: 'yellow'
		  },
		  selectedHover: {
		  }
		},
    markerStyle: {
		  initial: {
			fill: '#f35958',
			stroke: '#f35958',
			"fill-opacity": 1,
			"stroke-width": 4,
			"stroke-opacity": 0.2,
			r: 5
		  },
		  hover: {
			stroke: 'black',
			"stroke-width": 2
		  },
		  selected: {
			fill: 'blue'
		  },
		  selectedHover: {
		  }
		},
    backgroundColor: '#e5e9ec',
    markers: [
      {latLng: [41.90, 12.45], name: 'Vatican City'},
      {latLng: [43.73, 7.41], name: 'Monaco'},
      {latLng: [-0.52, 166.93], name: 'Nauru'},
      {latLng: [-8.51, 179.21], name: 'Tuvalu'},
      {latLng: [43.93, 12.46], name: 'San Marino'},
      {latLng: [47.14, 9.52], name: 'Liechtenstein'},
      {latLng: [7.11, 171.06], name: 'Marshall Islands'},
      {latLng: [17.3, -62.73], name: 'Saint Kitts and Nevis'},
      {latLng: [3.2, 73.22], name: 'Maldives'},
      {latLng: [35.88, 14.5], name: 'Malta'},
      {latLng: [12.05, -61.75], name: 'Grenada'},
      {latLng: [13.16, -61.23], name: 'Saint Vincent and the Grenadines'},
      {latLng: [13.16, -59.55], name: 'Barbados'},
      {latLng: [17.11, -61.85], name: 'Antigua and Barbuda'},
      {latLng: [-4.61, 55.45], name: 'Seychelles'},
      {latLng: [7.35, 134.46], name: 'Palau'},
      {latLng: [42.5, 1.51], name: 'Andorra'},
      {latLng: [14.01, -60.98], name: 'Saint Lucia'},
      {latLng: [6.91, 158.18], name: 'Federated States of Micronesia'},
      {latLng: [1.3, 103.8], name: 'Singapore'},
      {latLng: [1.46, 173.03], name: 'Kiribati'},
      {latLng: [-21.13, -175.2], name: 'Tonga'},
      {latLng: [15.3, -61.38], name: 'Dominica'},
      {latLng: [-20.2, 57.5], name: 'Mauritius'},
      {latLng: [26.02, 50.55], name: 'Bahrain'},
      {latLng: [0.33, 6.73], name: 'São Tomé and Príncipe'}
    ]
  });

You can download each map dedicated separately from the jVectorMap website, Please note that these maps are a bit heavy and do not include them all

For more information please refer the demo webarch file - vector_map.html and jVector Map documentation




7 Charts

We have over 6 chart plugins installed and fully customized to the template design, Please view the following links for its documentations. We have included all the charts in charts.html


Plugin Name Version Documentation
Jquery flotChart 0.8.1 flotChart
Jquery Sparklines 2.1.2 Sparklines
Jquery Ricksaw Official Webarch Featured Charts Ricksaw
Morris Charts 0.4.3 Morris Charts
Easy Pie Charts 2.1.0 Easy Pie Charts


8.1 Photo Gallery

An extra component that is powered by the plugins superbox, unlike tradition fancybox plugin it has a lazy load thumbnail and google search like preview for large images and it is in built responsive

HTML Source :

JavaScript Source : 
// Call SuperBox - that's it!
$('.superbox').SuperBox();

JavaScript Source :



8.2 Search

An extra component that is powered by the plugins mixitup. Its a plugin that allows to sort dom elements with animation and works smoothly on desktop and mobile

JavaScript Source : 
			$('#Parks').mixitup({
					layoutMode: 'list', // Start in list mode (display: block) by default
					listClass: 'list', // Container class for when in list mode
					gridClass: 'grid', // Container class for when in grid mode
					effects: ['fade','blur'], // List of effects 
					listEffects: ['fade','rotateX'] // List of effects ONLY for list mode
				});

Required files Source :



9 Plugin list


Plugin Name Version Documentation
Jquery 1.11.3 Jquery
Jquery UI 1.10.1 Jquery UI
Bootstrap 3.3.5 Bootstrap
Jquery Unveil 1.0 Unveil
Pace Loader 1.0.0 Pace
Boostrap slider 2.0 Sliders
Nestables/Group list Unknown Nestable jQuery
Bootstrap Select2 3.3.2 Select2
Bootstrap Datepicker 1.4 Datepicker
Bootstrap Timepicker 0.2.3 Timepicker
Bootstrap Colorpicker 0.2.3 Colorpicker
Inputmask 1.3.1 Inputmask
Bootstrap wysihtml5 0.3.0 Bootstrap wysihtml5
Bootstrap taginputs 0.3.9 taginputs
Dropzone 2.0 Dropzone
Jquery validation 1.11.1 Jquery validation
Bootstrap Form Wizard Unknown Form Wizard
Jquery gmaps 0.4.8 gmaps.js
Jquery jVectorMap 1.2.2 jVectorMap
Jquery flotChart 0.8.1 flotChart
Jquery Sparklines 2.1.2 Sparklines
Morris Charts 0.4.3 Morris Charts
Easy Pie Charts 2.1.0 Easy Pie Charts
SuperBox Gallery 1.0.0 SuperBox
Full Calender 1.6.4 Calender
Jquery MixItUp 1.5.4 MixItUp



10 Support

We are always there to help, drop us a message or join our support forum

support@revox.io

http://help.revox.io/

Top