How to create a multi-option Style Switcher using jQuery?
I need to create a multi-option Style Switcher for my WordPress theme, but I can't get anything working (see code below). By multi-option I mean this: The user should be able to select a custom color, pattern and font independently of each other (a simple css link swap-out won't do). All this is far beyond my current skill level, can anyone help me in the right direction?
Basic Markup:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Style Switcher</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/plugins.css">
</head>
<body id="top">
<div id="wrapper">
<p>The quick brown fox jumps over the lazy dog.</p>
</div>
<script src="js/plugins.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
scripts.js (2nd attempt) Adapted from this theme.
// DOM READY, NO CONFLICT REMAP
jQuery(document).ready(function($){
// THEME NAME
var themeID='mytheme';
// STYLE SWITCHER MARKUP
$('body').append(
'<div id="ss">'+
'<p>'+
'<select id="ssColor" name="ss-color">'+
'<option value="red">Red</option>'+
'<option value="green">Green</option>'+
'<option value="blue">Blue</option>'+
'</select>'+
'</p>'+
'<p>'+
'<select id="ssPattern" name="ss-pattern">'+
'<option value="pat-a">Pattern A</option>'+
'<option value="pat-b">Pattern B</option>'+
'<option value="pat-c">Pattern C</option>'+
'</select>'+
'</p>'+
'<p>'+
'<a id="ssReset" href="">Reset</a>'+
'</p>'+
'</div>'
);
// RESET
$('#ssReset').click(function(){
var i=0;
var cookies = new Array();
$('#ss select').each(function(){
var cookie = $(this).attr('name');
cookies[i] = cookie;
i++;
});
});
// ???
var cookiesMax=cookies.length;
for(var i=0, max=cookiesMax;开发者_StackOverflow i<max; ++i){
$.dough(themeID+'-'+cookies[i],'remove');
}
// APPLY CHANGES FUNCTION
function applyChanges(id,selectName,selectValue){
var cookieName=id+'-'+selectName;
$.dough(cookieName,selectValue);
location.reload();
}
// PROCESS
$('#ss select').change(function(){
var selectName = $(this).attr('name');
var selectValue = $(this).val();
applyChanges(themeID,selectName,selectValue);
});
});
scripts.js (1st attempt) Adapted from this tutorial.
// DOM READY, NO CONFLICT REMAP
jQuery(document).ready(function($){
// APPLY STYLES FUNCTION
function apply_styles(bgcolor,bgpattern){
$('html').css('backgroundColor','#'+bgcolor);
$('html').css('backgroundImage','url(img/'+bgpattern+')');
}
// CREATE COOKIE FUNCTION
function create_cookie(bgcolor,bgpattern){
$.dough('bgcolor','remove');
$.dough('bgcolor',bgcolor);
$.dough('bgpattern','remove');
$.dough('bgpattern',bgpattern);
}
// READ COOKIES ELSE DEFAULTS
var cbgcolor=$.dough('bgcolor');
var cbgpattern=$.dough('bgpattern');
if(cbgcolor!=undefined&&cbgpattern!=undefined){
apply_styles(cbgcolor,cbgpattern);
}else{
apply_styles('fff','default.gif');
}
// STYLE SWITCHER
$('body').append(
'<div id="style_switcher">'+
'<p><strong id="colorpicker_box"><em></em></strong></p>'+
'<ul id="patterns">'+
'<li><img src="css/img/spat1.gif" rel="pat1.gif" alt=""></li>'+
'<li><img src="css/img/spat2.gif" rel="pat2.gif" alt=""></li>'+
'<li><img src="css/img/spat3.gif" rel="pat3.gif" alt=""></li>'+
'</ul>'+
'<p><strong id="save_css">Save</strong></p>'+
'</div>'
);
// COLORPICKER
$('#colorpicker_box').ColorPicker({
onShow:function(colpkr){$(colpkr).fadeIn(500);return false;},
onHide:function(colpkr){$(colpkr).fadeOut(500);return false;},
onChange:function(hsb,hex,rgb){
$('#colorpicker_box em').css({backgroundColor:'#'+hex});
}
});
// PROCESS VALUES
var pickerValue= // store 'hex' from COLORPICKER above, but how?
var patternValue= // store rel="" value of CLICKED '#patterns li img'
$('#save_css').click(function(){
apply_styles(pickerValue,patternValue);
});
});
You need to move your "PROCESS VALUES" bit into the onChange event in the colour picker, since the code is executed straight away otherwise and you want to act when the colour picked is KNOWN, then process that value.
$('#colorpicker_box').ColorPicker({
onShow:function(colpkr){$(colpkr).fadeIn(500);return false;},
onHide:function(colpkr){$(colpkr).fadeOut(500);return false;},
onChange:function(hsb,hex,rgb){
// PROCESS VALUES
var patternValue= // store rel="" value of CLICKED '#patterns li img'
$('#save_css').click(function(){
apply_styles('#' + hex, patternValue);
});
$('#colorpicker_box em').css({backgroundColor:'#'+hex});
}
});
I'm not sure I get your comment "store rel="" value of CLICKED '#patterns li img" -- you've not even got a click event on any of the images, nor is there a rel value on them.
Ok here we go:
<head>
<link class="css" href="red.css" /> <!-- default style give url and whats not -->
<script>
$('select').change(function (){
$('.css').remove();
var val = $(this).val();
$('<link class="css" href="'+val+'" />').appendTo('head');
});
</script>
</head>
<body>
<select>
<option value="black">black</option>
<option value="red">red</option>
</select>
</body>
Besides you have jquery theme switcher anyways why mess around ? lol
加载中,请稍侯......
精彩评论