我使用
jquery-style-switcher.js来改变某些元素的样式.当我点击页面的颜色样式不会更改,并且在此页面的源代码中,将此classjssError错误level0添加到包含颜色的ul标签.此代码在HTML页面中工作,但在CMS中无效！
我通过chrome调试这个js文件,并了解当这个js文件在一般的html文件运行时：一个事件调用它addClickEvents执行,但在我的网站使用这个模板的网站皮肤：addClickEvents函数不执行.调用addClickEvents的函数是init函数
我通过chrome调试这个js文件,并了解当这个js文件在一般的html文件运行时：一个事件调用它addClickEvents执行,但在我的网站使用这个模板的网站皮肤：addClickEvents函数不执行.调用addClickEvents的函数是init函数
init: function ($root,config) {
this.$root = $root;
this.config = config ? config : {};
this.setDefaultTheme();
if(this.defaultTheme) {
// try cookies
if (this.config.cookie) {
this.checkCookie();
}
// try hover
if (this.config.hasPreview) {
this.addHoverEvents();
}
// finally,add click events
this.addClickEvents();
} else {
this.$root.addClass('jssError error level0');
}
}
在这个函数(init)中：defaultTheme值是undefined !!!!
为什么defaultTheme是未定义的？如果你能回答这个问题,问题就会解决.
@L_404_1@
jquery-style-switcher.js：
(function ($) {
var jStyleSwitcher,_defaultOptions = {
hasPreview: true,defaultThemeId: 'jssDefault',fullPath: 'css/',cookie: {
expires: 30,isManagingLoad: true
}
},// private
_cookieKey = 'jss_selected',_docCookies = {};
/*\
|*|
|*| :: cookies.js ::
|*|
|*| A complete cookies reader/writer framework with full unicode support.
|*|
|*| revision #1
|*|
|*| https://developer.mozilla.org/en-US/docs/Web/API/document.cookie
|*|
|*| This framework is released under the GNU Public License,version 3 or later.
|*| http://www.gnu.org/licenses/gpl-3.0-standalone.html
|*|
|*| Syntaxes:
|*|
|*| * docCookies.setItem(name,value[,end[,path[,domain[,secure]]]])
|*| * docCookies.getItem(name)
|*| * docCookies.removeItem(name[,domain]])
|*| * docCookies.hasItem(name)
|*| * docCookies.keys()
|*|
\*/
_docCookies = {
getItem: function (sKey) {
if (!sKey) {
return null;
}
return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g,"\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"),"$1")) || null;
},setItem: function (sKey,sValue,vEnd,sPath,sDomain,bSecure) {
if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) {
return false;
}
var sExpires = "";
if (vEnd) {
switch (vEnd.constructor) {
case Number:
sExpires = vEnd === Infinity ? "; expires=Fri,31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
break;
case String:
sExpires = "; expires=" + vEnd;
break;
case Date:
sExpires = "; expires=" + vEnd.toUTCString();
break;
}
}
document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
return true;
},removeItem: function (sKey,sDomain) {
if (!this.hasItem(sKey)) {
return false;
}
document.cookie = encodeURIComponent(sKey) + "=; expires=Thu,01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "");
return true;
},hasItem: function (sKey) {
if (!sKey) {
return false;
}
return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g,"\\$&") + "\\s*\\=")).test(document.cookie);
},keys: function () {
var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g,"").split(/\s*(?:\=[^;]*)?;\s*/);
for (var nLen = aKeys.length,nIdx = 0; nIdx < nLen; nIdx++) {
aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]);
}
return aKeys;
}
};
jStyleSwitcher = function ($root,config) {
return this.init($root,config);
};
jStyleSwitcher.prototype = {
/**
* {Object} DOM reference to style option list
*/
$root: null,/**
* {Object} configs for the style switcher
*/
config: {},/**
* {Object} jQuery reference to <link> tag for swapping CSS
*/
$themeCss: null,/**
* {String} default theme page was loaded with
*/
defaultTheme: null,init: function ($root,config) {
this.$root = $root;
this.config = config ? config : {};
this.setDefaultTheme();
if(this.defaultTheme) {
// try cookies
if (this.config.cookie) {
this.checkCookie();
}
// try hover
if (this.config.hasPreview) {
this.addHoverEvents();
}
// finally,add click events
this.addClickEvents();
} else {
this.$root.addClass('jssError error level0');
}
},setDefaultTheme: function () {
this.$themeCss = $('link[id=' + this.config.defaultThemeId + ']');
if(this.$themeCss.length) {
this.defaultTheme = this.$themeCss.attr('href');
}
},resetStyle: function() {
this.updateStyle(this.defaultTheme);
},updateStyle: function(newStyle) {
this.$themeCss.attr('href',newStyle);
},getFullAssetPath: function(asset) {
return this.config.fullPath + asset + '.css';
},checkCookie: function () {
var styleCookie;
// if using cookies and using JavaScript to load css
if (this.config.cookie && this.config.cookie.isManagingLoad) {
// check if css is set in cookie
styleCookie = _docCookies.getItem(_cookieKey);
if (styleCookie) {
newStyle = this.getFullAssetPath(styleCookie);
// update link tag
this.updateStyle(newStyle);
// update default ref
this.defaultTheme = newStyle;
}
}
},addHoverEvents: function () {
var self = this;
this.$root.find('a').hover(
function () {
var asset = $(this).data('theme'),newStyle = self.getFullAssetPath(asset);
// update link tag
self.updateStyle(newStyle);
},function () {
// reset link tag
self.resetStyle();
}
);
},addClickEvents: function () {
var self = this;
this.$root.find('a').click(
function () {
var asset = $(this).data('theme'),newStyle = self.getFullAssetPath(asset);
// update link tag
self.updateStyle(newStyle);
// update default ref
self.defaultTheme = newStyle;
// try to store cookie
if (self.config.cookie) {
_docCookies.setItem(_cookieKey,asset,self.config.cookie.expires,'/');
}
}
);
}
};
$.fn.styleSwitcher = function (options) {
return new jStyleSwitcher(this,$.extend(true,_defaultOptions,options));
};
})(jQuery);
本页的HTML页面：
<div id="colour-variations">
<a class="option-toggle"><i class="icon-gear"></i></a>
<h3>Preset Colors</h3>
<ul class="jssError error level0">
<li><a href="javascript: void(0);" data-theme="style"></a></li>
<li><a href="javascript: void(0);" data-theme="pink"></a></li>
<li><a href="javascript: void(0);" data-theme="blue"></a></li>
<li><a href="javascript: void(0);" data-theme="turquoise"></a></li>
<li><a href="javascript: void(0);" data-theme="orange"></a></li>
<li><a href="javascript: void(0);" data-theme="lightblue"></a></li>
<li><a href="javascript: void(0);" data-theme="brown"></a></li>
<li><a href="javascript: void(0);" data-theme="green"></a></li>
</ul>
</div>
你可以看到template是一般网站.我在皮肤中使用这个模板来进行dotnetnuke7,这个问题出现了.
解决方法
你已经做好了工作,只需要解决这个问题.
首先,当处理点击颜色主题方形图标时,您的代码会抛出此JS错误：
Uncaught TypeError: Cannot read property 'top' of undefined
在您的main.js中,更改clickMenu功能.调用$(‘html,body’).在必须定义该部分的条件下生成动画.
var clickMenu = function() {
$('a:not([class="external"])').click(function(event){
var section = $(this).data('nav-section'),navbar = $('#navbar');
if(section){ // <- this wrap condition
$('html,body').animate({
scrollTop: $('[data-section="' + section + '"]').offset().top
},2000);
}
if ( navbar.is(':visible')) {
navbar.removeClass('in');
navbar.attr('aria-expanded','false');
$('.js-fh5co-nav-toggle').removeClass('active');
}
event.preventDefault();
return false;
});
};
其次,在你的switcher.html中,在第799行,你已经离开(可能是有意的)#“颜色变化”元素中的“jssError error level0”
<ul class="jssError error level0"> ... </ul>
所以删除这些类：
<ul> ... </ul>
最后一点：添加< link>在< head>
<link type="text/css" rel="stylesheet" id="theme-switch" href="style.css">
插件需要正确初始化.没有这一行是你得到“jssError error level0”错误的原因.
我也做了一个.zip with working code.希望它有帮助！
