【jQuery】機能単位の部品化視点で見る.loadメソッド
お仕事でとあるライブラリを使ってHTML要素を抜き出して印刷する機能だけを部品化することになった。
webで部品化?って思って色々困惑したので忘れる前に備忘録してみる。
jQueryの.loadメソッド
部品を呼び出すjavascript
$("print-component").load("print.html");
部品を配置するhtml
<div id="print-component"></div>
読み込むhtml
<button onclick="print()">レポート出力</button>
結果
<div id="print-component"> <button onclick="print()"></button> </div>
部品っぽく書いてみる
.loadで読み込むHTMLには<script><style>タグがそのまま使えるのでより部品っぽく書ける
読み込むhtml
<style> .print-btn{ background-color:#fee; color:#555; } </style> <script> function documentPrint(){ /* ~処理~ */ print(); } </script> <button class=".print-btn" onclick="documentPrint()">レポート出力</button>