JS Template Generator

使い方 (How to use):

  1. テンプレートHTMLを上のテキストエリアに入力します
  2. 「Generate JS」ボタンをクリックします
  3. 生成されたJavaScriptをコピーして、プロジェクトに追加します
  4. このJSファイルを読み込むだけで、テンプレート機能が動作します
  5. テンプレートを利用する要素には、p_tempクラスを追加してください

以下のようにテンプレートを記述します 引数として、クラスの内容をそのまま代入できます。 例えば、複数場所に同じ内容を表示する場合にも活躍します 


            
            
                     <!-- テンプレート定義 -->
            
                <div class="bbb">
                    <div class = "contents_wrap_test">
                        <div class = "contents_wrap_test_2">
                            <div class="test_wrap">
                                <div class="price"  style="background-color: blueviolet;"></div>
                                <div class="ppp"></div>
                                <div class="price"  style="background-color: rgb(36, 181, 194);"></div>
                                <div class="price"  style="background-color: rgb(39, 194, 36);"></div>
                                <div class="price"  style="background-color: rgb(194, 36, 36);"></div>
                                <div class="price"  style="background-color: rgb(73, 36, 194);"></div>
                                <div class="price"  style="background-color: rgb(194, 160, 36);"></div>
                                <div class="price"  style="background-color: rgb(194, 36, 78);"></div>
                                <div class="description">サンプルサンプル</div>
                                <div data-insert="content"></div>
                            </div>
                        </div>
                    </div>
                  
                  <p>testtest</p>
                </div>
                
                <div class="aaa">
                    <div class = "contents_wrap_test">
                        <div class = "contents_wrap_test_2">
                            <div class="test_wrap">
                                <div class="price"></div>
                                <div class="description">サンプルサンプル</div>
                                <div class="price"></div>
                                <div data-insert="content"></div>
                            </div>
                        </div>
                    </div>
                  
                  <p>testtest</p>
                </div>
             
                <!-- 使用例 -->
                <div class="p_temp bbb">
                <div class="ppp">3.141592</div>
                <div class="price">3,000円</div>
                <div class="info">特別割引中</div>
                <p>商品説明がここに入ります</p>
              </div>
            
                <!-- 置換対象 -->
                <div class="p_temp bbb">
                    <div class="ppp">1.4143</div>
                    <div class="price" >
                      <div class = "box">
            
                        <p>test</p>
                        <p>test</p>
                        <p>test</p>
                        <p>test</p>
                      </div>
                      <div class = "box">
            
                        <p>test</p>
                        <p>test</p>
                        <p>test</p>
                        <p>test</p>
                      </div>
            
                    </div>
                    <div class="info">特別割引中</div>
                    <p>商品説明がここに入ります</p>
                  </div>
              
                  <div class = "p_temp aaa"></div>