Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Вставка большого куска html-Кода (https://javascript.ru/forum/misc/56782-vstavka-bolshogo-kuska-html-koda.html)

murtukov 04.07.2015 02:26

Вставка большого куска html-Кода
 
Все доброго дня.

Собственно, следующая ситуация:
имеется js-файл, внутри которого содержится множество функций. Одна из функций предназначена для вставки большого куска html-кода (календаря) в страницу. Весь этот html-код хранится в переменной в самой функции, что выглядит ну совершенно ужасно. Мой вопрос: как и где можно наиболее компактно и разумно хранить этот кусок html-кода?

Не буду писать всю функцию тут, ибо не суть. Выложу лишь переменную и код, который ей присваивается:

var calender = $($.parseHTML('<div class=cal-container>\
        <span class="calender-1"> \
            <span class="mfrom"> \
                <select class="month-1"> \
                    <option value="0" selected="selected" style="color: grey;">неизвестен</option> \
                    <option value="1">Январь</option> \
                    <option value="2">Февраль</option> \
                    <option value="3">Март</option> \
                    <option value="3">Апрель</option> \
                    <option value="3">Май</option> \
                    <option value="3">Июнь</option> \
                    <option value="3">Июль</option> \
                    <option value="3">Август</option> \
                    <option value="3">Сентябрь</option> \
                    <option value="3">Октябрь</option> \
                    <option value="3">Ноябрь</option> \
                    <option value="3">Декабрь</option> \
                </select> \
            </span> \
            <span class="yfrom"> \
                <input type="number" value="1990" /> \
            </span> \
            <span class="bc-chbox"> \
                <input type="checkbox" /> \
                <span>до н.э.</span> \
            </span> \
            <div class="dfrom"> \
                <ul class="days"> \
                    <li>X</li> \
                    <li>1</li> \
                    <li>2</li> \
                    <li>3</li> \
                    <li>4</li> \
                    <li>5</li> \
                    <li>6</li> \
                    <li>7</li> \
                    <li>8</li> \
                    <li>9</li> \
                    <li>10</li> \
                    <li>11</li> \
                    <li>12</li> \
                    <li>13</li> \
                    <li>14</li> \
                    <li>15</li> \
                    <li>16</li> \
                    <li>17</li> \
                    <li>18</li> \
                    <li>19</li> \
                    <li>20</li> \
                    <li>21</li> \
                    <li>22</li> \
                    <li>23</li> \
                    <li>24</li> \
                    <li>25</li> \
                    <li>26</li> \
                    <li>27</li> \
                    <li>28</li> \
                    <li>29</li> \
                    <li>30</li> \
                    <li>31</li> \
                </ul> \
            </div> \
            <span class="period"> \
                <input type="checkbox" /> \
                <span>указать период</span> \
            </span> \
        </span> \
        \
        <span class="calender-2"> \
            <span class="mfrom"> \
                <select class="month-2"> \
                    <option value="0" selected="selected" style="color: grey;">неизвестен</option> \
                    <option value="1">Январь</option> \
                    <option value="2">Февраль</option> \
                    <option value="3">Март</option> \
                    <option value="3">Апрель</option> \
                    <option value="3">Май</option> \
                    <option value="3">Июнь</option> \
                    <option value="3">Июль</option> \
                    <option value="3">Август</option> \
                    <option value="3">Сентябрь</option> \
                    <option value="3">Октябрь</option> \
                    <option value="3">Ноябрь</option> \
                    <option value="3">Декабрь</option> \
                </select> \
            </span> \
            <span class="yfrom"> \
                <input type="number" value="1990" /> \
            </span> \
            <span class="bc-chbox"> \
                <input type="checkbox" /> \
                <span>до н.э.</span> \
            </span> \
            <div class="dfrom"> \
                <ul class="days"> \
                    <li>X</li> \
                    <li>1</li> \
                    <li>2</li> \
                    <li>3</li> \
                    <li>4</li> \
                    <li>5</li> \
                    <li>6</li> \
                    <li>7</li> \
                    <li>8</li> \
                    <li>9</li> \
                    <li>10</li> \
                    <li>11</li> \
                    <li>12</li> \
                    <li>13</li> \
                    <li>14</li> \
                    <li>15</li> \
                    <li>16</li> \
                    <li>17</li> \
                    <li>18</li> \
                    <li>19</li> \
                    <li>20</li> \
                    <li>21</li> \
                    <li>22</li> \
                    <li>23</li> \
                    <li>24</li> \
                    <li>25</li> \
                    <li>26</li> \
                    <li>27</li> \
                    <li>28</li> \
                    <li>29</li> \
                    <li>30</li> \
                    <li>31</li> \
                </ul> \
            </div> \
        </span>\
    </div>'));


Всем спасибо за любую полезную информацию.

laimas 04.07.2015 03:27

Цитата:

Сообщение от murtukov
как и где можно наиболее компактно и разумно хранить этот кусок html-кода?

Удалять его вообще. Календари, html-элементы его, добавляются динамически, в цикле.

murtukov 04.07.2015 04:16

Ну элементы option и li можно добавить в цикле, а как быть с остальным?

laimas 04.07.2015 07:45

А что с каждым годом меняются названия месяцев, а с каждой неделей меняются их названия? Наверное же нет, значит какой вывод?

Deff 04.07.2015 16:14

Удобная вставка многострочного контента без переформатирования и добавок
function addContent (){ /*==123==;

<!-- Вставляемый контент -->
  <style type="text/css">
  #pun .main{
     display:none;
   }
  </style>
  <script type="text/javascript">
    alert('Test Txt')
  <\/script>
  <div id=world>
    Привет Мир!
  </div>

==123==;*/} addContent = addContent.toString().split('==123==;')[1].replace(/<\\\/script/gim,'<'+'/script');
alert(addContent)


Цитата:

Ps: При наличии данной функции в подгружаемом скрипте, - в экранирование тега <\/script> и последующего преобразование через .replace(/<\\\/script/gim,'<'+'/script'); - нет необходимости

Внутри контента недопустимы комменты типа: /* Комментарий */


Часовой пояс GMT +3, время: 08:01.