• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Tutsplanet

Tutsplanet

Free Technical and Blogging Resources

  • Home
  • Web Hosting
  • Programming
  • Plugins
  • Twitter Trends
  • Tools
  • About Us

Programming

Basic Flow Chart Plugin With jQuery And Bootstrap – simple-flow

Oct 24, 2019 Editorial Staff Leave a Comment

Share
Tweet
Share
1 Shares

A basic, lightweight flow chart module which uses grid system to create a minimal, responsive workflow with SVG put together association lines and and arrows on the web page.

How to use it:

jQuery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Bootstrap

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

Simpleflow Core CSS

<link rel="stylesheet" type="text/css" href="css/simple-flow.min.css">

Simpleflow Core JS

<script src="src/js/simple-flow.min.js"></script>

Add below HTML inside your body tag

<section class="container canvas">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="object"></div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="object"></div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="object"></div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="object"></div>
    </div>
  </div>
</section>

Sample Usage

<script type="text/javascript">
  $(function() {
    var settings = {
      lineWidth: 2,
      lineSpacerWidth: 15,
      lineColour: '#91acb3',
      canvasElm: '.canvas'
    }
    $('.object').SimpleFlow(settings);
  })
</script>

  


Editorial Staff

Editorial Staff at Tutsplanet is a dedicated team to write various tutorials about subjects like Programming, Technology and Operating Systems.

View all posts by Editorial Staff

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar



Quick Links

  • Top 21 Website Ideas To Make Money Online in 2021
  • A Simple YouTube Video Downloader Script in PHP
  • The 50 Most Useful jQuery Plugins for Frontend Development
  • Replace “\n” with new line characters, using Notepad++
  • Using Third-Party Libraries in Codeigniter
  • Upload Multiple Images and Store in Database using PHP and MySQL.
  • Hierarchical Tree view Category Example in Laravel
  • Laravel Image Intervention Tutorial With Example
  • How to import sql file in MySQL database using PHP?
  • Free VAT Calculator Online



Subscribe

* indicates required



Search Here

Share

   



Hot topics

  • Replace “\n” with new line characters, using Notepad++ 58 views
  • How to enter new line in Microsoft Teams? 53 views
  • A Simple YouTube Video Downloader Script in PHP 38 views
  • Open a URL in a new tab using JavaScript 32 views
  • Add FTP/SFTP in Visual Studio Code 19 views
  • Solution: windows photo viewer opens each time save a pic file 16 views
  • How to change PHP version on MAMP – Mac OSX 15 views
  • How to use Faker with Laravel ? 15 views
  • PHP: Implode () with quotes 14 views
  • Using Third-Party Libraries in Codeigniter 13 views

Categories

  • Design & Development
  • Drupal
  • Facebook
  • General
  • How To
  • ios
  • Javascript
  • Linux
  • Magento
  • Marketing
  • News
  • PHP
  • Plugins
  • Programming
  • Snippets List
  • Social Media
  • Softwares
  • Themes
  • Tips
  • Wordpress
  • YouTube























Copyright © 2022 · Planet on Genesis Framework · Powered By BunnyCDN . Network wallpapernoon.com