Создавайте новые (не меняйте) таблицы стилей с помощью jQuery - PullRequest
Новая
       2

Создавайте новые (не меняйте) таблицы стилей с помощью jQuery

6 голосов
/ 19 августа 2011

У меня есть небольшой инструмент, который я создал, где вы можете отредактировать шаблон jQuery в одном поле и данные JSON в другом, а затем нажать кнопку, чтобы сразу увидеть результаты в браузере.

Я действительноНеобходимо расширить это, хотя, чтобы дизайнер мог редактировать полную таблицу стилей CSS в другом поле, и когда мы будем отображать шаблон, к нему будет применен CSS.Идея состоит в том, что, как только мы получим хорошие результаты, мы можем взять содержимое этих трех полей, поместить их в файлы и использовать их в нашем проекте.

Я нашел плагин jQuery.cssRule, но похоже, что онв основном заброшены (все ссылки никуда не деваются, и в течение трех лет не было никакого развития).Есть ли что-то лучше или это единственная игра в городе?

Примечание: мы ищем что-то, где кто-то вводит здесь традиционные данные таблицы стилей CSS, и которые сразу же используются для рендеринга на странице, и это может бытьредактируются и изменяются по желанию, старые правила исчезают, а новые используются вместо них.Я не ищу что-то, где дизайнер должен изучить синтаксис jQuery и ввести отдельные вызовы типа .css ("attribute", "value") для jQuery.

Ответы [ 4 ]

16 голосов
/ 19 августа 2011

Конечно, просто добавьте тег style к голове: 

$("head").append("<style>p { color: blue; }</style>");

См. Его в действии здесь .

Вы можете заменить текст вдинамически добавляемый тег style, используя что-то вроде этого: 

$("head").append("<style id='dynamicStylesheet'></style>");
$("#dynamicStylesheet").text(newStyleTextGoesHere);

Смотрите это в действии здесь .

4 голосов
/ 19 августа 2011

Самый простой способ достичь этого - поместить ваш пользовательский контент в <iframe>. Таким образом, изменения в CSS не затронут редактор . (Например, input { display:none; } не может сломать вашу страницу.)

Просто визуализируйте ваш HTML (включая CSS в документе <head>) и запишите его в <iframe>.

Пример: 

<iframe id="preview" src="about:blank">

var i = $('#preview')[0];
var doc = i.contentWindow || i.contentDocument;
if (doc.document) doc = doc.document;
doc.open('text/html',true);
doc.write('<!DOCTYPE html><html>...</html>');
doc.close();
1 голос
/ 19 августа 2011

звучит так, как будто вы хотите написать переводчик для css? если он вводится вручную в тексте, то использовать его позже будет так же просто, как скопировать и вставить его в файл CSS.

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

//for each css id in the text area
$.each($('textarea[name=cssTextArea]').html().split('#'), function({
  //now get each property 
  $.each($(this).split(';'), function(){
    $(elem).css({property:value});
  });
});

тогда вы могли бы написать что-нибудь для прохождения каждого элемента, который набрал ваш дизайнер, и получить текущие правила CSS для него (включая те, которые вы применили с использованием некоторого кода, подобного приведенному выше фрагменту), и создать строку CSS из того, что затем будет выведен или сохранен в БД. Это боль и много суетиться с подстроками, но, к сожалению, я не знаю более быстрого или более эффективного способа.

Надеюсь, что по крайней мере это даст вам некоторые идеи

1 голос
/ 19 августа 2011

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

$('head').append('<link rel="stylesheet" href="temp.css" type="text/css" />');
...