Я использую jquery-style-switcher.js
для изменения стиля некоторых элементов. Когда я нажимаю на цвет, стиль страницы не меняется, и в источнике этой страницы добавлен этот тег classjssError error level0
to ul
, содержащий цвета. Эти коды работали в HTML-странице, но в CMS нет! Я отлаживаю этот js-файл с помощью chrome и понимаю, что когда этот 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');
}
}
В этой функции (инициализация): значение defaultTheme не определено !!!!
Почему defaultTheme не определен? если вы можете ответить на этот вопрос, проблема будет решена.
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 <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>
Вы можете увидеть шаблон, который является общим веб-сайтом. Я использую этот шаблон в скине для dotnetnuke7
и появилась эта проблема.
style.css
,pink.css
...green.css
- person zer00ne   schedule 25.12.2015default.css
. У вас есть проблемы с этим плагином, который переключает стили, но вы вообще не предоставляете CSS. Какие правила есть у этих классов?jssError
,error
,level0
,colour-variations
,option-toggle
и т. д. Это изображение ничего не показывает нам о базовом коде. - person zer00ne   schedule 25.12.2015