Joe*_*oel 5 javascript css ajax jquery
我有几本书,我正在阅读AJAX,但还是很新的.所有教程和这些书都有无处不在的例子:自动填充搜索栏和异步表单验证器.这些都很棒,但不是我想要的.具体来说,我想单击一个按钮并在我的标题包中切换外部CSS文件.这可能吗？嗯......我知道这是可能的,但是你怎么做的？
PS:我在这个项目中有jQuery,所以如果有内置的东西,那就更好了!
PPS:我意识到我没有收录重要信息(不要开枪!):
最终目标是拥有一个用户设置部分,用户可以单击一个单选按钮并确定他们想要用于我们的应用程序的颜色方案.所以我们最终会有8种不同的CSS样式可供选择.不确定这是否会改变实现这一目标的最佳方法.
用户正在登录他们的帐户并在那里更改他们的设置.我希望他们的更改能够"坚持",直到他们决定再次更改样式表.我可以在MySQL中手动执行此操作,因为我们有一个名为样式表的表,其中各种用户样式表都已编号...所以实际上,我需要做的是异步更改MySQL值,以便立即加载CSS.
eli*_*iah 16
id向CSS link标记添加属性以使用JavaScript操作标记:
<link id="cssfile" href="css/avocado.css" type="text/css" rel="stylesheet">
设置href属性的Javascript 类似于:
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
为了回应“新手跟进”评论，我会尽力使其更具指导性。
我在写作时正在玩测试的页面可以在这里找到。
您将希望将当前的样式表显示在每个页面的<link>标签中。<head>该<link>标签需要一个 id 以便稍后在 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>
stylesheet={new stylesheet}现在，如果没有 jQuery，提交此表单应该在当前页面上GET（如果您愿意，可以将其更改为 POST） 。因此，在您的 bootstrap/sitewide include 文件中的某个位置，您可以对其进行检查，这是一个 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();
}
}
至此，对于没有 javascript 的跛脚用户来说，您已经有了一个可以正常运行的样式切换器。现在您可以添加一些 jQuery 来使这一切变得更加优雅。您将需要使用jQuery 表单插件来创建一个很好的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();
});