概要

到此为止，我们已经学习了如何使用库来自定义。但是JavaScript的库很多，而且都很便利。其中最有名的是jQuery。

jQuery是可以让JavaScript的代码变得更加简洁的库。具体怎么简洁呢？我就摘取前面学过的代码，用jQuery改写后，对比一下有什么区别(^^♪

使用Cybozu CDN

使用jQuery 的时候，您可以从官网下载 文件之后，跟以往的做法一样上传到kintone。不过，这次要使用比这个更便利的 Cybozu CDN (^^♪

从刚才提到的页面的库 中拷贝任意jQuery版本的URL，如下图在"通过JavaScript / CSS自定义"页面通过URL添加，然后保存。下面是使用jQuery 1.11.2的URL的范例。

在要使用jQuery库的应用中所需要的设置仅仅就这些，是不是超级便利～＼(^o^)／

调用jQuery

首先，我们拿第 1篇 中学过的代码来试试看。(^^♪
就是使用记录列表事件弹出警告的简单脚本。对于已经学到这里的同学们来说这个写法已经是耳濡目染了吧。用JavaScript写的话就是这样滴。

(function() {
    "use strict";
    kintone.events.on('app.record.index.show', function(event) {
        window.alert('记录列表事件');
    });
})();

用jQuery的话就是像下面这样写。

jQuery(function($) {
    "use strict";
    kintone.events.on('app.record.index.show', function(event) {
        window.alert('记录列表事件用jQuery!');
    });
});

单看这段代码的话，不一样的就第一行和最后一行而已。虽说是使用jQuery，也只是说如果要再追加代码的时候可以使用jQuery，并不一定要把之前用JavaScript写的代码全部换掉哦＼(*^▽^*)ノ

开头部分有很多种写法，不过你只要记住”是这样写滴“就错不了。想了解更多的同学可以查看 jQuery( callback ) 等（*^_^*）

试着用jQuery 操作一下DOM

接着我们再拿第 2篇 最后的代码范例来试试(^^♪
为了尽量保持和原来的样子一致，就像直译一样一行行替换成jQuery。请务必认真对比一下原来的代码。

jQuery(function($) {
    "use strict";
    kintone.events.on('app.record.index.show', function(event) {
        if ($('#my_index_button')[0]) {
            return;
        }
        var $myIndexButton = $("<button>", {
            id: 'my_index_button',
            text: '列表的按钮'
        }).click(function() {
            var myHeaderSpace = kintone.app.getHeaderSpaceElement();
            // 字符串元素
            var $myListHeaderDiv = $("<div>", { text: '你按了吧！按了才出来的的的的...'}).css({
                "width": '100%',
                "height": '35px',
                "text-align": 'center',
                "font-size": '30px',
                "font-weight": 'bold',
                "background-color": '#ffd78c'
            });
            
            // 在菜单栏的下方空白处显示文字
            $(myHeaderSpace).html($myListHeaderDiv);
        });
        
        $(kintone.app.getHeaderMenuSpaceElement()).append($myIndexButton);
    });
});

对比下来感想如何？

看$myListHeaderDiv 等的写法就可以知道，要输出的HTML标签的各属性可以通过数组形式进行批量设置，"width"等CSS属性名称可以在后面直接使用，这是最大的区别！

顺便来点花样。上面代码的第23行写成下面这样后执行看看。 

// 在菜单栏的下方空白处显示文字  
$(myHeaderSpace).hide().html($myListHeaderDiv).slideDown("slow");

这么样，比之前更加有动感了吧＼(^o^)／
这个是使用jQuery标准特效功能的一个小小例子。使用jQuery的话，可以轻松地实现类似这样的效果哦！

试着用jQuery 来控制处理

最后，拿第 5篇最后的改变信号灯颜色的脚本来改写看看(^^♪

这里也是尽量”直译式“的改写，主要改了循环和条件分歧部分，请务必对比看看。

jQuery(function($) {
    'use strict';
    kintone.events.on('app.record.index.show', function(event) {
        if (!event.size) {
            return;
        }
        var signalColorParts = kintone.app.getFieldElements('信号颜色');
        $.each(event.records, function(i, record) {
            // DOM元素取得
            var $part = $(signalColorParts[i]);
            // 根据值分开显示
            switch (record.信号颜色.value) {
                case '红':
                    $part.css({
                        "font-weight": 'bold',
                        "color": '#ffffff',
                        "background-color": '#ff0000'
                    });
                    break;
                case '蓝':
                    $part.css({
                        "font-weight": 'bold',
                        "color": '#ffffff',
                        "background-color": '#0000ff'
                    });
                    break;
                case '黄':
                    $part.css({
                        "font-weight": 'bold',
                        "color": '#ffffff',
                        "background-color": '#ffd700'
                    });
                    break;
            }
        });
    });
});

原来 for语句的地方用jQuery.each()改写，if语句用switch()改写。
仅仅改写了这些，因为减掉了不必要的变量，整体看上去更加好懂了吧？

顺便也加点东西玩玩看。只有一行不一样。请试试看效果会怎么样。

                case '黄':
                    $part.css({
                        "font-weight": 'bold',
                        "color": '#ffffff',
                        "background-color": '#ffd700'
                    });
                    setInterval(function(){$part.fadeToggle(500)}, 500); // ← 追加了这行
                    break;

使用标准JavaScript的setInterval和jQuery的特效功能，实现了和真实信号灯一样黄色会闪烁的效果了吧。
更加耀眼了吧・・・・(+ω+;)
使用jQuery的话，类似更改可以更加轻松实现！大家是不是进一步理解了？

最后

和以往一样，这里只是简单介绍JavaScript及jQuery的写法和使用方法，至于其详细的内容在此不作说明。单单看这里的例子的话，可能有人会想：”一开始说可以缩短代码，也没有怎么缩短嘛“ (苦笑)
但是，在实际运用中需要写大段大段代码的时候，应该就能明白与JavaScript的真正区别、体会到jQuery的重要性了。这里只是举了几个代码范例而已，为了能真正体会到这种感觉，还请大家也动手改写一下之前学过的范例吧(^^)

另外，要说使用jQuery的好处，当属以jQuery UI 为首的众多强大且丰富的插件、库集。使用这些，不管是外观还是操作上都可以轻轻松松地实现丰富的UI。 其中一个例子就是 使用Sortable对记录进行排序 （暂无中文页面）。

那么，下次再见（*^_^*）

Let’s kintone customize＼(^o^)／

该Tips在2015年4月中进行过确认。

<< 第 11篇 使用REST API更新记录  | 第13篇 (准备中) >>