3

我正在使用 jquery.scrollablecombo.js 进行 jquery 下拉。但是当我在我的 HTML 中使用它而不是类时，它会显示类名。请参阅示例。

<div classname="searchBar cb_selectMain cb_down"></div>

由于这个原因，css 没有正确显示。

scrollablecombo.js 的代码

(function($) {

    $.fn.scrollablecombo2 = function(options) {
        var opts = $.extend({}, $.fn.scrollablecombo2.defaults, options);
        return this.each(function() {
            $this = $(this);

            var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

            function findHighestZIndex(){
                var divs = document.getElementsByTagName('div');
                var highest = 0;
                for (var i = 0; i < divs .length; i++)
                {
                    var zindex = divs[i].style.zIndex;
                    if (zindex > highest) {
                        highest = zindex;
                    }
                }
                return highest;
            }

            /** 
            * hide the select element
            * graceful degradation
            */
            $this.hide();

            function makeScrollable($wrapper, $container){
                var extra           = 50;
                var wrapperHeight   = $wrapper.height() ;
                $wrapper.css({overflow: 'hidden'});
                $wrapper.scrollTop(0);
                $wrapper.unbind('mousemove').bind('mousemove',function(e){
                    var ulHeight    = $container.outerHeight() + 2*extra ;
                    var top         = (e.pageY - $wrapper.offset().top) * (ulHeight-wrapperHeight ) / wrapperHeight - extra;
                    $wrapper.scrollTop(top);
                });
            }

            /**
            * let's build our element structure
            */
            var $ul_e   = $('<ul />');

            $this.find('option').each(function(){
                var $option = $(this);
                var liclass = '';
                if($option.attr('selected'))
                    liclass = 'selected';
                var $li_e   = $('<li />',{
                    className   :   liclass,
                    html        :   '<a href="'+$option.val()+'">'+$option.html()+'</a>'
                });
                $ul_e.append($li_e);
            });

            var $wrapper_e  = $('<div />',{
                className   :   'cb_selectWrapper3'
            });

            $wrapper_e.append($ul_e);

            var $control_e  = $('<div />',{
                //id            :   'ui_element',
                className   :   'cb_selectMain3 cb_down'
            });

            var $select_e   = $('<div />',{
                className   :   'cb_select3'
            });

            $select_e.append($wrapper_e).append($control_e);

            var $selected   = $ul_e.find('.selected');


            function openCombo(){
                var maxzidx = Math.max(findHighestZIndex(),99999);
                $wrapper_e.css('z-index',parseInt(maxzidx+1000)).show();
                $control_e.addClass('cb_up').removeClass('cb_down');
                makeScrollable($wrapper_e,$ul_e);
            }
            function closeCombo(){
                $wrapper_e.css('z-index',1000).hide();
                $control_e.addClass('cb_down').removeClass('cb_up');
            }
            $control_e.html($selected.find('a').html())
                      .bind('click',function(){
                          (!$wrapper_e.is(':visible'))? openCombo() : closeCombo();
                      }
            );
            $selected.hide();

            $this.parent().append($select_e);
            $this.remove();

            $ul_e.find('a').bind('click',function(e){
                var $this       = $(this);
                $control_e.html($this.html());
                var $selected   = $ul_e.find('.selected');
                $selected.show().removeClass('selected');
                $this.parent().addClass('selected').hide();
                closeCombo();
                e.preventDefault();
            });



        });
    };


    $.fn.scrollablecombo = function(options) {
        var opts = $.extend({}, $.fn.scrollablecombo.defaults, options);
        return this.each(function() {
            $this = $(this);

            var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

            function findHighestZIndex(){
                var divs = document.getElementsByTagName('div');
                var highest = 0;
                for (var i = 0; i < divs .length; i++)
                {
                    var zindex = divs[i].style.zIndex;
                    if (zindex > highest) {
                        highest = zindex;
                    }
                }
                return highest;
            }

            /** 
            * hide the select element
            * graceful degradation
            */
            $this.hide();

            function makeScrollable($wrapper, $container){
                var extra           = 50;
                var wrapperHeight   = $wrapper.height() ;
                $wrapper.css({overflow: 'hidden'});
                $wrapper.scrollTop(0);
                $wrapper.unbind('mousemove').bind('mousemove',function(e){
                    var ulHeight    = $container.outerHeight() + 2*extra ;
                    var top         = (e.pageY - $wrapper.offset().top) * (ulHeight-wrapperHeight ) / wrapperHeight - extra;
                    $wrapper.scrollTop(top);
                });
            }

            /**
            * let's build our element structure
            */
            var $ul_e   = $('<ul />');

            $this.find('option').each(function(){
                var $option = $(this);
                var liclass = '';
                if($option.attr('selected'))
                    liclass = 'selected';
                var $li_e   = $('<li />',{
                    className   :   liclass,
                    html        :   '<a href="'+$option.val()+'">'+$option.html()+'</a>'
                });
                $ul_e.append($li_e);
            });

            var $wrapper_e  = $('<div />',{
                className   :   'searchBar cb_selectWrapper'
            });

            $wrapper_e.append($ul_e);

            var $control_e  = $('<div />',{
                //id            :   'ui_element',
                className   :   'searchBar cb_selectMain cb_down'
            });

            var $select_e   = $('<div />',{
                className   :   'cb_select'
            });

            $select_e.append($wrapper_e).append($control_e);

            var $selected   = $ul_e.find('.selected');


            function openCombo(){
                var maxzidx = Math.max(findHighestZIndex(),99999);
                $wrapper_e.css('z-index',parseInt(maxzidx+1000)).show();
                $control_e.addClass('cb_up').removeClass('cb_down');
                makeScrollable($wrapper_e,$ul_e);
            }
            function closeCombo(){
                $wrapper_e.css('z-index',1000).hide();
                $control_e.addClass('cb_down').removeClass('cb_up');
            }
            $control_e.html($selected.find('a').html())
                      .bind('click',function(){
                          (!$wrapper_e.is(':visible'))? openCombo() : closeCombo();
                      }
            );
            $selected.hide();

            $this.parent().append($select_e);
            $this.remove();

            $ul_e.find('a').bind('click',function(e){
                var $this       = $(this);
                $control_e.html($this.html());
                var $selected   = $ul_e.find('.selected');
                $selected.show().removeClass('selected');
                $this.parent().addClass('selected').hide();
                closeCombo();
                e.preventDefault();
            });



        });
    };
    $.fn.scrollablecombo.defaults = {

    };
    $.fn.scrollablecombo1 = function(options) {
        var opts = $.extend({}, $.fn.scrollablecombo1.defaults, options);
        return this.each(function() {
            $this = $(this);

            var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

            function findHighestZIndex(){
                var divs = document.getElementsByTagName('div');
                var highest = 0;
                for (var i = 0; i < divs .length; i++)
                {
                    var zindex = divs[i].style.zIndex;
                    if (zindex > highest) {
                        highest = zindex;
                    }
                }
                return highest;
            }

            /** 
            * hide the select element
            * graceful degradation
            */
            $this.hide();

            function makeScrollable($wrapper, $container){
                var extra           = 50;
                var wrapperHeight   = $wrapper.height() ;
                $wrapper.css({overflow: 'hidden'});
                $wrapper.scrollTop(0);
                $wrapper.unbind('mousemove').bind('mousemove',function(e){
                    var ulHeight    = $container.outerHeight() + 2*extra ;
                    var top         = (e.pageY - $wrapper.offset().top) * (ulHeight-wrapperHeight ) / wrapperHeight - extra;
                    $wrapper.scrollTop(top);
                });
            }

            /**
            * let's build our element structure
            */
            var $ul_e   = $('<ul />');

            $this.find('option').each(function(){
                var $option = $(this);
                var liclass = '';
                if($option.attr('selected'))
                    liclass = 'selected';
                var $li_e   = $('<li />',{
                    className   :   liclass,
                    html        :   '<a href="'+$option.val()+'">'+$option.html()+'</a>'
                });
                $ul_e.append($li_e);
            });

            var $wrapper_e  = $('<div />',{
                className   :   'share cb_selectWrapper2'
            });

            $wrapper_e.append($ul_e);

            var $control_e  = $('<div />',{
                //id            :   'ui_element',
                className   :   'share cb_selectMain2 cb_down2'
            });

            var $select_e   = $('<div />',{
                className   :   'cb_select2'
            });

            $select_e.append($wrapper_e).append($control_e);

            var $selected   = $ul_e.find('.selected');


            function openCombo(){
                var maxzidx = Math.max(findHighestZIndex(),99);
                $wrapper_e.css('z-index',parseInt(maxzidx+100)).show();
                $control_e.addClass('cb_up').removeClass('cb_down');
                makeScrollable($wrapper_e,$ul_e);
            }
            function closeCombo(){
                $wrapper_e.css('z-index',100).hide();
                $control_e.addClass('cb_down').removeClass('cb_up');
            }
            $control_e.html($selected.find('a').html())
                      .bind('click',function(){
                          (!$wrapper_e.is(':visible'))? openCombo() : closeCombo();
                      }
            );
            $selected.hide();

            $this.parent().append($select_e);
            $this.remove();

            $ul_e.find('a').bind('click',function(e){
                var $this       = $(this);
                $control_e.html($this.html());
                var $selected   = $ul_e.find('.selected');
                $selected.show().removeClass('selected');
                $this.parent().addClass('selected').hide();
                closeCombo();
                e.preventDefault();
            });



        });
    };
})(jQuery);

请提供任何帮助。

4

2 回答 2

2

问题在于创建新元素的代码部分：

var $wrapper_e = $("<div />", {
    className: "searchBar cb_selectWrapper"
});

您传递给的对象字面$()量必须以HTML 属性名称为键，而不是DOM 属性名称。className是一个 DOM 属性，并且class是相关的 HTML 属性。你应该写：

var $wrapper_e = $("<div />", {
    "class": "searchBar cb_selectWrapper"
});
于 2013-08-27T10:39:23.007 回答
0

在不更改代码的情况下解决此问题的一种方法如下（我不知道它是否被视为 hack）：

假设您有以下内容

...

您可以使用 jquery 执行以下操作

$("div").addClass($(this).attr('classname'));

What this will do is that it would actually take the attr classname and put it in the class attribute.

Another answer that I am not sure of, is to change all the className into class in the code

于 2013-08-27T10:39:44.703 回答