「ページファイル埋め込み」の版間の差分

提供:sufeeWiki
ナビゲーションに移動 検索に移動
58行目: 58行目:
</syntaxhighlight><p class="script-click btn" data-click="true">クリックするとダイアログが出るよ!!</p>
</syntaxhighlight><p class="script-click btn" data-click="true">クリックするとダイアログが出るよ!!</p>
== inputやbuttonで実装する ==
== inputやbuttonで実装する ==
*div要素を設置し idまたは,class名を設定。その後 data-属性を使用し ターゲットとなるタグ属性の設定を書き込む。
#div要素を設置し idまたは,class名を設定。その後 data-属性を使用し ターゲットとなるタグ属性の設定を書き込む。
<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
<div data-tag="input" data-type="text" data-onchange=true" data-name="btn" id="btn-div"></div>
<div data-tag="input" data-type="text" data-onchange=true" data-name="btn" id="btn-div"></div>
64行目: 64行目:
なお設定するプロパティ名は以下に従う。<br>
なお設定するプロパティ名は以下に従う。<br>
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input
*先程のulリスト形式の呼び出しを使用しonEnableを呼び出す.<syntaxhighlight lang="html">
#先程のulリスト形式の呼び出しを使用しonEnableを呼び出す.<syntaxhighlight lang="html">
<ul id="Script-files">
<ul id="Script-files">
  <li type="inner">
  <li type="inner">

2022年1月27日 (木) 14:51時点における版

script埋め込み

ul リストを追加します

  1. id名を Script-files で設定します。
ul id="Script-files"
  1. liにjavascriptを追加します.
    1. アップロードしたJavaScriptファイル
li type="file" > 「アップロードしたファイルURL」 </
    1. 埋め込むJavaScript
li type="inner" > 
function hello(){
 alert("helloworld");
}
</
  1. クリックや値変更でトリガーをするためには以下を追加します.
    1. 動かしたいidやclassを指定しどのメソッドを呼ぶか指定する
onEnable.addMethod("#id名",メソッド);
  1. 動かしたいidやclass名のタグに対してどの操作か指定する
    1. クリックの場合
p id="id名" data-click="true" >
    1. 値の変動をキャッチ
p id="id名" data-change="true" >
  1. 最後に反映をする
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 data-tag="input" data-type="text" data-onchange=true" data-name="btn" id="btn-div"></div>

なお設定するプロパティ名は以下に従う。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input

  1. 先程の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>
    

結果2