我用它jquery-style-switcher.js
来改变一些元素的风格.当我点击页面的颜色样式不会改变时,在此页面的源代码中将此类添加jssError error level0
到ul
包含颜色的标记中.此代码在HTML页面中工作,但在CMS中没有!我通过chrome调试这个js文件,并了解当一般html文件中的这个js文件变坏:一个事件调用它执行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值未定义!!!!
为什么defaultTheme未定义?如果你能回答这个问题,问题就会解决.
Github链接
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[, path[, 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, sPath, 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 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:
你可以看到一般网站的模板.我在皮肤中使用这个模板,dotnetnuke7
出现了这个问题.
下载我的代码