精华内容
下载资源
问答
  • JS实现鼠标点击展开/隐藏表格行

    千次阅读 2012-11-22 00:25:59
    JS实现鼠标点击展开/隐藏表格行_网页代码站(www.webdm.cn)> function TestBlack(TagName){  var obj = document.getElementById(TagName);  if(obj.style.display==""){  obj.style.display = "none";  }...

    <title>JS实现鼠标点击展开/隐藏表格行_网页代码站(www.webdm.cn)</title>
    <script language="javascript">
    function TestBlack(TagName){
     var obj = document.getElementById(TagName);
     if(obj.style.display==""){
      obj.style.display = "none";
     }else{
      obj.style.display = "";
     }
    }
    </script>
    <table width="760" border="0" cellspacing="0" cellpadding="0">
        <tr οnclick="TestBlack('divc');">
            <td width="760" height="20" bgcolor="#00CCFF">Click Me!</td>
        </tr>
        <tr id="divc">
            <td width="760" height="60" bgcolor="#9966FF"></td>
        </tr>
    </table>
    <br />
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!</p>

    展开全文
  • 这里介绍的是JS实现网页上可点击展开、关闭的左侧广告代码,表现形式类似对联广告,不过操作方式不一样,点击时候会隐藏在屏幕在左侧,但是不是完全隐藏,仍显示一个图片竖条的广告,而且点击“显示”的时候,它会...
  • 前言 最近慢慢习惯了新环境,也渐渐的变得忙碌起来。之前暴雷的事情有同学还是比较...+ 2、内容中有链接的话,需要隐藏链接,将链接显示成“网页链接”,并实现点击跳转网页; + 3、内容中含有@+“内容”,需要携带...

    前言

    最近慢慢习惯了新环境,也渐渐的变得忙碌起来。之前暴雷的事情有同学还是比较关注,我想说的是,已经一而再再而三的展期了,老赖加上老赖平台,结果是相当明确的,不说了,说多了都是泪。

    前两天接到一个需求,需要完成以下效果。 
    + 1、内容超过指定行数需要折叠起来; 
    + 2、内容中有链接的话,需要隐藏链接,将链接显示成“网页链接”,并实现点击跳转网页; 
    + 3、内容中含有@+“内容”,需要携带“内容”跳转指定页面。 
    + 4、有可能会在“展开”或者“收回”前面附加显示其他内容,比如demo里面的时间串

    目标效果

    Demo效果实现

    下面是实现的效果图,@用户和链接会高亮显示,可以点击,包含展开和回收功能。以下做了不同情况下的显示效果:

    tips.jpg

    实现思路

    主流思路有两个:一个是曲线救国,另一个是对着TextView直接撸

    思路一、曲线救国

    用两个TextView来分别显示,上面的主要负责显示内容,下面的负责展开和收回的功能。这种方式实现起来的好处是实现比较简单,缺点是很难做到如图所示在文字的最后添加展开和收回两个字,也就是很难还原设计稿;而且对于内容还是需要额外处理@用户和链接的操作,不太方便。

    思路二、对着TextView直接撸

    所谓“对着TextView直接撸”就是自定义View继承TextView,在自定义View里面去处理所有的逻辑,好处是用起来方便点,而且也能尽量还原设计稿。在这里我们采用第二种方式,第一种方式提供一个思路,大家感兴趣的可以自己试试。

    具体实现

    考虑在先

    在开始写代码之前,我们需要考虑几个点 
    一、怎么保证“展开”或者“收回”放在文字的最后面 
    二、如何识别文字中的@用户 
    三、如何识别文字中的链接 
    四、处理@用户,链接和“展开”或者“收回”三者的高亮显示和点击事件

    解决问题

    一、怎么保证“展开”或者“收回”放在文字的最后面

    其实这个问题算是整个实现中最难的一个吧!在此之前也是让我头疼的一个问题,不过后来我遇到了DynamicLayout,使用它我们可以获取行的最后位置,行的开始位置,行的行宽以及指定内容的所占的行数。

            //用来计算内容的大小
            DynamicLayout mDynamicLayout =
                    new DynamicLayout(mFormatData.formatedContent, mPaint, mWidth, Layout.Alignment.ALIGN_NORMAL, 1.2f, 0.0f,
                            true);
            //获取行数
            int mLineCount = mDynamicLayout.getLineCount();
            int index = currentLines - 1;
            //获取指定行的最后位置
            int endPosition = mDynamicLayout.getLineEnd(index);
            //获取指定行的开始位置
            int startPosition = mDynamicLayout.getLineStart(index);
            //获取指定行的行宽
            float lineWidth = mDynamicLayout.getLineWidth(index);

    下面这个图会对上面的参数进行简单的说明: 
    参数说明
    有了这些东西经过简单的计算我们就可以获取到我们需要截取的内容长度。对原内容进行截取再拼接上“展开”或“收回”即可!

         /**
         * 计算原内容被裁剪的长度
         *
         * @param endPosition
         * @param startPosition
         * @param lineWidth
         * @param endStringWith
         * @param offset
         * @return
         */
        private int getFitPosition(int endPosition, int startPosition, float lineWidth,
                                   float endStringWith, float offset, String aimContent) {
            //最后一行需要添加的文字的字数                       
            int position = (int) ((lineWidth - (endStringWith + offset)) * (endPosition - startPosition)/ lineWidth);
    
            if (position < 0) return endPosition;
            //计算最后一行需要显示的正文的长度
            float measureText = mPaint.measureText(
                    (aimContent.substring(startPosition, startPosition + position)));
            //如果最后一行需要显示的正文的长度比最后一行的长减去“展开”文字的长度要短就可以了  否则加个空格继续算
            if (measureText <= lineWidth - endStringWith) {
                return startPosition + position;
            } else {
                return getFitPosition(endPosition, startPosition, lineWidth, endStringWith, offset + mPaint.measureText(" "));
            }
        }

    二、如何识别文字中的@用户

    使用正则表达式对原内容进行匹配,下面是正则表达式:

    @[\w\p{InCJKUnifiedIdeographs}-]{1,26}

    将匹配到内容做一下记录,最后再使用SpannableStringBuilder对匹配到的内容设置可点击的span并设置其他颜色等具体样式。在以下代码中,我们将匹配到的信息的内容和位置信息保存下来,后面会用到的。对于@用户这块,后面会提到怎么添加高亮显示和添加点击事件。

        //对@用户 进行正则匹配
        Pattern pattern = Pattern.compile(regexp_mention, Pattern.CASE_INSENSITIVE);
        Matcher matcher = pattern.matcher(newResult.toString());
        List<FormatData.PositionData> datasMention = new ArrayList<>();
        while (matcher.find()) {
            //将匹配到的内容进行统计处理
            datasMention.add(new FormatData.PositionData(matcher.start(), matcher.end(), matcher.group(), LinkType.MENTION_TYPE));
        }

    三、如何识别文字中的链接

    在开始的时候,找了很多的匹配文字中链接的正则表达式,后来发现好多都有问题。联想到TextView本身就有对链接跳转的支持,就想着TextView的内部一定有相关的正则来匹配,后来查看TextView的源码,发现还真有。

    对于链接,后面会提到怎么添加高亮显示和添加点击事件。下面是匹配链接的代码:

            List<FormatData.PositionData> datas = new ArrayList<>();
            //对链接进行正则匹配
            Pattern pattern = AUTOLINK_WEB_URL;
            Matcher matcher = pattern.matcher(content);
            StringBuffer newResult = new StringBuffer();
            int start = 0;
            int end = 0;
            int temp = 0;
            while (matcher.find()) {
                start = matcher.start();
                end = matcher.end();
                newResult.append(content.toString().substring(temp, start));
                //将匹配到的内容进行统计处理
                datas.add(new FormatData.PositionData(newResult.length() + 1, newResult.length() + 2 + TARGET.length(), matcher.group(), LinkType.LINK_TYPE));
                newResult.append(" " + TARGET + " ");
                temp = end;
            }

    除了对链接进行匹配以外,我们还需要将识别到的链接用掩码隐藏起来。如何掩码呢?也就是把原文中的链接用“网页链接”替换掉。那么如何替换掉呢?上面的代码中我们会获取到对应的链接以及链接所在的位置,那么我们只需要使用“网页链接”替换掉匹配到的链接即可。

    //newResult是最终会显示在页面上的内容容器
    newResult.append(content.toString().substring(end, content.toString().length()));

    四、处理@用户,链接和“展开”或者“收回”三者的高亮显示和点击事件

    对于@用户,链接和“展开”或者“收回”三者的实现,最终都是使用SpannableStringBuilder来处理。之前我们在对原内容进行解析的时候,将匹配到的链接或者@用户进行了存储,并且存储了他们所在的位置(start,end)以及类型。

        //定义类型的枚举类型
        public enum LinkType {
            //普通链接
            LINK_TYPE,
            //@用户
            MENTION_TYPE
        }

    有了这些数据的集合,我们只需要遍历这些数据,并分别对这些数据进行setSpan处理,并且在setSpan的过程中设置字体颜色,以及点击事件的回调即可。

    //处理链接或者@用户
        private void dealLinksOrMention(FormatData formatData,SpannableStringBuilder ssb) {
            List<FormatData.PositionData> positionDatas = formatData.getPositionDatas();
            HH:
            for (FormatData.PositionData data : positionDatas) {
                if (data.getType().equals(LinkType.LINK_TYPE)) {
                    int fitPosition = ssb.length() - getHideEndContent().length();
                    if (data.getStart() < fitPosition) {
                        SelfImageSpan imageSpan = new SelfImageSpan(mLinkDrawable, ImageSpan.ALIGN_BASELINE);
                        //设置链接图标
                        ssb.setSpan(imageSpan, data.getStart(), data.getStart() + 1, Spannable.SPAN_INCLUSIVE_INCLUSIVE);
                        //设置链接文字样式
                        int endPosition = data.getEnd();
                        if (fitPosition > data.getStart() + 1 && fitPosition < data.getEnd()) {
                            endPosition = fitPosition;
                        }
                        if (data.getStart() + 1 < fitPosition) {
                            ssb.setSpan(new ClickableSpan() {
                                @Override
                                public void onClick(View widget) {
                                    if (linkClickListener != null)
                                        linkClickListener.onLinkClickListener(LinkType.LINK_TYPE, data.getUrl());
                                }
    
                                @Override
                                public void updateDrawState(TextPaint ds) {
                                    ds.setColor(mLinkTextColor);
                                    ds.setUnderlineText(false);
                                }
                            }, data.getStart() + 1, endPosition, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
                        }
                    }
                } else {
                    int fitPosition = ssb.length() - getHideEndContent().length();
                    if (data.getStart() < fitPosition) {
                        int endPosition = data.getEnd();
                        if (fitPosition < data.getEnd()) {
                            endPosition = fitPosition;
                        }
                        ssb.setSpan(new ClickableSpan() {
                            @Override
                            public void onClick(View widget) {
                                if (linkClickListener != null)
                                    linkClickListener.onLinkClickListener(LinkType.MENTION_TYPE, data.getUrl());
                            }
    
                            @Override
                            public void updateDrawState(TextPaint ds) {
                                ds.setColor(mLinkTextColor);
                                ds.setUnderlineText(false);
                            }
                        }, data.getStart(), endPosition, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
                    }
                }
            }
        }
    
        /**
         * 设置 "展开"
         * @param ssb
         * @param formatData
         */
        private void setExpandSpan(SpannableStringBuilder ssb,FormatData formatData){
            int index = currentLines - 1;
            int endPosition = mDynamicLayout.getLineEnd(index);
            int startPosition = mDynamicLayout.getLineStart(index);
            float lineWidth = mDynamicLayout.getLineWidth(index);
    
            String endString = getHideEndContent();
    
            //计算原内容被截取的位置下标
            int fitPosition =
                    getFitPosition(endPosition, startPosition, lineWidth, mPaint.measureText(endString), 0);
    
            ssb.append(formatData.formatedContent.substring(0, fitPosition));
    
            //在被截断的文字后面添加 展开 文字
            ssb.append(endString);
    
            int expendLength = TextUtils.isEmpty(mEndExpandContent) ? 0 : 2 + mEndExpandContent.length();
            ssb.setSpan(new ClickableSpan() {
                @Override
                public void onClick(View widget) {
                    action();
                }
    
                @Override
                public void updateDrawState(TextPaint ds) {
                    super.updateDrawState(ds);
                    ds.setColor(mExpandTextColor);
                    ds.setUnderlineText(false);
                }
            }, ssb.length() - TEXT_EXPEND.length() - expendLength, ssb.length(), Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
        }

    在处理这一块的时候有个细节需要注意,那就是假如在文字切割后的末尾正好有个一个链接,而这个地方又要显示“展开”或者“收回”,这个地方要特别注意链接setSpan的范围,一不注意就可能连同把后面的“展开”或者“收回”也一起设置了,导致事件不对。处理“收回”是差不多的,就不贴代码了。最后还有一个附加功能就是在最后添加时间串的功能,其实也就是在“展开”和“收回”前面加一个串,做好这方面的判断就好了,代码里面已经做了处理。具体可以去Github上面去看。

    项目地址和结语

    Github地址: ExpandableTextView

    展开全文
  • 漂亮实用的jQuery网页在线QQ客服代码,默认不展开点击展开),可以放3个客服QQ、当页面宽度小于1024像素时候自动隐藏,样式很漂亮,js代码推荐下载!
  • 【需求】 如果大家登录过 我傲:http://www.woall.com 新浪博客等 就会发现可以点击栏目标题,就会发现栏目可以展开和收起,非常好用!其实这个功能实现起来很简单.重点就是要找到要隐藏的Table行,对它的display属性进行...
  • 很多网页都需要有这样的特性:某些内容可以进行收缩和展开。当然,是希望在客户端用脚本的方式来实现的。 点击隐藏”按钮之后,我们希望第一个部分的内容隐藏起来,同时按钮的文本也要改变。 我们一般会这样做 <...

    很多网页都需要有这样的特性:某些内容可以进行收缩和展开。当然,是希望在客户端用脚本的方式来实现的。

    image

    点击“隐藏”按钮之后,我们希望第一个部分的内容隐藏起来,同时按钮的文本也要改变。

    image

     

    我们一般会这样做

    <!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>
    <script type="text/javascript" language="javascript">
    function Toggle()
    {
        if(div1.style.visibility=='hidden')
        {
            div1.style.visibility='visible';
           f1.style.height=div1.offsetHeight+'px';
            bt1.value="隐藏";       
        }
        else
        {

            div1.style.visibility='hidden';
            f1.style.height='10px';
            bt1.value='展开';
        }
    }
    </script>
    </head>

    <body>
    <input id="bt1" type="button" οnclick="Toggle()" value="隐藏" />
    <fieldset id="f1">
    <div id="div1" style="visibility:visible">
    这是第一部分的内容

    <br /><br /><br /><br /><br /><br /><br />

    </div>

    </fieldset>
    <br />

    <fieldset>
    <div id="div2">

    这是第二部分的内容
    </div>

    </fieldset>

    </body>

    </html>

     

    这里,可能大家很感兴趣的是那些脚本代码。但我要说,那其实很简单。但你可能在测试的时候,发现代码不能起作用。那是因为这个页面必须有第一句声明。【这是必须的】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

     

    如果要在XSLT中加入这个文档声明,则大致如下

    <xsl:output method="html" indent="yes" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"  doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>

    转载于:https://www.cnblogs.com/chenxizhang/archive/2009/05/26/1489496.html

    展开全文
  • 点击页面其它地方隐藏div所想到的jQuery的delegate ...在网页开发的过程中经常遇到的一个需求就是点击一...先从最简单的开始,假如页面有一个id为test的div,我们要实现点击页面其它地方隐藏该div: div id="te

    点击页面其它地方隐藏div所想到的jQuery的delegate

    在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div。比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单。

    先从最简单的开始,假如页面有一个id为test的div,我们要实现点击页面其它地方隐藏该div:

    <div id="test" style="margin:100px;background-color:#3e3;width:100px;height:100px;">
                            
            </div>

    对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML交互——事件,这不是本文重点,所以这里只是简单介绍一下事件冒泡,

    事件冒泡

    IE的事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的元素

    Netscape的事件捕获:不太具体的节点更早接收事件,而最具体的元素最后接收事件,和事件冒泡相反

    DOM事件流:DOM2级事件规定事件流包括三个阶段,事件捕获阶段,处于目标阶段,事件冒泡阶段,首先发生的是事件捕获,为截取事件提供机会,然后是实际目标接收事件,最后是冒泡句阶段。

    Opera、Firefox、Chrome、Safari都支持DOM事件流,IE不支持事件流,只支持事件冒泡

    如有以下html,点击div区域,按照不同的模型事件元素的click事件触发顺序如下所示:

    复制代码
    <!DOCTYPE html >
    <html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Test Page</title>
    </head>
    <body>
        <div>
            Click Here</div>
    </body>
    </html>
    复制代码

    image

    在触发DOM上的某个事件的时候会产生一个事件对象event,这个对象包含着所有与事件有关的信息,包括产生事件的元素、事件类型等相关信息。所有浏览都支持event对象,但支持方式不同。事件对象有一个方法(W3C:stopPropagation)/属性(IE:cancelBulle=true)可以阻止事件继续冒泡或捕获。我们如果想在事件冒泡到某元素时阻止冒泡可以写一个这样的兼容浏览器方法:

    复制代码
    function stopPropagation(e) {//把事件对象传入
                if (e.stopPropagation) //支持W3C标准
                    e.stopPropagation();
                else //IE8及以下浏览器
                    e.cancelBubble = true;
            }
    复制代码

    因为所有的浏览器都支持事件冒泡,浏览器兼容性考虑,我们一般绑定事件的的时候都会利用事件冒泡而不是事件捕获。了解了这个之后我们可以看看下面两种思路了。

    思路一

    第一种思路分两步

    第一步:对document的click事件绑定事件处理程序,使其隐藏该div

    第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而调用document的onclick方法隐藏了该div。

    复制代码
    <script type="text/javascript">
                function stopPropagation(e) {
                    if (e.stopPropagation) 
                        e.stopPropagation();
                    else 
                        e.cancelBubble = true;
                }
    
                $(document).bind('click',function(){
                    $('#test').css('display','none');
                });
    
                $('#test').bind('click',function(e){
                    stopPropagation(e);
                });
            </script>
    复制代码

    这样当点击页面非div区域的时候,直接或层层冒泡会调用document的onclick方法,隐藏该div,而点击div或其子元素的时候,事件总会冒泡的div本身,这时候会阻止事件继续冒泡,不会调用doument的onclick方法致使div被隐藏,从而完成了我们的需求。

    思路二

    我们之前提到,在触发DOM上的某个事件的时候会产生一个事件对象event,这个对象包含着所有与事件有关的信息,包括产生事件的元素、事件类型等相关信息,思路一中div的click事件处理程序传入的参数就是这个event对象。访问IE中的event对象有几种不同的方式,取决于指定事件处理程序的方法。直接为DOM元素添加事件处理程序时,event对象作为window对象的一个属性存在。

    event对象包含了一个重要属性:target(W3C)/srcElement(IE),这个属性标识了触发事件的原始元素,思路二就是要利用这个属性。我们可以直接对document的click事件绑定事件处理程序,在事件处理程序中判读事件源是否为id==test的div元素或其子元素,如果是则方法return不做操作,如果不是则隐藏该div。

    复制代码
    <script type="text/javascript">
                $(document).bind('click',function(e){
                    var e = e || window.event; //浏览器兼容性
                    var elem = e.target || e.srcElement;
                    while (elem) { //循环判断至跟节点,防止点击的是div子元素
                        if (elem.id && elem.id=='test') {
                            return;
                        }
                        elem = elem.parentNode;
                    }
    
                    $('#test').css('display','none'); //点击的不是div或其子元素
                });
            </script>
    复制代码

    这样当点击页面任何地方的时候都会层层冒泡至document的click事件,事件处理程序会判断事件源是否为id==test的div或其子元素,如果是方法return,否则隐藏该div,也能够实现我们的需求。

    注意点及优劣

    这两种思路都依赖于事件冒泡,所以我们在处理其它相关元素的click事件的时候一定要注意这点,避免其他相关元素的click事件处理程序中包含阻止事件冒泡代码而影响了该功能。

    这两种方式都很容易理解,貌似思路一更优秀一些,看起来它的处理更简单一些,不用去层层判断事件源,直接把click事件绑定在该div上。在这个例子中确实如此,但是有些复杂的页面就不尽然了,假如我们有一个页面,上面有数十个div都需要点击页面其它地方隐藏这类问题

    复制代码
    <div class="dialogs">
            <div class="dialog">
                <div id="1">1</div>
                <div id="2">2</div>
            </div>
            <div class="dialog">
                <div id="1">1</div>
                <div id="2">2</div>
            </div>
            <div class="dialog">
                <div id="1">1</div>
                <div id="2">2</div>
            </div>
            ...
        </div>
    复制代码

    我们用思路一写出的代码可能是这样:

    复制代码
    <script type="text/javascript">
                function stopPropagation(e) {
                    if (e.stopPropagation) 
                        e.stopPropagation();
                    else 
                        e.cancelBubble = true;
                }
    
                $(document).bind('click',function(){
                    $('.dialog').css('display','none');
                });
    
                $('.dialog').bind('click',function(e){
                    stopPropagation(e);
                });
            
            </script>
    复制代码

    看起来简单依旧的样子,但是我们仔细想想就会发现问题,我们在每个dialog上都绑定了类似的方法,维护如此多的click事件处理程序对内存来说绝对是可开销,导致我们页面运行缓慢。而且如果我们可以动态使用ajax创建新dialog问题又来了,新创建的dialog不能实现隐藏功能!因为绑定函数已经执行完了,不会再为新的dialog绑定click事件处理程序,我们只能自己来做此事。也就是说思路一无法把处理程序附加到可能还未存在于DOM中的DOM元素之上。因为它是直接把处理程序绑定到各个元素上,它不能把处理程序绑定到还未存在于页面中的元素之上。

    这时候就是思路二展示身手的时候了,我们看看思路二在这种时候代码的书写

    复制代码
    <script type="text/javascript">
                $(document).bind('click',function(e){
                    var e = e || window.event;
                    var elem = e.target || e.srcElement;
                    while (elem) {
                        if (elem.className && elem.className.indexOf('dialog')>-1) {
                            return;
                        }
                        elem = elem.parentNode;
                    }
    
                    $('#test').css('display','none'); 
                });
            </script>
    复制代码

    改动也相当的小,我们来看看是不是能解决上边的两个问题了,首先无论多少个dialog我们只是绑定了一个click事件处理程序,对性能影响不大,添加一个新的dialog思路二的代码还好不好使呢,依旧好使,这样我们就能发现在复杂页面的情况下实际上思路二是一种更优秀的解决方案。

    这些都明白了,我们就能说说本文的第二个主角jQuery的delegate方法了。

    delegate

    首先看看jQuery官方对delegate的语法及描述

    .delegate( selector, eventType, handler(eventObject) )

    Description: Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.

    delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

    使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

    $( "table" ).delegate( "td", "click", function() {
          $( this ).toggleClass( "chosen" );
        });

    通过上面语句我们就可以为所有table的td绑定click事件处理程序。

    delegate方法设计意图在于把处理程序附加到单个元素上或是一小组元素之上,监听后代元素上的事件而不是循环遍历并把同一个函数逐个附加到DOM中的多个个元素上。把处理程序附加到一个(或是一小组)祖先元素上而不是直接把处理程序附加到页面中的所有元素上,从而带来性能上的优化。

    jQuery版隐藏dialog

    通过上面知识我们可以发现jQuery的delegate方法可以方便实现我们隐藏div的需求

    <script type="text/javascript">
                $('.dialogs').delegate('.dialog','click',function(){
                    $(this).css('display','none');
                });
            </script>

    使用jQuery我们发现比我们思路二在性能上又有了小幅提升,因为我们不需要冒泡至document处理了,只需要在dialog的父元素就可以处理完成了,可以不至于把很多类似功能都绑定到document上,需要注意的一点就是jQuery已经贴心的帮我们把this处理为事件源,处理起来更是如鱼得水了。

    delegate与bind

    通过上面我们说一堆我们可以在权衡使用bind还是delegate上有一定依据了,如果就单独绑定一个元素的事件处理程序,用bind还是很合适的,但是如果处理很多类似元素的事件处理程序的时候不妨考虑一下delegate,看看是否对提高性能有所帮助。

    展开全文
  • JS点击进行展开和折叠的功能代码

    万次阅读 2018-09-03 11:13:20
    需要打开网页时部分内容默认隐藏(折叠),然后点击相应的文字或图片进行显示(展开),再点击进行隐藏(折叠)。网上查了资料,类似的代码很多,以下是三种可以实现此功能的代码: &lt;script&gt;  /*...
  • 在展示大量文本的时候,很多网站会在页面上出现一个展开全文的... 它旁边的点击展开全文默认隐藏 , 超过高度展示 .展开全文点击后更换文字内容为收起全文下面直接展示代码:1、html的div文本内容比如是这样内容.........
  • 网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面...先从最简单的开始,假如页面有一个id为test的div,我们要实现点击页面其它地方隐藏该div: <div id="test" style="margin:100px;...
  • 网页开发的过程中经常遇到的一...先从最简单的开始,假如页面有一个id为test的div,我们要实现点击页面其它地方隐藏该div:   对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解J
  • html 将部分内容隐藏/显示

    万次阅读 2017-10-27 22:21:26
    最近在做网页(一群完全不会网页的人不知道哪来的自信去水网页设计比赛),需要实现一部分内容的点击展开,就像评论区——展开所有评论。所以上网搜了一下html内容的隐藏实现,基本上都是用的visibility和display...
  • 前言 最近慢慢习惯了新环境,也渐渐的变得忙碌起来。之前暴雷的事情有同学还是...+ 2、内容中有链接的话,需要隐藏链接,将链接显示成“网页链接”,并实现点击跳转网页; + 3、内容中含有@+“内容”,需要携带...

空空如也

空空如也

1 2 3 4
收藏数 76
精华内容 30
关键字:

网页实现点击展开隐藏实现