100ZONE
/
SmartCommunity


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>vue-gemini-scrollbar - destroy</title>
  <style>
    /* for demo purposes only */

    * {
      box-sizing: border-box
    }

    html {
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-size: 13px;
    }

    h1 {
      font-size: 2rem
    }

    h2 {
      font-size: 1.5rem
    }

    h3 {
      font-size: 1.17rem
    }

    h4 {
      font-size: 1rem
    }

    h5 {
      font-size: .83rem
    }

    h6 {
      font-size: .67rem
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin: 0 0 0.5em
    }

    .example-content {
      padding: 1em
    }

    .actions {
      padding: 1em 0
    }
    /* EXAMPLE 1 - createElements: false */

    #example-1 .content {
      position: relative;
      width: 500px;
      height: 200px;
      border: 1px solid #ccc;
      overflow-x: auto;
    }

    #example-1 .gm-scroll-view {
      /* prevent horizontal scrollbar take space when destroyed*/
      overflow-x: auto;
    }
    /* custom styles for example 1 */

    #example-1 .thumb {
      background-color: #84b3fc
    }

    #example-1 .thumb:hover,
    #example-1 .thumb:active {
      background-color: #9dc2fd
    }
    /* EXAMPLE 2 - createElements: true */

    #example-2 .content {
      position: relative;
      width: 500px;
      height: 200px;
      border: 1px solid #ccc;
      overflow-x: auto;
    }
    /* custom styles for example 2 */

    #example-2 .thumb {
      background-color: #CC9EED
    }

    #example-2 .thumb:hover,
    #example-2 .thumb:active {
      background-color: #D4ADF0
    }

  </style>
</head>

<body>
  <div id="app">
    <h1>Create/Destroy methods test</h1>

    <hr/>
    <div id="example-2">
      <gemini-scrollbar class="content" :auto-create="false" @ready="ready">
        <div class="example-content">
          <h2>Subtitle</h2>
          <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, reiciendis totam nobis iste accusamus voluptas!
            Maiores tempore recusandae pariatur nulla consequuntur inventore accusantium molestias? Distinctio nemo culpa
            sapiente obcaecati officiis.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, reiciendis totam nobis iste accusamus voluptas!
            Maiores tempore recusandae pariatur nulla consequuntur inventore accusantium molestias? Distinctio nemo culpa
            sapiente obcaecati officiis.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, reiciendis totam nobis iste accusamus voluptas!
            Maiores tempore recusandae pariatur nulla consequuntur inventore accusantium molestias? Distinctio nemo culpa
            sapiente obcaecati officiis.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, reiciendis totam nobis iste accusamus voluptas!
            Maiores tempore recusandae pariatur nulla consequuntur inventore accusantium molestias? Distinctio nemo culpa
            sapiente obcaecati officiis.</p>
        </div>
      </gemini-scrollbar>
      <div class="actions">
        <button @click="create">Crete</button>
        <button @click="destroy">Destroy</button>
      </div>
    </div>
  </div>
  <script src="../js/vue.js" type="text/javascript"></script>
  <script src="../js/vue-gemini-scrollbar.js" type="text/javascript"></script>
  <script>
    new Vue({
      el: '#app',
      data:{
        geminiScrollbar:null
      },
      methods: {
        ready: function (geminiScrollbar) {
          this.geminiScrollbar = geminiScrollbar
        },
        create: function () {
          this.geminiScrollbar.create()
        },
        destroy: function () {
          this.geminiScrollbar.destroy()
        }
      }
    })
  </script>
</body>

</html>