发布一个兼容所有浏览器自定义垂直滚动条组件（已能使用），并希望高手能帮我解决一个问题

本帖最后由 iori_wen 于 2009-08-12 15:00:37 编辑

解决方案 »

  1.   

    注释把代码注掉了，哎，重发一下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>发布一个兼容所有浏览器的自定义滚动条组件</title>
    <link rel="stylesheet" type="text/css" media="screen" href="http://files.cnblogs.com/shuicaituya/test.css" />
    <script type="text/javascript" charset="utf-8" src="http://files.cnblogs.com/shuicaituya/mootools.js"></script>
    <script type="text/javascript">
    var BlockWithCustomSlider = new Class({
        options:{
            offset:-1,                              //滑动块与容器的偏离量，单位'px
            moveOffset:1,                           //进入箭头区后滑动块滑动一次的滑动量，单位'px'
            movePerTime:30,                         //进入箭头区后每做一次滑动的时间，单位'毫秒'
            speedMultiples:3,                       //点击箭头时，滚动速度增加或降低的倍数
            sliderContainerClass:'sliderContainer', //滚动条容器（包含箭头）的样式
            arrowUpClass:'arrowUp',                 //上箭头的样式
            arrowDownClass:'arrowDown',             //下箭头的样式
            sliderBarClass:'sliderBar',             //滚动条容器（不包含箭头）的样式
            knobClass:'knob',                       //滚动块的样式
            onChange:$empty,                        //滑动块改变位置触发事件,第一个参数为滑动块在容器位置的百分比
            onClickArrow:$empty,                    //点击箭头触发事件，第一个参数为点击上箭头返回'up',点击下箭头返回'down'
            onInsertOrDelete:$empty                 //需要改，请关注//当内容框里有元素插入或删除时触发该事件    
    },
        initialize:function(blockElement,options){
            this.setOptions(options);
            this.blockElement = $(blockElement);
            this.sliderContent = this.blockElement.clone([true]).removeProperty('style').addClass('sliderContent');
            this.blockElement.empty().grab(this.sliderContent);
            this.knob = new Element('div').addClass(this.options.knobClass);
            this.sliderBar = new Element('dt').addClass(this.options.sliderBarClass).grab(this.knob);
            
            //给上箭头添加鼠标事件
            this.arrowUp = new Element('dd').addClass(this.options.arrowUpClass).addEvent('mouseenter',function(){
                this.moveSliderBar('up');
            }.bind(this)).addEvent('mouseleave',function(){
                $clear(this.timer);
            }.bind(this)).addEvent('mousedown',function(){
                this.fireEvent('clickArrow','up');
                this.speedUpOrDown('up');
            }.bind(this)).addEvent('mouseup',function(){
                this.speedUpOrDown('down');
            }.bind(this));
            //给下箭头添加鼠标事件
            this.arrowDown = new Element('dd').addClass(this.options.arrowDownClass).addEvent('mouseenter',function(){
                this.moveSliderBar('down');
            }.bind(this)).addEvent('mouseleave',function(){
                $clear(this.timer);
            }.bind(this)).addEvent('mousedown',function(){
                this.fireEvent('clickArrow','down');
                this.speedUpOrDown('up');
            }.bind(this)).addEvent('mouseup',function(){
                this.speedUpOrDown('down');
            }.bind(this));
            
            this.sliderContainer = new Element('div').addClass(this.options.sliderContainerClass).grab(new Element('dl').adopt(this.arrowUp,this.sliderBar,this.arrowDown));
            this.blockElement.grab(this.sliderContainer,'bottom').setStyles({
                'overflow':'hidden'
            });
            if(this.sliderContent.scrollHeight - this.sliderContent.clientHeight > 0){
                this.scroll = new Fx.Scroll(this.sliderContent);
                this.knob.setStyle('height',this.sliderContent.clientHeight * (this.sliderContainer.clientHeight + 2 * this.options.offset) / this.sliderContent.scrollHeight);
                this.slider = new Slider(this.sliderBar, this.knob,{
                    mode:'vertical',
                    wheel:true,
                    offset:this.options.offset,
                    onChange:function(pos){
                        this.fireEvent('change',pos);
                        this.scroll.set(0,pos * (this.sliderContent.scrollHeight - this.sliderContent.clientHeight) / 100);
                    }.bind(this)
                }).set(0);
            }
            else{
                this.sliderContainer.setStyle('display','none');
                this.sliderContent.setStyle('width',this.sliderContent.getStyle('width').toInt() + this.sliderBar.getStyle('width').toInt() + 'px');
            }
            this.chlidNodeLength = this.sliderContent.childNodes.length;
            this.startCatch();    },
        moveSliderBar:function(direction){  //direction 可为 'down' or 'up'
            var incremental = (direction == 'down'?1:-1) * this.options.moveOffset;
            this.slider.set(this.slider.step + incremental);
            this.timer = this.moveSliderBar.delay(this.options.movePerTime,this,direction);
        },
        speedUpOrDown:function(operate){   //operate 可为 'down' or 'up'
            this.options.movePerTime = eval(this.options.movePerTime + (operate == 'down'?'*':'/') + this.options.speedMultiples);
        },
    //需要改，请关注start
        startCatch:function(){       //这个函数是为了模拟删除或添加元素的事件捕获，但我并不想用50毫秒一次的捕获这么浪费性能的脚本，希望各位高手能帮忙解决下，最好能自定义事件捕获。
            if(this.sliderContent.childNodes.length != this.chlidNodeLength){
                this.chlidNodeLength = this.sliderContent.childNodes.length;
                //有删除或添加元素，接下来干我想干的事,比如：调整滚动条的高度或者滚到特殊位置等等
                this.fireEvent('insertOrDelete');
            }
            this.startCatch.delay(50,this);
        }});
    //需要改，请关注end
    BlockWithCustomSlider.implement(new Events,new Options);
    </script>
    </head>
    <body>
        <ul id="box1" style="margin:100px;">
            <li>start</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
            <li>16</li>
            <li>17</li>
            <li>18</li>
            <li>19</li>
            <li>20</li>
            <li>21</li>
            <li>22</li>
            <li>22</li>
            <li>23</li>
            <li>24</li>
            <li>25</li>
            <li>26</li>
            <li>27</li>
            <li>28</li>
            <li>29</li>
            <li>30</li>
            <li>31</li>
            <li>32</li>
            <li>33</li>
            <li>34</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
            <li>16</li>
            <li>17</li>
            <li>18</li>
            <li>19</li>
            <li>20</li>
            <li>21</li>
            <li>22</li>
            <li>22</li>
            <li>23</li>
            <li>24</li>
            <li>25</li>
            <li>26</li>
            <li>27</li>
            <li>28</li>
            <li>29</li>
            <li>30</li>
            <li>31</li>
            <li>32</li>
            <li>33</li>
            <li>34</li>
            <li>14</li>
            <li>15</li>
            <li>16</li>
            <li>17</li>
            <li>18</li>
            <li>19</li>
            <li>20</li>
            <li>21</li>
            <li>22</li>
            <li>22</li>
            <li>23</li>
            <li>24</li>
            <li>25</li>
            <li>26</li>
            <li>27</li>
            <li>28</li>
            <li>29</li>
            <li>30</li>
            <li>31</li>
            <li>32</li>
            <li>33</li>
            <li>34</li>
            <li>14</li>
            <li>15</li>
            <li>16</li>
            <li>17</li>
            <li>18</li>
            <li>19</li>
            <li>20</li>
            <li>21</li>
            <li>22</li>
            <li>22</li>
            <li>23</li>
            <li>24</li>
            <li>25</li>
            <li>26</li>
            <li>27</li>
            <li>28</li>
            <li>29</li>
            <li>30</li>
            <li>31</li>
            <li>32</li>
            <li>33</li>
            <li>34</li>
            <li>end</li>
        </ul>
        <input type="button" value="插入元素" id="btn1"/>    <script type="text/javascript">
            var box1 = new BlockWithCustomSlider($('box1'),{
                onInsertOrDelete:function(){
                    alert("有删除或添加元素")
                }        });
            window.addEvent('domready',function(){
                box1.sliderContent.scrollTop = 0;//为了解决刷新页面，windows自带的滚动条不重置这个问题。我曾尝试在类里写这句话，可惜不管用，大家帮忙看看在类里写哪管用，最好肯定是封装在类里。
    //需要改，请关注start
                $('btn1').addEvent('click',function(){
                    new Element('li',{text:'sfgsgdsgfds'}).inject($$('.sliderContent')[0],'bottom');
                });
    //需要改，请关注end        
    });
        </script>
    </body>
    </html>
      

  2.   

    是啊，windows自带的都看烦了，很有意义。