JQuery UI: лучший способ загрузить HTML-разметки?

голоса
2

Какой самый лучший способ загрузить HTML-разметку для пользовательского JQuery UI виджета?

До сих пор я видел элементы просто созданные с использованием строк (то есть $(...).wrap('<div></div>')) , который отлично подходит для чего - то простого. Тем не менее, это делает его чрезвычайно трудно изменить позже для более сложных элементов.

Это кажется довольно распространенной проблемой, но я также знаю, что библиотека JQuery UI достаточно новая, что не может быть широко принято решением для этого. Есть идеи?

Задан 09/12/2008 в 23:25
источник пользователем
На других языках...                            


4 ответов

голоса
6

Кое-что весьма аккуратным, чтобы сделать это:

var newDiv = $("<div></div>"); //Create a new element and save a reference
newDiv.attr("id","someid").appendTo("body");

Таким образом, вы создаете элемент, и хранить свою ссылку в переменной, для последующего использования.

Ответил 09/12/2008 в 23:49
источник пользователем

голоса
2

Если у вас есть большое количество сложного HTML, и не хотите иметь дело с закодированными строками в коде JavaScript, вы можете поместить его в отдельном HTML файл и использовать функцию загрузки Ajax .

Это цепное, так что вы можете загрузить HTML-файл (все это, или выделенный фрагмент), вводите его в текущий DOM, и сохранить право на движение.

Ответил 21/09/2009 в 23:45
источник пользователем

голоса
1

Много раз для очень сложных шаблонов я буду просто хранить HTML блоки как строки в объекты JSON для последующего доступа ... например:

var temp = {
  header : "<div class='foo'><h3>{HEADER}</h3></div>",
  content : "<div class='bar'><p>{COPY}</p></div>"
}

А потом просто выполнить некоторую замену на тех, когда все возвращаются. Таким образом, разметка отделена несколько отличается от логики, чтобы загрузить данные, так что замена из шаблонов и т.д. может быть немного быстрее.

var text = "I am the header text";
var head = new String(temp.header);
$(target).append(head.replace("{HEADER}",text));

Во всяком случае, этот подход работает хорошо для меня с AJAX виджетов и такого рода вещи, где есть вероятность того, что конструкция может радикально изменить вокруг.

Ответил 21/09/2009 в 23:19
источник пользователем

голоса
0

Популярный, эффективный метод для вывода всех ваших дополнительной разметки (все, что вам может понадобиться позже) в нижней части страницы в тегах сценария, так что разметка не отображается в браузере.

<script type="text/template" id="template-example">
    <!-- All of your markup here -->
    <% // do some JavaScript in here... %>
    <%= echo_this_variable %>
</script>

После этого вы можете получить разметку с помощью JQuery ...

var markup = $('#template-example').html();

И разобрать те , JS примеры я бросил там , используя шаблонизатор, например, один в Underscore.js (который я рекомендую), или один из них JQuery в этом ответе: JQuery шаблонных двигателей

Повеселись!

Ответил 27/01/2013 в 23:46
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more