如何切换外部CSS文件中使用Ajax？ [英] How do I switch external css files with ajax?
问题描述
我有一对夫妇的书籍，我读了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'm wanting 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?
如果有一个教程，我已经错过了在那里，请随时给我指向该链接。 谢谢！ 乔尔
If there is a tutorial I have missed out there, please feel free to point me to that link. Thanks! Joel
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!):
1），这样做的最终目标将是有一个用户设置部分，用户可以点击一个单选按钮，决定他们是想使用我们的应用程序的配色方案。因此，我们最终会碰到这样的8个不同的CSS样式可供选择。不知道这是否会改变来实现这一目标的最好方法。
1) 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 are wanting 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.
2）用户登录到他们的帐户，并改变它们的设置在那里。我希望自己变成棒，直到他们决定再次更改样式表。我能做到这一点手动MySQL作为我们有一个叫样式表与编号为各种用户样式表...所以在现实中，什么我需要做的是改变了异步这样的CSS将被立即装载MySQL的价值。
2) 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.
再次抱歉初期缺乏信息。
Again, sorry for the initial lack of information.
推荐答案
在回应新手随访的评论，我会尽量做到多一点指导。
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.
你会想你的当前样式表显示在＆LT;链接＆GT; 标记中的＆LT; HEAD＆GT; 。该＆LT;链接＆GT; 标记都需要一个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' />
更改preference
一旦你显示的用户样式表，您需要一种方法来改变它。创建一个＆LT;形式GT; 当用户改变他们的样式，将请求发送到服务器：
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，如果你喜欢）样式= {新的样式表} 当前页面上。如此在你的引导/站点范围包括文件，你去做个检查吧，一个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();
}
}
现场preVIEW
在这一点上，你有一个正常运作的styleswitcher的瘸腿人没有的JavaScript。现在您可以添加一些jQuery，使这一切发生的多了几分优雅。您将要使用的jQuery插件形式来使一个很好的当作ajaxForm（ ）的功能，将处理提交表单。添加了jQuery和jQuery表单库到页面：
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文件中使用Ajax？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
