问题描述
您好，我正在使用jQuery SelectBox插件0.3（https://github.com/riverside/select-box）开发一个joomla模块。 jQuery SelectBox插件将具有<option>元素的html selectBox转换为html <div> <ul> <li>元素，从而对其进行样式设置。有Javascript的预定义默认选项。他们一切都还好，但我想在默认选项中添加一个额外的类选项。我想向<li>元素添加一个类。这应该作为一个选项添加，因为我想在模块的default.PHP中使用它，并使该选项成为动态PHP变量。这将提供单独的父菜单，更深的父菜单项，并允许对它们进行不同样式设置。提前致谢
这是js文件
/*!
* jQuery SelectBox plugin 0.3
*
* copyright 2011-2015,Dimitar Ivanov (http://www.bulgaria-web-developers.com/projects/javascript/selectBox/)
* Licensed under the MIT (http://www.opensource.org/licenses/mit-license.PHP) license.
*
* Date: Sat Nov 21 23:20:59 2015 +0300
*/
(function ($,undefined) {
var PROP_NAME = 'selectBox',FALSE = false,TRUE = true;
/**
* SelectBox manager.
* Use the singleton instance of this class,$.selectBox,to interact with the select Box.
* Settings for (groups of) select Boxes are maintained in an instance object,* allowing multiple different settings on the same page
*/
function SelectBox() {
this._state = [];
this._defaults = { // Global defaults for all the select Box instances
classHolder: "sbHolder",classHolderdisabled: "sbHolderdisabled",classSelector: "sbSelector",classOptions: "sbOptions",classGroup: "sbGroup",classSub: "sbSub",classdisabled: "sbdisabled",classtoggleOpen: "sbToggleOpen",classtoggle: "sbToggle",classFocus: "sbFocus",speed: 200,effect: "slide",// "slide" or "fade"
onChange: null,//Define a callback function when the selectBox is changed
onopen: null,//Define a callback function when the selectBox is open
onClose: null //Define a callback function when the selectBox is closed
};
}
$.extend(SelectBox.prototype,{
/**
* Is the first field in a jQuery collection open as a selectBox
*
* @param {Object} target
* @return {Boolean}
*/
_isOpenSelectBox: function (target) {
if (!target) {
return FALSE;
}
var inst = this._getInst(target);
return inst.isOpen;
},/**
* Is the first field in a jQuery collection disabled as a selectBox
*
* @param {HTMLElement} target
* @return {Boolean}
*/
_isdisabledSelectBox: function (target) {
if (!target) {
return FALSE;
}
var inst = this._getInst(target);
return inst.isdisabled;
},/**
* Attach the select Box to a jQuery selection.
*
* @param {HTMLElement} target
* @param {Object} settings
*/
_attachSelectBox: function (target,settings) {
if (this._getInst(target)) {
return FALSE;
}
var $target = $(target),self = this,inst = self._newInst($target),sbHolder,sbSelector,sbToggle,sbOptions,s = FALSE,optGroup = $target.find("optgroup"),opts = $target.find("option"),olen = opts.length;
$target.attr("sb",inst.uid);
$.extend(inst.settings,self._defaults,settings);
self._state[inst.uid] = FALSE;
$target.hide();
function cloSEOthers() {
var key,sel,uid = this.attr("id").split("_")[1];
for (key in self._state) {
if (key !== uid) {
if (self._state.hasOwnProperty(key)) {
sel = $("select[sb='" + key + "']")[0];
if (sel) {
self._closeSelectBox(sel);
}
}
}
}
}
sbHolder = $("<div>",{
"id": "sbHolder_" + inst.uid,"class": inst.settings.classHolder,"tabindex": $target.attr("tabindex")
});
sbSelector = $("<a>",{
"id": "sbSelector_" + inst.uid,"href": "#","class": inst.settings.classSelector,"click": function (e) {
e.preventDefault();
cloSEOthers.apply($(this),[]);
var uid = $(this).attr("id").split("_")[1];
if (self._state[uid]) {
self._closeSelectBox(target);
} else {
self._openSelectBox(target);
}
}
});
sbToggle = $("<a>",{
"id": "sbToggle_" + inst.uid,"class": inst.settings.classtoggle,[]);
var uid = $(this).attr("id").split("_")[1];
if (self._state[uid]) {
self._closeSelectBox(target);
} else {
self._openSelectBox(target);
}
}
});
sbToggle.appendTo(sbHolder);
sbOptions = $("<ul>",{
"id": "sbOptions_" + inst.uid,"class": inst.settings.classOptions,"css": {
"display": "none"
}
});
$target.children().each(function(i) {
var that = $(this),li,config = {};
if (that.is("option")) {
getoptions(that);
} else if (that.is("optgroup")) {
li = $("<li>");
$("<span>",{
"text": that.attr("label")
}).addClass(inst.settings.classGroup).appendTo(li);
li.appendTo(sbOptions);
if (that.is(":disabled")) {
config.disabled = true;
}
config.sub = true;
getoptions(that.find("option"),config);
}
});
function getoptions () {
var sub = arguments[1] && arguments[1].sub ? true : false,disabled = arguments[1] && arguments[1].disabled ? true : false;
arguments[0].each(function (i) {
var that = $(this),li = $("<li>"),child;
if (that.is(":selected")) {
sbSelector.text(that.text());
s = TRUE;
}
if (i === olen - 1) {
li.addClass("last");
}
if (!that.is(":disabled") && !disabled) {
child = $("<a>",{
"href": "#" + that.val(),"rel": that.val()
}).text(that.text()).bind("click.sb",function (e) {
if (e && e.preventDefault) {
e.preventDefault();
}
var t = sbToggle,$this = $(this),uid = t.attr("id").split("_")[1];
self._changeSelectBox(target,$this.attr("rel"),$this.text());
self._closeSelectBox(target);
}).bind("mouSEOver.sb",function () {
var $this = $(this);
$this.parent().siblings().find("a").removeClass(inst.settings.classFocus);
$this.addClass(inst.settings.classFocus);
}).bind("mouSEOut.sb",function () {
$(this).removeClass(inst.settings.classFocus);
});
if (sub) {
child.addClass(inst.settings.classSub);
}
if (that.is(":selected")) {
child.addClass(inst.settings.classFocus);
}
child.appendTo(li);
} else {
child = $("<span>",{
"text": that.text()
}).addClass(inst.settings.classdisabled);
if (sub) {
child.addClass(inst.settings.classSub);
}
child.appendTo(li);
}
li.appendTo(sbOptions);
});
}
if (!s) {
sbSelector.text(opts.first().text());
}
$.data(target,PROP_NAME,inst);
sbHolder.data("uid",inst.uid).bind("keydown.sb",function (e) {
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0,uid = $this.data("uid"),inst = $this.siblings("select[sb='"+uid+"']").data(PROP_NAME),trgt = $this.siblings(["select[sb='",uid,"']"].join("")).get(0),$f = $this.find("ul").find("a." + inst.settings.classFocus);
switch (key) {
case 37: //Arrow Left
case 38: //Arrow Up
if ($f.length > 0) {
var $next;
$("a",$this).removeClass(inst.settings.classFocus);
$next = $f.parent().prevAll("li:has(a)").eq(0).find("a");
if ($next.length > 0) {
$next.addClass(inst.settings.classFocus).focus();
$("#sbSelector_" + uid).text($next.text());
}
}
break;
case 39: //Arrow Right
case 40: //Arrow Down
var $next;
$("a",$this).removeClass(inst.settings.classFocus);
if ($f.length > 0) {
$next = $f.parent().nextAll("li:has(a)").eq(0).find("a");
} else {
$next = $this.find("ul").find("a").eq(0);
}
if ($next.length > 0) {
$next.addClass(inst.settings.classFocus).focus();
$("#sbSelector_" + uid).text($next.text());
}
break;
case 13: //Enter
if ($f.length > 0) {
self._changeSelectBox(trgt,$f.attr("rel"),$f.text());
}
self._closeSelectBox(trgt);
break;
case 9: //Tab
if (trgt) {
var inst = self._getInst(trgt);
if (inst/* && inst.isOpen*/) {
if ($f.length > 0) {
self._changeSelectBox(trgt,$f.text());
}
self._closeSelectBox(trgt);
}
}
var i = parseInt($this.attr("tabindex"),10);
if (!e.shiftKey) {
i++;
} else {
i--;
}
$("*[tabindex='" + i + "']").focus();
break;
case 27: //Escape
self._closeSelectBox(trgt);
break;
}
e.stopPropagation();
return false;
}).delegate("a","mouSEOver",function (e) {
$(this).addClass(inst.settings.classFocus);
}).delegate("a","mouSEOut",function (e) {
$(this).removeClass(inst.settings.classFocus);
});
sbSelector.appendTo(sbHolder);
sbOptions.appendTo(sbHolder);
sbHolder.insertAfter($target);
$("html").on('mousedown',function(e) {
e.stopPropagation();
$("select").selectBox('close');
});
$([".",inst.settings.classHolder,",.",inst.settings.classSelector].join("")).mousedown(function(e) {
e.stopPropagation();
});
},/**
* Remove the selectBox functionality completely. This will return the element back to its pre-init state.
*
* @param {HTMLElement} target
*/
_detachSelectBox: function (target) {
var inst = this._getInst(target);
if (!inst) {
return FALSE;
}
$("#sbHolder_" + inst.uid).remove();
$.data(target,null);
$(target).show();
},/**
* Change selected attribute of the selectBox.
*
* @param {HTMLElement} target
* @param {String} value
* @param {String} text
*/
_changeSelectBox: function (target,value,text) {
var onChange,inst = this._getInst(target);
if (inst) {
onChange = this._get(inst,'onChange');
$("#sbSelector_" + inst.uid).text(text);
}
value = value.replace(/\'/g,"\\'");
$(target).find("option[value='" + value + "']").prop("selected",TRUE);
if (inst && onChange) {
onChange.apply((inst.input ? inst.input[0] : null),[value,inst]);
} else if (inst && inst.input) {
inst.input.trigger('change');
}
},/**
* Enable the selectBox.
*
* @param {HTMLElement} target
*/
_enableSelectBox: function (target) {
var inst = this._getInst(target);
if (!inst || !inst.isdisabled) {
return FALSE;
}
$("#sbHolder_" + inst.uid).removeClass(inst.settings.classHolderdisabled);
inst.isdisabled = FALSE;
$.data(target,inst);
},/**
* disable the selectBox.
*
* @param {HTMLElement} target
*/
_disableSelectBox: function (target) {
var inst = this._getInst(target);
if (!inst || inst.isdisabled) {
return FALSE;
}
$("#sbHolder_" + inst.uid).addClass(inst.settings.classHolderdisabled);
inst.isdisabled = TRUE;
$.data(target,/**
* Get or set any selectBox option. If no value is specified,will act as a getter.
*
* @param {HTMLElement} target
* @param {String} name
* @param {Object} value
*/
_optionSelectBox: function (target,name,value) {
var inst = this._getInst(target);
if (!inst) {
return FALSE;
}
//Todo check name
inst[name] = value;
$.data(target,/**
* Call up attached selectBox
*
* @param {HTMLElement} target
*/
_openSelectBox: function (target) {
var inst = this._getInst(target);
//if (!inst || this._state[inst.uid] || inst.isdisabled) {
if (!inst || inst.isOpen || inst.isdisabled) {
return;
}
var el = $("#sbOptions_" + inst.uid),viewportHeight = parseInt($(window).height(),10),offset = $("#sbHolder_" + inst.uid).offset(),scrollTop = $(window).scrollTop(),height = el.prev().height(),diff = viewportHeight - (offset.top - scrollTop) - height / 2,onopen = this._get(inst,'onopen');
el.css({
"top": height + "px","maxHeight": (diff - height) + "px"
});
inst.settings.effect === "fade" ? el.fadeIn(inst.settings.speed) : el.slideDown(inst.settings.speed);
$("#sbToggle_" + inst.uid).addClass(inst.settings.classtoggleOpen);
this._state[inst.uid] = TRUE;
inst.isOpen = TRUE;
if (onopen) {
onopen.apply((inst.input ? inst.input[0] : null),[inst]);
}
$.data(target,/**
* Close opened selectBox
*
* @param {HTMLElement} target
*/
_closeSelectBox: function (target) {
var inst = this._getInst(target);
//if (!inst || !this._state[inst.uid]) {
if (!inst || !inst.isOpen) {
return;
}
var onClose = this._get(inst,'onClose');
inst.settings.effect === "fade" ? $("#sbOptions_" + inst.uid).fadeOut(inst.settings.speed) : $("#sbOptions_" + inst.uid).slideUp(inst.settings.speed);
$("#sbToggle_" + inst.uid).removeClass(inst.settings.classtoggleOpen);
this._state[inst.uid] = FALSE;
inst.isOpen = FALSE;
if (onClose) {
onClose.apply((inst.input ? inst.input[0] : null),/**
* Create a new instance object
*
* @param {HTMLElement} target
* @return {Object}
*/
_newInst: function(target) {
var id = target[0].id.replace(/([^A-Za-z0-9_-])/g,'\\\\$1');
return {
id: id,input: target,uid: Math.floor(Math.random() * 99999999),isOpen: FALSE,isdisabled: FALSE,settings: {}
};
},/**
* Retrieve the instance data for the target control.
*
* @param {HTMLElement} target
* @return {Object} - the associated instance data
* @throws error if a jQuery problem getting data
*/
_getInst: function(target) {
try {
return $.data(target,PROP_NAME);
}
catch (err) {
throw 'Missing instance data for this selectBox';
}
},/**
* Get a setting value,defaulting if necessary
*
* @param {Object} inst
* @param {String} name
* @return {Mixed}
*/
_get: function(inst,name) {
return inst.settings[name] !== undefined ? inst.settings[name] : this._defaults[name];
}
});
/**
* Invoke the selectBox functionality.
*
* @param {Object|String} options
* @return {Object}
*/
$.fn.selectBox = function (options) {
var otherArgs = Array.prototype.slice.call(arguments,1);
if (typeof options == 'string' && options == 'isdisabled') {
return $.selectBox['_' + options + 'SelectBox'].apply($.selectBox,[this[0]].concat(otherArgs));
}
if (options == 'option' && arguments.length == 2 && typeof arguments[1] == 'string') {
return $.selectBox['_' + options + 'SelectBox'].apply($.selectBox,[this[0]].concat(otherArgs));
}
return this.each(function() {
typeof options == 'string' ?
$.selectBox['_' + options + 'SelectBox'].apply($.selectBox,[this].concat(otherArgs)) :
$.selectBox._attachSelectBox(this,options);
});
};
$.selectBox = new SelectBox(); // singleton instance
$.selectBox.version = "0.3";
})(jQuery);我在模块的default.PHP中有这些选项，像这样的PHP变量。没关系
<script type="text/javascript">
jQuery.noConflict();
jQuery(function () {
jQuery("#jqjumpmenu_id").selectBox({
classHolder: '<?PHP echo $params->get( 'classHolder');?>',classSelector:'<?PHP echo $params->get( 'classSelector');?>',classOptions: '<?PHP echo $params->get( 'classOptions');?>',classGroup: '<?PHP echo $params->get( 'classGroup');?>'
});
});
</script>我想为诸如LinkClass之类的<li>元素提供一个额外的选项。预先感谢。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）