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