Переключатель таблиц стилей в jQuery.
В ответ на комментарий 'newbie followup' я постараюсь сделать его немного более инструктивным.
Страница, на которой я играл для тестированияв то время как запись может быть найдена здесь .
Отображение страницы
Вы захотите, чтобы ваша текущая таблица стилей отображалась в теге <link> в <head>каждой из ваших страниц.Для тега <link> потребуется идентификатор для последующего использования в 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>, который будет отправлять запрос на сервер, когда пользователь изменяет свою таблицу стилей:
<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>
Сторона сервера
Теперь, без jQuery, отправка этой формы должна получить (вы могли быизмените его на POST, если хотите) stylesheet={new stylesheet} на текущей странице.Итак, где-то в вашем загрузочном / сидячем включаемом файле, вы делаете для него проверку, пример 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
На данный момент у вас есть работающий переключатель стилей для lameлюди без 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();
});