may88seiji
5/26/2017 - 2:52 AM

pluginの設定の仕方

pluginの設定の仕方

import $ from 'jquery';
import pagepiling from 'pagepiling.js';

export function init(){

/* ----------------------------
* Plugin intialization
* -------------------------- */
  $('#pagepiling').pagepiling({
    menu: '#menu',
    anchors: ['page1', 'page2', 'page3', 'page4'],
    sectionsColor: ['white', '#ee005a', '#2C3E50', '#39C',"darkred","gray","darkgreen"],
    navigation: {
      'position': 'right',
      'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Page 4','Page 5','Page 6','Page 7']
    },
    afterRender: function(){
      $('#pp-nav').addClass('custom');
    },
    afterLoad: function(anchorLink, index){
      if(index>1){
        $('#pp-nav').removeClass('custom');
      }else{
        $('#pp-nav').addClass('custom');
      }
    }
  });


/* ----------------------------
* Internal use of the demo website
* -------------------------- */
  $('#showExamples').click(function(e){
    e.stopPropagation();
    e.preventDefault();
    $('#examplesList').toggle();
  });

  $('html').click(function(){
    $('#examplesList').hide();
  });
  console.log('pagepiling');


  
//  if($('.js-item').length){
//    console.log("aru");
//  } else {
//    console.log("nai");
//  }
  
}
{
    "dependencies": {
    "install": "^0.8.8",
    "jquery": "^2.2.0",
    "npm": "^4.5.0",
    "vue": "^2.2.6",
    "vue-router": "^2.4.0",
    "vueify": "^9.4.1",
    "pagepiling.js": "git+https://github.com/alvarotrigo/pagePiling.js.git"
  }
}

npm install 全体のもの npm install plugin

##ex require ('slick-carousel');

###package.jsonに追加 "pagepiling.js": "git+https://github.com/alvarotrigo/pagePiling.js.git" プラグイン名 + "git+ '該当githubのhttps' "

###npm install package.jsonのある階層で実行

###該当ファイル作成 import $ from 'jquery'; import pagepiling from 'pagepiling.js'; 必要なものをinportする

###該当ファイル内で exportする export function init(){ //write code here. }

###moduleファイルで実行する (window) .on('load',function(){ VueRender.init(); });