如何切换外部CSS文件？ [英] How do I switch external CSS files?
问题描述
我有几本书正在阅读AJAX，但还是很新的。所有教程和这些书都有无处不在的例子：自动填充搜索栏和异步表单验证器。这些都很棒，但不是我想要的。具体来说，我想单击一个按钮并在我的标题包中切换外部CSS文件。这可能吗？好吧......我知道这是可能的，但你是怎么做到的？
I've got a couple books that I'm reading on AJAX, but still quite new. All the tutorials and these books have the ubiquitous examples of: an auto-populating search bar and an asynchronous form validator. Those are both great, but not what I'm looking for. Specifically, I want to click a button and switch the external CSS file in my header include. Is this possible? Well... I know it's possible, but how do you do it?
PS：我在这个项目中有jQuery，所以如果那里有内置的东西，更好！
PS: I have jQuery in this project, so if there is something built in from there, even better!
PPS：我意识到我没有收到重要信息（不要开枪！）：
PPS: I'm realizing I have not included important information (don't shoot me!):
-
最终目标是拥有一个用户设置部分，用户可以单击一个单选按钮并确定他们想要用于我们的应用程序的颜色方案。所以我们最终会有8种不同的CSS样式可供选择。不确定这是否会改变实现此目的的最佳方法。
The final goal of this will be to have a user settings section where the user can click a radio button and decide the color scheme they want to use for our app. So we will eventually have something like 8 different CSS styles to choose from. Not sure if this will alter the best method to achieve this.
用户正在登录他们的帐户并在那里更改他们的设置。我希望他们的更改能够坚持，直到他们决定再次更改样式表。我可以在MySQL中手动执行此操作，因为我们有一个称为样式表的表，其中各种用户样式表都已编号...所以实际上，我需要做的是异步更改MySQL值，以便立即加载CSS。
The user is logging into their account and changing their setting there. I want their changes to 'stick' until they decide to change the stylesheet again. I can do this manually in MySQL as we have a table called stylesheets with the various user stylesheets numbered... so in actuality, what I'm needing to do is change that MySQL value asynchronously so the CSS is immediately loaded.
推荐答案
jQuery中的样式表切换器。
为了回应'新手跟进'的评论，我会尝试让它更具说明性。
Stylesheet Switcher in jQuery.
In response to the 'newbie followup' comment, I will try to make it a little more instructional.
我正在玩的页面进行测试写作可以在这里找到。
The page I was playing with to test on while writing can be found here.
您希望将当前样式表显示在< link> 标记中每个页面的< head> 。 < link> 标记需要一个ID，以便稍后在JavaScript中参考。类似于：
You're going to want to have your current stylesheet displayed in a <link> tag in the <head> of each of your pages. The <link> tag will need an id for reference later in JavaScript. Something like:
<?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> ，当用户更改样式表时，它会向服务器发送请求：
Changing the preference
Once you are displaying the users stylesheet, you need a way to change it. Create a <form> that will send a request to the server when the user changes their stylesheet:
<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} 。所以在你的bootstrap / sitewide包含文件的某个地方，你要检查它，一个php示例：
Server Side
Now, without jQuery, submitting this form should GET (you could change it to POST if you like) stylesheet={new stylesheet} on the current page. So somewhere in your bootstrap / sitewide include file, you do a check for it, a php sample:
$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();
}
}
实时预览
此时，你有一个功能齐全的样式切换器，适用于没有javascript的跛脚的人。现在你可以添加一些jQuery来使这一切更优雅地发生。你会想要使用< a href =http://jquery.malsup.com/form/ =nofollow noreferrer> jQuery Form Plugin 做一个不错的 ajaxForm（） function，将处理提交表单。将jQuery和jQuery Form库添加到页面：
Live Preview
At this point, you have a functioning styleswitcher for the lame people without javascript. Now you can add some jQuery to make this all happen a little more elegantly. You'll want to use the jQuery Form Plugin to make a nice ajaxForm() function, that will handle submitting the form. Add the jQuery and jQuery Form library to the page:
<script type='text/javascript' src='/js/jquery.js'></script>
<script type='text/javascript' src='/js/jquery.form.js'></script>
现在我们已经包含了库 -
Now that we have the libraries included -
$(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();
});
这篇关于如何切换外部CSS文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
