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(); });