m.lom599.com_手机版乐白家网址_乐百家手机首页登录

实现评论等级好评差评特效,javascript创建对象的

作者: 手机版乐白家网址  发布:2019-07-10

实现评分等级,就类似于淘宝的好评差评特效,点击不同的等级图标显示相应的文字,先来看下效果。

Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等。今天就结合Bootstrap table的父子表和行列调序的用法再来介绍下它稍微高级点的用法。

在js中有几种模式可以创建对象,通过对象操作所包含的属性与方法。

图片 1

bootstrap table系列:

一般来说,构造函数名称的第一个字母为大写字母,非构造函数名称的第一个字母为小写字母,当然,构造函数与一般函数唯一的区别只是调用的方式不同而已,所以任何函数只要通过new来调用,那它就可以作为构造函数,若不通过new来调用,则与一般函数一样。

看完效果后估计大家都明白我要说的是什么了吧,下面小编就带大家看下代码

JS表格组件神器bootstrap table详解(基础版)

谈谈我对这几种模式的理解:

复制代码 代码如下:

JS组件系列之Bootstrap table表格组件神器【终结篇】

工厂模式:创建一个一般函数,在函数里创建一个Object对象,为这个对象增添属性与方法,同时赋予其值,最后返回对象。无法识别对象类型。

<style>
        .maxdiv div{
            height:10px;
            width:20px;
            border:1px solid #000;
            float:left;
            margin:20px 2px 0px 5px;
        }
</style>

JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】

构造函数模式:创建构造函数,使用this来赋值,每当创建一个实例时,方法都被创建一次,而每个方法都执行相同的命令,这就多余了。这个缺点可以通过将方法放到全局环境中,但是,这样就没有封装性了。不过可以通过原型模式解决。

复制代码 代码如下:

一、效果展示

原型模式:每个函数都有一个prototype属性,该属性是一个指针,指向一个对象,该对象包含其函数创建的所有实例共享的属性与方法。

<div class="maxdiv">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
<span></span>

今天稍微改变下方式,先来看看实现效果,后面再介绍代码实现及注意事项。来,效果图来一发:

原型对象,构造函数以及实例之间的关系如下图:

最后大家看下JS 上边小编已经把注释都注上了,其实也不难,主要是加深理解..

1、父子表效果图

    图片 2

复制代码 代码如下:

图片 3

图解:1:构造函数以及由构造函数创建的实例,它们的prototype属性都指向构造函数的原型对象。

$(function(){
    $(".maxdiv div").bind("hover",function(){
        $(this).attr("style","background:red");//当前div加上style="background:red";
        $("div:last").prevAll().attr("style","background:red");//给所有的都加上样式;
        $(this).nextAll().attr("style","");//当前div后的所有所有样式都为"";
        var dsize=$("div [style ='background:red']").size();//获得所有背景含有style="background:red"的个数;
        if(dsize==1)
        {
        $('span').text("很差");
        }
        else if(dsize==2)
        {
        $('span').text("差");
        }
        else if(dsize==3)
        {
        $('span').text("一般");
        }
        else if(dsize==4)
        {
        $('span').text("好");
        }
        else if(dsize==5)
        {
        $('span').text("很好");
        }
    });
});

图片 4

2:构造函数的原型对象具有constructor属性,该属性指向构造函数。

个人能力有限,做的不是太美观,有需要的朋友可以拿去再美化一下,呵呵。

图片 5

3:构造函数的原型对象所包含的所有属性与方法可以被由构造函数所创建的所有实例共享。

您可能感兴趣的文章:

  • jQuery基于图层模仿五星星评价功能的方法
  • 基于jquery实现五星好评

2、行调序

使用对象字面量重写原型对象后,constructor则指向object构造函数,若需要其指向另一构造函数,则需修改原型对象的constructor属性的值,比如:constructor:Person,这样Person的原型对象即使被重写,原型对象的constructor仍指向Person构造函数。

调序前

当先创建实例时:若是直接添加属性或方法,实例可以访问。

图片 6

若是重写原型对象,则构造函数的prototype指向新的原型对象,而之前创建的实例的prototype仍指向最初的原型对象,所以实例访问不到新的原型对象的新属性或和新方法。

拖动行调序到第一行

原型对象包含的是共享的属性与方法,那么每个实例都拥有这些信息,这样实例之间就没有什么不同了,而且还不可以传参数,这不是我们所想要的。每个实例之间有共同的信息,又有不同的信息,所以我们可以组合使用构造函数模式与原型模式。

图片 7

构造函数模式与原型模式的组合使用:

3、列调序

                          图片 8

调序前

态原型模式:将独立的构造函数与其原型对象结合在一起,在构造函数里初始化原型,为其添加方法。

图片 9

                            图片 10

拖动列标题调序

若该方法不存在,则将其添加到原型对象上,只在初始化原型时才执行,而且只执行一次。

图片 11

寄生构造函数模式:与工厂模式类似,区别为:寄生构造函数模式为构造函数,通过new来创建实例。

调序后

稳妥构造函数模式:没有公共的属性,其方法不引用this的对象。创建实例时不使用new。只能通过方法访问属性(即传入的数据)。

图片 12

以上这篇javascript创建对象的几种模式介绍就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

二、父子表代码详解

您可能感兴趣的文章:

  • javascript工厂模式和构造函数模式创建对象方法解析
  • 浅谈js对象的创建和对6种继承模式的理解和遐想
  • JavaScript对象创建模式实例汇总
  • js 创建对象 经典模式全面了解
  • 在javascript中创建对象的各种模式解析
  • 浅析在javascript中创建对象的各种模式
  • JavaScript中创建对象的模式汇总
  • js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
  • 深入理解JavaScript系列(47):对象创建模式(上篇)
  • JavaScript中创建对象的7种模式详解

上章我们介绍Bootstrap table基础用法的时候介绍过,初始化表格的时候有一个属性“detailView”,将它设置为true,在每行的前面即可看到一个“ ”形状的图标。点击这个图标即触发加载子表格的事件。大概的原理就是如此,来看看代码,其实也很简单。

本文由m.lom599.com发布于手机版乐白家网址,转载请注明出处:实现评论等级好评差评特效,javascript创建对象的

关键词: m.lom599.com