Material Design风格的人物信息介绍卡片

当前位置:主页 > jQuery库 > 布局和界面 > Material Design风格的人物信息介绍卡片
Material Design风格的人物信息介绍卡片
分享:

    插件介绍

    material-cards是一款基于谷歌Material color palette的Material Design风格的人物信息介绍卡片设计。该插件可以简单使用jQuery代码来实现,也可以以jQuery插件的形式来管理各种参数选项。

    浏览器兼容性

    浏览器兼容性
    时间:2015-07-31
    阅读:
简要教程

material-cards是一款基于谷歌Material color palette的Material Design风格的人物信息介绍卡片设计。该插件可以简单使用jQuery代码来实现,也可以以jQuery插件的形式来管理各种参数选项。

安装

你可以通过bower来安装该Material Design风格卡片插件。

bower install material-cards             
              

使用方法

你可以通过简单的jQuery代码来实现这个Material Design风格卡片效果,如DEMO1。或者也可以使用jquery.material-cards.js来将它作为jQuery插件的形式来使用,以管理各种参数,方法和事件。

<script src="js/jquery.material-cards.js"></script>                
              
HTML结构

一张信息卡片的基本HTML结构如下:

<article class="material-card Red">
    <h2>
        <span>Christopher Walken</span>
        <strong>
            <i class="fa fa-fw fa-star"></i>
            The Deer Hunter
        </strong>
    </h2>
    <div class="mc-content">
        <div class="img-container">
            <img class="img-responsive" src="img/thumb-christopher-walken.jpg">
        </div>
        <div class="mc-description">
            人物描述信息...
        </div>
    </div>
    <a class="mc-btn-action">
        <i class="fa fa-bars"></i>
    </a>
    <div class="mc-footer">
        <h4>
            Social
        </h4>
        <a class="fa fa-fw fa-facebook"></a>
        <a class="fa fa-fw fa-twitter"></a>
        <a class="fa fa-fw fa-linkedin"></a>
        <a class="fa fa-fw fa-google-plus"></a>
    </div>
</article>   
              
初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该Material Design风格卡片插件。

$('.material-card').materialCard(options);                
              

配置参数

options = {
    icon_close     : 'fa-arrow-left', //string
    icon_open      : 'fa-bars',       //string
    icon_spin      : 'fa-spin-fast',  //string
    card_activator : 'click'          //string: click or hover
});                
              

图标使用的是 Font Awesom字体图标,fa-spin-fastfa-spin相同,但是会旋转得更快一些。

默认的card_activator是鼠标点击事件,你也可以设置为鼠标滑过事件(这会将按钮移除)。

方法

  • toggle:改变选择的卡片的状态。
    $('.material-card').materialCard('toggle');
    
  • open:打开选择的卡片。
    $('.material-card').materialCard('open');
    
  • close:关闭选择的卡片。
    $('.material-card').materialCard('close');
    
  • isOpen:检查卡片的状态,返回truefalse
    if($('.material-card:eq(3)').materialCard('isOpen') === true) {
        // do something
    }
    

事件

  • show.material-card:在open方法被调用时会立刻被触发。
  • shown.material-card:当卡片变为可见时触发(会等到CSS transitions结束才触发)。
  • hide.material-card:在close方法被调用时会立刻被触发。
  • hidden.material-card:当卡片被隐藏时触发(会等到CSS transitions结束才触发)。

应用举例

$('.material-card').on('shown.material-card', function (event) {
    console.log(event.type, event.namespace, $(this));
    //that return
    //shown material-card [article.material-card...]
});                
              
var fullCardEvent = 'shown.material-card show.material-card hide.material-cards hidden.material-cards';
$('.material-cards').on(fullCardEvent, function (event) {
    //   do something
});