「ページファイル埋め込み」の版間の差分
ナビゲーションに移動
検索に移動
Sufee Admin (トーク | 投稿記録) |
Sufee Admin (トーク | 投稿記録) |
||
2行目: | 2行目: | ||
=== ul リストを追加します === | === ul リストを追加します === | ||
# id名を Script-files で設定します。 | # id名を Script-files で設定します。 | ||
<syntaxhighlight lang="html"> | |||
<ul id="Script-files"></ul> | |||
</syntaxhighlight> | |||
# liにjavascriptを追加します. | # liにjavascriptを追加します. | ||
## アップロードしたJavaScriptファイル | ## アップロードしたJavaScriptファイル | ||
<syntaxhighlight lang="html"> | |||
<li type="file">「アップロードしたファイルURL」</li> | |||
</syntaxhighlight> | |||
## 埋め込むJavaScript | ## 埋め込むJavaScript | ||
<syntaxhighlight lang="html"> | |||
<li type="inner"> | |||
function hello(){ | |||
alert("helloworld"); | |||
} | |||
</li> | |||
</syntaxhighlight> | |||
# クリックや値変更でトリガーをするためには以下を追加します. | # クリックや値変更でトリガーをするためには以下を追加します. | ||
## 動かしたいidやclassを指定しどのメソッドを呼ぶか指定する | ## 動かしたいidやclassを指定しどのメソッドを呼ぶか指定する | ||
<syntaxhighlight lang="javascript"> | |||
onEnable.addMethod("#id名",メソッド); | |||
</syntaxhighlight> | |||
# 動かしたいidやclass名のタグに対してどの操作か指定する | # 動かしたいidやclass名のタグに対してどの操作か指定する | ||
## クリックの場合 | ## クリックの場合 |
2022年1月27日 (木) 14:59時点における版
script埋め込み
ul リストを追加します
- id名を Script-files で設定します。
<ul id="Script-files"></ul>
- liにjavascriptを追加します.
- アップロードしたJavaScriptファイル
<li type="file">「アップロードしたファイルURL」</li>
- 埋め込むJavaScript
<li type="inner">
function hello(){
alert("helloworld");
}
</li>
- クリックや値変更でトリガーをするためには以下を追加します.
- 動かしたいidやclassを指定しどのメソッドを呼ぶか指定する
onEnable.addMethod("#id名",メソッド);
- 動かしたいidやclass名のタグに対してどの操作か指定する
- クリックの場合
p id="id名" data-click="true" >
- 値の変動をキャッチ
p id="id名" data-change="true" >
- 最後に反映をする
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>