Google MDL - 在jquery中创建卡片仅显示文本 - 没有背景或边框 [英] Google MDL - Creating card in jquery shows only text - no background or border

问题描述

我有以下代码可以动态创建MDL卡

I have the following code which creates an MDL Card on the fly

                        var resultsHolder   = $('#resultsHolder');
                        var gridHolder      = $('<div>',{ 'class' : 'mdl-grid' });
                        var card            = $('<div>',{ 'class' : 'mdl-card.mdl-shadow--2dp data-display' });
                        var title           = $('<div>',{'class' : 'mdl-card__title'});
                        var h4              = $('<h4>');
                        var supportingText  = $('<div>',{'class' : 'mdl-card__supporting-text'});
                        var supportingPara  = $('<div>',{'class' : 'projectDesc'});

                        h4.append($('#projectName').val());
                        title.append(h4);

                        supportingPara.append($('#projectDesc').val());
                        supportingText.append(supportingPara);

                        card.css('width','100%');
                        card.append(title);
                        card.append(supportingText);

                        gridHolder.append(card);
                        resultsHolder.prepend(gridHolder);

                        componentHandler.upgradeElement(resultsHolder);

同时显示新卡的内容。没有出现边框或背景。

While the contents of the new card appears. None of the border or background appears.

我看到以下链接

如何更新/刷新Google MDL我动态添加到页面的元素？

但使用以下任何一项;

but using any of the following;

• componentHandler.upgradeDom（）;


• componentHandler.upgradeElement（）;

通过持卡人的等级 - $（ '#resultsHolder'）

pass the class of the card holder - $('#resultsHolder')

似乎没有什么区别。

那么如何制作我的全卡出现。

So how can I make my full card appear.

推荐答案

最终使用JQuery管理它，但使用原始JavaScript来创建元素。因此，创建卡片，标题，支持文本和操作的修订版本如下;

Eventually managed it not with JQuery but using raw JavaScript to create the elements. So a revised version which creates a card, title, supporting text and actions is as follows;

var resultsHolder   = document.getElementById('resultsHolder');
var gridHolder      = document.createElement('div');
var card            = document.createElement('div');
var title           = document.createElement('div');
var h4              = document.createElement('h4');
var supportingText  = document.createElement('div');
var supportingPara  = document.createElement('p');
var cardActions     = document.createElement('div');
var detailButton    = document.createElement('button');

try {
    // assign classes
    gridHolder.className        = 'mdl-grid';
    card.className              = "mdl-card mdl-shadow--2dp data-display";
    title.className             = 'mdl-card__title';
    supportingText.className    = 'mdl-card__supporting-text';
    supportingPara.className    = 'projectDesc';
    cardActions.className       = 'mdl-card__actions mdl-card--border mdl-typography--text-right';
    detailButton.className      = 'mdl-button mdl-js-button mdl-js-ripple-effect';

    // add special styles
    card.style.width        = '100%';
    // card.style.opacity      = '0';

    // add text
    h4.innerHTML                = $('#projectName').val();
    supportingPara.innerHTML    = $('#projectDesc').val();
    detailButton.innerHTML      = 'Details';  

    // build the title
    title.appendChild(h4);

    // build the supporting text
    supportingText.appendChild(supportingPara);

    // build the actions
    cardActions.appendChild(detailButton);

    // build the card
    card.appendChild(title);
    card.appendChild(supportingText);
    card.appendChild(cardActions);

    gridHolder.appendChild(card);
    resultsHolder.insertBefore(gridHolder,resultsHolder.firstChild);

    // now upgrade components so they are handled correctly by mdl
    componentHandler.upgradeDom(gridHolder);
}
catch(e) {
    alert( e );
}

这篇关于Google MDL - 在jquery中创建卡片仅显示文本 - 没有背景或边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！