ページファイル埋め込み

script埋め込み

ul リストを追加します

1. id名を Script-files で設定します。

<ul id="Script-files"></ul>

2. liにjavascriptを追加します.

・アップロードしたJavaScriptファイルの場合

<li type="file">「アップロードしたファイルURL」</li>

・埋め込むJavaScript

<li type="inner">
    function hello(){ 
     alert("helloworld");
    } 
</li>

3. クリックや値変更でトリガーをするためには以下を追加します.

• 動かしたいidやclassを指定しどのメソッドを呼ぶか指定する

onEnable.addMethod("#id名",メソッド);

4. 動かしたいidやclass名のタグに対してどの操作か指定する

・クリックをキャッチ

<p id="id名" data-click="true">

・値の変動をキャッチ

<p id="id名" data-change="true"></p>

5. 最後に反映をする

<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>