第 12篇 使用jQuery

aki发表于:2016年11月14日 17:12:01更新于:2019年02月01日 10:56:50

概要

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

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

使用Cybozu CDN

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

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

0015829802e2e33dad8424415d7c7f2

在要使用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篇 (准备中) >>


    您需要登录后才可以回复