Framework7 S1E6 : Chips/Tags From Javascript Array

Framework7 S1E6 : Chips/Tags From Javascript Array



Language :
Platform :
Rating : 5/5 (2)




Introduction

Chips are a very popular way of showing tags in websites or contacts in mobile devices.Chips are sometimes called tags. Framework7 provides easy to use and customizable tags/chips that we can use in our app. Chips can contain text, media/images, and button. The button can be used to delete the chip. So today we see how to make a chip with text, media and delete button. The delete button can be used to dismiss the chip.
We will generate chips programmatically via Javascript from an array.

Questions this Project answers.

  • Framework7 dismissable chips.
  • Framework7 deletable tags.
  • Getting started with framework7.
  • Framework7 chips/tags tutorial.

Libraries Used

These are the third parties used in this project.

Screenshot

  • Here's the screenshot of the project.
    Framework7 ToolBar Tabs
  • Project Structure
    Project Structure

Tools used

Language: Javascript,HTML,CSS
Framework: Framework7
IDE: PHPStorm.
Topic: Framework7 dismissable chips,Framework7 tags.

Source Code

Lets have a look at the source code.

index.htmlmain.jsVideo TutorialDownload
  • Our index.html file.
  • We reference framework7 material css in the header.
  • We also reference our javascript scripts at the base of the body.
<!DOCTYPE html>
<html>
  <head>
    <!--META ATTRIBUTES-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>Camposha.info</title>
    <!-- REFERENCE CSS-->
    <link rel="stylesheet" href="assets/css/framework7.material.min.css">
    <link rel="stylesheet" href="assets/css/framework7.material.colors.min.css">
    <link rel="stylesheet" href="assets/css/my-app.css">
  </head>
  <body>
    <!-- VIEWS-->
    <div class="views">
      <!-- Your main view, should have "view-main" class-->
      <div class="view view-main">
        <!-- Top Navbar-->
        <div class="navbar">
          <div class="navbar-inner">
            <!-- We have home navbar without left link-->
            <div class="center sliding">Camposha.info</div>
            <div class="right">
              <!-- Right link contains only icon - additional "icon-only" class--><a href="#" class="link icon-only"> <i class="icon icon-bars"></i></a>
            </div>
          </div>
        </div>
        <!-- Pages, because we need fixed-through navbar and toolbar, it has additional appropriate classes-->
        <div class="pages navbar-through toolbar-through">
          <!-- Page, data-page contains page name-->
          <div data-page="index" class="page">
            <!-- Scrollable page content-->
            <div class="page-content">
              <div class="content-block-title">Deletable Chips / Tags</div>
              <div class="content-block">
                <div id="displaySectionID">
                </div>
              </div>
              <div class="content-block">
                <div class="row">
                  <div class="col-50"><a href="#" id="setChipsBtn" class="button button-raised button-fill color-cyan">Set Chips</a></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Bottom Toolbar-->
        <div class="toolbar">
          <div class="toolbar-inner"><a href="#" class="link">Home</a><a href="#" class="link">About Us</a></div>
        </div>
      </div>
    </div>
    <!-- REFERENCE SCRIPTS-->
    <script type="text/javascript" src="assets/js/framework7.min.js"></script>
    <script type="text/javascript" src="assets/js/main.js"></script>
  </body>
</html>

 

  • Main class.
  • Initialize Framework7 and Dom7 here.
  • Define data source.
  • Create chips programmatically based on the data we have in the data source.
var mainClass=function()
{
    /*
     -Initialize your app
     -Export selectors engine
     */
    var myApp = new Framework7();
    var $$ = Dom7;
    var galaxies=["StarBust","Cartwheel","MilkyWay","Sombrero","Whirlpool","IC1011"];
    /*
     - Initialize app
     */
    this.initializeApp=function()
    {
        $$('#setChipsBtn').on('click', function () {
            m=new mainClass();
            document.getElementById('displaySectionID').innerHTML="";
            for(var i=0;i<galaxies.length;i++)
            {
                document.getElementById('displaySectionID').appendChild(m.createChip(galaxies[i]));
            }
        });
    }
    /*
     - Create and return a chip
     */
    this.createChip=function(galaxyName)
    {
        //chip
        var chip=document.createElement('div');
        chip.className='chip';
        //chip label
        var chipLabel=document.createElement('div');
        chipLabel.className='chip-label';
        chipLabel.appendChild(document.createTextNode(galaxyName));
        //chip media
        var chipMedia=document.createElement('div');
        chipMedia.className='chip-media bg-teal';
        chipMedia.appendChild(document.createTextNode(galaxyName[0].toUpperCase()));
        //chip delete btn
        var deleteBtn=document.createElement('a');
        deleteBtn.setAttribute('href','#');
        deleteBtn.className='chip-delete';
        chip.appendChild(chipMedia);
        chip.appendChild(chipLabel);
        chip.appendChild(deleteBtn);
        //delete chip
        deleteBtn.onclick=function (e) {
            e.preventDefault();
            myApp.confirm('Do you want to delete '+galaxyName, function () {
                chip.remove();
            });
        };
        return chip;
    }
}
m=new mainClass();
m.initializeApp();

 

Below is the video version of this tutorial.

Framework7 S1E6 : Generate Chips/Tags From Array

  • Download the Project below.
Download

How to Download and Run.

  1. Download the project above.
  2. You'll get a zipped file,extract it.
  3. You'll have three files : html,css and javascript.
  4. Place them in a folder and run the index.html file.That's it.

More

  • Visit our channel for more examples like these.
  • Lets share tips and ideas in our Facebook Page.

Oclemy,Cheers.



Rating :

    Leave a Reply

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

    3 × four =

    COMMENTS