Schule

In this example below you will see how to do a Schule with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by RME, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright RME ©
  • HTML
  • CSS
  • JavaScript
    <div class="views">
<div class="view view-main">
<div class="pages navbar-fixed">
<div data-page="home" class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="center">Notifications</div>
</div>
</div>
<div class="page-content">
<div class="content-block">
<p><a href="#" class="button button-raised notification-single">Single-line message</a></p>
<p><a href="#" class="button button-raised notification-multi">Multi-line message</a></p>
<p><a href="#" class="button button-raised notification-custom">With custom button</a></p>
<p><a href="#" class="button button-raised notification-callback">With callback on close</a></p>
</div>
  <div class="content-block-title">Simple Cards</div>
<div class="card">
  <div class="card-header">Jetzt Neu:</div>
  <div class="card-content">
    <div class="card-content-inner">Die HSG App gibts jetzt auch bei Google Play und im App Store</div>
  </div>
  <div class="card-footer"><a href="#" class="link">Google Play</a>
    <a href="#" class="link">App Store</a></div>
</div>
<div class="card">
  <div class="card-content">
    <div class="card-content-inner">Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. </div>
  </div>
</div>            
</div>
</div>
</div>
</div>
</div>


/*Downloaded from https://www.codeseek.co/RME/schule-VayaKg */
    


/*Downloaded from https://www.codeseek.co/RME/schule-VayaKg */
          var myApp = new Framework7({
        material: true
      }); 
      var mainView = myApp.addView('.view-main');
      
      var $$ = Dom7;
      
      $$('.notification-single').on('click', function () {
          myApp.addNotification({
              message: 'Simple message'
          });
      });
      $$('.notification-multi').on('click', function () {
          myApp.addNotification({
              message: 'Multi-line message. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in magna nisi.',
          });
      });
      $$('.notification-custom').on('click', function () {
          myApp.addNotification({
              message: 'Nice yellow button',
              button: {
                  text: 'Click me',
                  color: 'yellow'
              }
          });
      });
      $$('.notification-callback').on('click', function () {
          myApp.addNotification({
              message: 'Close me to see Alert',
              button: {
                  text: 'Close Me',
                  color: 'lightgreen'
              },
              onClose: function () {
                  myApp.alert('Notification closed');
              }
          });
      });

Comments