Google文档Web开发者资源列表

Google Docs Web Development Resources 需要能访问Google Doc

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1509
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var public_spreadsheet_url = 'https://docs.google.com/spreadsheets/d/1tI-4ympZD6trqJI2dYyqaeoLXFGlG7MduUR_k97-JW8/pubhtml';

function init() {
    Tabletop.init({
        key: public_spreadsheet_url,
        callback: showInfo,
        simpleSheet: true,
        orderby: 'name',
        reverse: true,
    })
}
init();

function showInfo(data, tabletop) {
    console.log(data);
    for (i = 0; i < data.length; i++) {
        var url = data[i].URL;
        var star = data[i].Starred;
        var name = '<td><a href="' + url + '" target="_blank">' + data[i].Name + '</a></td>';
        var type = '<td>' + data[i].Type + '</td>';
        var type_class = data[i].Type.toLowerCase().split(' ').join('_');
        var uses = '<td>' + data[i].Uses + '</td>';
        $('.resource-grid').prepend('<tr class="item ' + type_class + '">' + name + type + uses + url + '</tr>');
    }
}

$(".resource-grid").sieve({
    itemSelector: "tr"
});
$('#resources > div').addClass('search-box');

$('.buttons button').on('click', function() {
    var delay = 150;
    var filter = '.' + $(this).attr('id');
    $('.buttons button').removeClass('selected');
    $(this).addClass('selected');

if (filter == '.show_all') {
        $('.resource-grid tr').fadeOut(delay).delay(delay).fadeIn(delay);
    } else {
        $('.resource-grid tr').fadeOut(delay);
        $('tr' + filter).delay(delay).fadeIn(delay);
    }
})

编译

CSS

.selected {
    font-weight: bold;
    text-decoration: underline;
}
#resources {
    margin: 2.5%;
}
#resources h1 {
    text-align: center;
    font-size: 2em;
    font-family: 'Verdana', sans-serif;
    font-weight: 700;
    text-decoration: underline;
}
.resource-grid {
    display: block;
}
.item {
    border: 2px solid black;
    font-family: 'Arial';
}
.item td {
    box-sizing: border-box;
    padding: 0.5em;
}
.item td:nth-of-type(2) {
    font-style: italic;
}
.item td a {
    text-decoration: none;
}
.info_site {
    color: #286abd;
    background-color: #d4e3f6;
}
.info_site a {
    color: #1f5293;
    font-weight: bold;
    font-size: 1.1em;
}
.wordpress_plugin {
    color: #f7af0a;
    background-color: #fef8e8;
}
.wordpress_plugin a {
    color: #c88d06;
    font-weight: bold;
    font-size: 1.1em;
}
.js_plugin {
    color: #c71b0b;
    background-color: #fbc2bc;
}
.js_plugin a {
    color: #971408;
    font-weight: bold;
    font-size: 1.1em;
}
.online_tool {
    color: #319e67;
    background-color: #c7eeda;
}
.online_tool a {
    color: #25774d;
    font-weight: bold;
    font-size: 1.1em;
}
.buttons {
    display: block;
    width: 100%;
}
.buttons::after {
    clear: both;
    content: "";
    display: table;
}
.buttons button {
    width: 100%;
    display: inline-block;
    float: left;
    box-sizing: border-box;
    padding: 0.75em;
    font-size: 0.75em;
    cursor: pointer;
}
@media screen and (min-width: 480px) {
    .buttons button {
        width: 20%;
    }
}
.buttons button#info_site {
    color: #235ea8;
    background-color: #aac8ed;
    border: 3px solid #1b467e;
}
.buttons button#js_plugin {
    color: #af180a;
    background-color: #f9958c;
    border: 3px solid #7f1107;
}
.buttons button#online_tool {
    color: #2b8a5a;
    background-color: #a0e1c0;
    border: 3px solid #1f6341;
}
.buttons button#wordpress_plugin {
    color: #e19e07;
    background-color: #fde7b7;
    border: 3px solid #af7b05;
}
.buttons button#show_all {
    color: #4a545e;
    background-color: #b2bac2;
    border: 3px solid #343b42;
}
.search-box {
    text-align: right;
    display: block;
    box-sizing: border-box;
    padding: 1em;
}
.search-box::after {
    clear: both;
    content: "";
    display: table;
}

HTML

Google Docs Web Development Resources 需要能访问Google Doc

编辑器支持Emmet

快捷键

Google Docs Web Development Resources 需要能访问Google Doc

原生WebGL单纯形噪音（simplex noise）算法生成的粒子特效

Web Animation API开发实例 - 涟漪动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：