「ページファイル埋め込み」の版間の差分
ナビゲーションに移動
検索に移動
Sufee Admin (トーク | 投稿記録) |
Sufee Admin (トーク | 投稿記録) 編集の要約なし |
||
(同じ利用者による、間の9版が非表示) | |||
1行目: | 1行目: | ||
<div class="warnning"> | |||
※この設定は重大な脆弱性を発生させます。<br> | |||
取扱には十分に気をつけてください。<br> | |||
また、充分に必要ではない記事に埋め込むことは避けてください。<br> | |||
※このスクリプトは、デスクトップ版のみ動作できます。 | |||
</div> | |||
== script埋め込み == | == script埋め込み == | ||
=== ul リストを追加します === | ===1. ul リストを追加します === | ||
====1. id名を Script-files で設定します。==== | ====1.1 id名を Script-files で設定します。==== | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<ul id="Script-files"></ul> | <ul id="Script-files"></ul> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
====2 | ====1.2 liにjavascriptを追加します.==== | ||
=====・アップロードしたJavaScriptファイルの場合 ===== | =====・アップロードしたJavaScriptファイルの場合 ===== | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
19行目: | 26行目: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
====3 | ====1.3 クリックや値変更でトリガーをするためには以下を追加します.==== | ||
*動かしたいidやclassを指定しどのメソッドを呼ぶか指定する | *動かしたいidやclassを指定しどのメソッドを呼ぶか指定する | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
25行目: | 32行目: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== | ===2. 動かしたいidやclass名のタグに対してどの操作か指定する === | ||
====・クリックをキャッチ==== | |||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<p id="id名" data-click="true"> | <p id="id名" data-click="true"> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
====・値の変動をキャッチ==== | |||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<p id="id名" data-change="true"></p> | <p id="id名" data-change="true"></p> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== | ===3. 最後に反映をする=== | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<li type="inner"> | <li type="inner"> | ||
94行目: | 101行目: | ||
== 動作例2 == | == 動作例2 == | ||
<div data-tag="input" data-type="text" data-onchange="true" data-name="btn" id="div-btn" data-placeholder="ここに入力すると??..."></div> | <div data-tag="input" data-type="text" data-onchange="true" data-name="btn" id="div-btn" data-placeholder="ここに入力すると??..."></div> | ||
[[カテゴリ:JavaScript]] | |||
[[カテゴリ:MediaWiki]] | |||
[[カテゴリ:改造]] | |||
[[カテゴリ:ヘルプ]] | |||
[[カテゴリ:使い方]] | |||
__インデックス拒否__ |
2022年2月17日 (木) 14:18時点における最新版
※この設定は重大な脆弱性を発生させます。
取扱には十分に気をつけてください。
また、充分に必要ではない記事に埋め込むことは避けてください。
※このスクリプトは、デスクトップ版のみ動作できます。
script埋め込み
1. ul リストを追加します
1.1 id名を Script-files で設定します。
<ul id="Script-files"></ul>
1.2 liにjavascriptを追加します.
・アップロードしたJavaScriptファイルの場合
<li type="file">「アップロードしたファイルURL」</li>
・埋め込むJavaScript
<li type="inner">
function hello(){
alert("helloworld");
}
</li>
1.3 クリックや値変更でトリガーをするためには以下を追加します.
- 動かしたいidやclassを指定しどのメソッドを呼ぶか指定する
onEnable.addMethod("#id名",メソッド);
2. 動かしたいidやclass名のタグに対してどの操作か指定する
・クリックをキャッチ
<p id="id名" data-click="true">
・値の変動をキャッチ
<p id="id名" data-change="true"></p>
3. 最後に反映をする
<li type="inner">
onEnable.makeStandbyMethod();
</li>
を追加し完成!!
- function ok(){ alert("OK"); } onEnable.addMethod(".script-click",ok); onEnable.makeStandbyMethod();
- function inputAlert(){ alert(document.getElementsByName("btn")[0].value); } onEnable.addTag("#div-btn",inputAlert); onEnable.makeTag();
動作例
<ul id="Script-files">
<li type="inner">
function ok(){
alert("OK");
}
onEnable.addMethod(".script-click",ok);
onEnable.makeStandbyMethod();
</li>
</ul>
<p class="script-click btn" data-click="true">クリックするとダイアログが出るよ!!</p>
クリックするとダイアログが出るよ!!
inputやbuttonで実装する
1.div要素を設置し idまたは,class名を設定。その後 data-属性を使用し ターゲットとなるタグ属性の設定を書き込む。
<div id="btn-div" data-tag="input" data-type="text" data-onchange=true" data-name="btn" data-placeholder="ここに入力すると??..."></div>
なお設定するプロパティ名は以下に従う。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input
2.先程のulリスト形式の呼び出しを使用しonEnableを呼び出す.
<ul id="Script-files">
<li type="inner">
function inputAlert(){
alert(document.getElementsByName("btn")[0].value);
}
onEnable.addTag("#div-btn",inputAlert);
onEnable.makeTag();
</li>
</ul>