Как я переключаю внешние файлы CSS?
У меня есть пара книг, которые я читаю на Ajax, но все еще довольно новый. Все учебные руководства и эти книги имеют повсеместные примеры: панель поиска автозаполнения и асинхронный блок проверки допустимости формы. Это является оба великим, но не, что я ищу. А именно, я хочу нажать кнопку и переключиться, внешний файл CSS в моем заголовке включают. Действительно ли это возможно? Хорошо... Я знаю, что это возможно, но как дела это?
PS: у Меня есть jQuery в этом проекте, поэтому если существует что-то, встроил оттуда, еще лучше!
PPS: я понимаю, что не включал важную информацию (не стреляйте в меня!):
Заключительная цель этого будет состоять в том, чтобы иметь пользовательский раздел настроек, где пользователь может нажать переключатель и решить цветовую схему, они хотят использовать для нашего приложения. Таким образом, у нас в конечном счете будет что-то как 8 различных стилей CSS для выбора из. Не уверенный, если это изменит лучший метод для достижения этого.
Пользователь входит в их учетную запись и изменяет их настройки там. Я хочу, чтобы их изменения 'придерживались', пока они не решают изменить таблицу стилей снова. Я могу сделать это вручную в MySQL, поскольку у нас есть таблица, названная таблицами стилей с различными пользовательскими таблицами стилей, пронумерованными... так в действительности, что я должен сделать, изменить то значение MySQL асинхронно, таким образом, CSS сразу загружается.
6 ответов
Переключатель таблиц стилей в jQuery.
В ответ на комментарий о «новичках» я постараюсь сделать его более информативным.
Страницу, с которой я играл для тестирования во время написания, можно найти здесь .
Отображение страницы
Вы захотите, чтобы ваша текущая таблица стилей отображалась в теге в каждой из ваших страниц. Тегу потребуется идентификатор для использования в дальнейшем в JavaScript.Что-то вроде:
<?php
// Somewhere in the server side code, $current_stylesheet is read from the user's
// "preferences" - most likely from a database / session object
$current_stylesheet = $user->stylesheet;
?>
<link href='<?php echo $current_stylesheet ?>' rel='stylesheet' type='text/css' id='stylelink' />
Изменение предпочтений
После того, как вы открыли таблицу стилей пользователей, вам нужен способ ее изменить. Создайте , который будет отправлять запрос на сервер, когда пользователь изменяет свою таблицу стилей:
<form method="GET" id="style_form" >
<select name="stylesheet" id="styleswitch">
<option value="css1.css">Black & White</option>
<option value="css2.css" selected="selected">Shades of Grey</option>
</select>
<input value='save' type='submit' />
</form>
Server Side
Теперь, без jQuery, отправка этой формы должна GET (вы можете изменить ее на POST, если хотите) stylesheet = {новая таблица стилей} на текущей странице. Итак, где-то в вашем включаемом файле bootstrap / site вы проверяете его, образец php:
$styles = array(
'css1.css' => 'Black & White',
'css2.css' => 'Shades of Grey',
);
if (!empty($_GET["sytlesheet"]) {
// VALIDATE IT IS A VALID STYLESHEET - VERY IMPORTANT
// $styles is the array of styles:
if (array_key_exists($_GET["stylesheet"], $styles)) {
$user->stylesheet = $_GET["stylesheet"];
$user->save();
}
}
Live Preview
На этом этапе у вас есть работающий переключатель стилей для хромых людей без javascript. Теперь вы можете добавить немного jQuery, чтобы все это происходило немного более элегантно. Вы захотите использовать jQuery Form Plugin , чтобы создать красивую функцию ajaxForm () , которая будет обрабатывать отправку формы. Добавьте на страницу библиотеки jQuery и jQuery Form:
<script type='text/javascript' src='/js/jquery.js'></script>
<script type='text/javascript' src='/js/jquery.form.js'></script>
Теперь, когда у нас есть библиотеки -
$(function() {
// When everything has loaded - this function will execute:
$("#style_form").ajaxForm(function() {
// the style form will be submitted using ajax, when it succeeds:
// this function is called:
$("#thediv").text('Now Using: '+$('#styleswitch').val());
});
$("#styleswitch").change(function() {
// When the styleswitch option changes, switch the style's href to preview
$("#stylelink").attr('href', $(this).val());
// We also want to submit the form to the server (will use our ajax)
$(this).closest('form').submit();
});
// now that you have made changing the select option submit the form,
// lets get rid of the submit button
$("#style_form input[type=submit]").remove();
});
Добавьте атрибут ID Атрибут К Ссылке CSS Тег Тег Тег Тег Для манипулирования тегом с использованием JavaScript:
<link id="cssfile" href="css/avocado.css" type="text/css" rel="stylesheet">
JavaScript для установки атрибута HREF напоминает:
document.getElementById('cssfile').href = 'css/carrot.css';
Цвета могут быть подрезаны пользователем, нажав на ссылку:
<a href="#"
onclick="document.getElementById('cssfile').href='css/carrot.css';">Carrots</a>
, изменяя тип носителя, это также может позволить пользователям быстро меняться макеты печати, предпочтительным макетом на мобильных телефонах (или планшетах) и многое другое.
Это решение не требует jQuery.
Смотрите также: http://www.webmasterworld.com/forum91/4554.htm
Вот пример, который использует jQuery.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#change-css').click(function(e){
e.preventDefault();
$('link[rel="stylesheet"]').attr('href', 'style2.css');
});
});
</script>
</head>
<body>
<a id="change-css" href="#">change css</a>
</body>
</html>
Оперативная линия - это $ («Ссылка [REL =» стильют «]»). Attr ('href', "style2.css '); . Это находит любой тег [ссылка> , который имеет ol = «stylesheheet» , и меняет атрибут HREF в Style2.css .
Это не имеет ничего общего с Ajax. Он имеет все, что связано с манипуляциями JS и DOM (некоторые ключевые слова для поиска уроков).
Я использую MOOTOOLS, который является библиотекой JS, и она имеет встроенную функцию для этого.
Если это вручную, то ваше дело, тогда я бы просто добавил или отрегулировать атрибут href существующего элемент.
<link rel="stylesheet" href="http://sstatic.net/so/all.css?v=6063" id='bobo'>
...
...
...
<script>document.getElementById('bobo').href="http://my.doamin.com/new.css";</script>
Для добавления нового css-файла на страницу просто создайте новый тэг:
function addCss (url) {
var s = document.createElement('link');
s.rel = 'stylesheet';
s.type = 'text/css';
s.href = url;
document.getElementsByTagName('head')[0].appendChild(s);
}
addCss('http://path/to/stylesheet.css');
Для удаления css-файла со страницы просто удалите к нему:
function removeCss (search) {
var css = document.getElementsByTagName('link');
for (var i=0;i<css.length;i++) {
var c = css[i];
if (c.rel === 'stylesheet' || c.type === 'text/css') {
if (c.href && c.href.match(search)) {
c.parentNode.removeChild(c);
}
}
}
}
// Remove all css that contains 'mycss_', can use regexp if necessary:
removeCss(/mycss_.*\.css/);
Это зависит!
Если файлы и каталоги распределены более или менее равномерно, можно показать грубый процесс, предполагая, что каждый каталог верхнего уровня займет одинаковое количество времени. Но если они не распределены равномерно, вы не можете узнать об этом дешево. Вы либо должны знать примерно, насколько заполнен каждый каталог заранее, или вы должны os.walk всю вещь дважды (но это полезно, только если ваша фактическая обработка занимает гораздо больше времени, чем os.walk сам делает).
Это означает, что у вас есть 4 каталога верхнего уровня, и каждый из них содержит 4 файла. Если предполагается, что каждый верхний уровень dir занимает 25% хода выполнения, а каждый файл занимает еще 25% хода выполнения для этого dir, можно показать хороший индикатор хода выполнения. Но если последний поддир будет содержать гораздо больше файлов, чем первые несколько, ваш индикатор прогресса достигнет 75%, прежде чем вы узнаете об этом. Вы не можете действительно исправить, что если os.walk сам является узким местом (не ваша обработка) и это произвольный дерево каталогов (не тот, где вы знаете заранее примерно, как долго каждое поддерево собирается занять).
И, конечно, это при условии, что стоимость здесь примерно одинакова для каждого файла...
-121--2835534-Чтение тела объекта ответа на ошибку. Это может иметь намек на то, что происходит.
Код для этого следующий:
catch(WebException e)
{
if (e.Status == WebExceptionStatus.ProtocolError)
{
WebResponse resp = e.Response;
using(StreamReader sr = new StreamReader(resp.GetResponseStream()))
{
Response.Write(sr.ReadToEnd());
}
}
}
Это должно показать полное содержимое ответа на ошибку.
-121--1516592-Можно также загрузить как CSS-файлы, так и предисловие всех селекторов ко второму файлу с именем основного класса.
body.secondsheet {}
body.secondsheet a {}
body.secondsheet hr {}
Затем необходимо только добавить/удалить класс «secondsheet» в тэг для переключения таблиц стилей.