Page Menuにボタンを追加する
UserScriptを使うと、Page Menuに独自のボタンを追加することができる
API Reference
ボタンを追加する
scrapbox.PageMenu.addMenu()を使う
実行すると、div.page-menuに新しいボタンが追加される
例
code:js
scrapbox.PageMenu.addMenu({
title: 'NewButton',
image: 'https://i.gyazo.com/7057219f5b20ca8afd122945b72453d3.png',
onClick: () => alert('Hello, Scrapbox!'),
});
title (必須)
マウスをホバーしたときに出てくるtooltipの文字になる
ボタンのHTML要素のidにもなる
image (必須)
onClick (option)
ボタンを押したときに実行する関数
ボタンを削除する
できないようだ
scrapbox.PageMenu().reset()を使う
これを実行したあとに該当ボタンを押すと消える
ボタンの中にメニューを追加する
scrapbox.PageMenu().addItem()を使う
例
code:js
scrapbox.PageMenu('NewButton').addItem({
title: 'NewButton',
image: 'https://i.gyazo.com/7057219f5b20ca8afd122945b72453d3.png',
onClick: () => alert('Hello, Scrapbox!'),
});
PageMenu()にメニューを追加したいボタンの名前を渡す
Page Menuにボタンを追加する#5fec6d091280f000005e132cと同一
省略すると#page-edit-menuの一番先頭に追加される
title (必須)
メニューの名前
関数を指定することもできる
code:js
scrapbox.PageMenu('NewButton').addItem({
title: () => ${new Date()},
image: 'https://img.icons8.com/ios/180/clock.png',
onClick: () => alert('Hello, Scrapbox!'),
});
https://i.gyazo.com/83de677694ae11fbc5ba1fdfdab8a1fa.mp4
メニューを開閉するたびに、新しく実行される
image (option)
メニューの名前の横に表示する画像
指定するとこのようになる↓
https://gyazo.com/9fe35fd67b3a7aea41b237964b695891
onClick (必須)
ボタンを押したときに実行する関数
仕切り線を追加する
scrapbox.PageMenu().addSeparator()を使う
例
code:js
scrapbox.PageMenu.addMenu({
title: 'NewButton',
image: 'https://i.gyazo.com/7057219f5b20ca8afd122945b72453d3.png',
});
scrapbox.PageMenu('NewButton').addItem({
title: 'NewButton',
image: 'https://i.gyazo.com/7057219f5b20ca8afd122945b72453d3.png',
onClick: () => alert('Hello, Scrapbox!'),
});
scrapbox.PageMenu('NewButton').addSeparator();
scrapbox.PageMenu('NewButton').addItem({
title: 'NewButton',
onClick: () => alert('Hello, Scrapbox!'),
});
scrapbox.PageMenu('NewButton').addSeparator();
scrapbox.PageMenu('NewButton').addSeparator();
実行結果
https://gyazo.com/44184c9e00621e5e26d3618cc2f38420
ボタンの中のメニューをすべて消す
scrapbox.PageMenu().removeAllItems()を使う
仕切り線も消える
実行しただけでは反映されない
反映するにはscrapbox.PageMenu().emitChange()を実行する必要がある
なくなったっぽい？
PageMenuへの変更を反映する
PageMenuのボタンをクリックする
仕組みはよくわからない
scrapbox.PageMenu().emitChange()を使う
PageMenu(id)で指定したものだけでなく、すべてのボタンの中身の変更が反映される模様
以下では内部で実行される
scrapbox.PageMenu.addMenu()
scrapbox.PageMenu().addItem()
scrapbox.PageMenu().addSeparator()
以下では内部で実行されない
scrapbox.PageMenu().removeAllItems()
scrapbox.PageMenu().reset()
その他のAPI
scrapbox.PageMenu().menuName
ボタンの名前
scrapbox.PageMenu().menus
すべてのPage menuのボタンの情報