12. 尚硅谷_佟刚_Ajax_使用 BlockUI

由城市到部门，由部门到员工，这个时间是不是一模一样啊？是吧，所以说那个的话我们就不写了，那下面的话呢，我们来说一下这个，呃，转那个小圈上是怎么加的这个插件呢，叫j query的block UI。我们首先我们打开这个block UI。这个里边啊，有一个GS，还有这么一个这个HTML，这实际上是个什么呢？实际上是一个帮助文档我打开。打开之后啊，你点一个叉，你不点叉的话呢，它就怎么样，它就向那个官网去请求，然后的话呢，我们点这个demos，呃，点叉别忘了哈，好了，这里边的话呢，有一些例子我们看一下。第一个例子。哎，就是这样一个效果。I photo。嗯。好，我们可以一个一个看一下，看完之后的话怎么了，看完之后的话呢，我们就可以选择啊，我们想用哪个。

Waiting是不是有点A那个效果呀，不过请求的时候，只要那个请求发出了，然后那个响应还没回来，我就让他给我显示这个东西不就可以了吗。但这个的话呢，不能动，一会我们可以看一个能动的啊。行，具体写法的话呢，里边都有例子。啊，我们不再一个一个说了，那我们转那个小图片是什么呢？实际上是它。我们在这个页面上有这么一行代码是吧？就在images里边有一个logging.gif。呃，这个我得先拷过来。嗯。Copy。我把这个图片呢拷给大家看一眼。

是不是这么一个东西在转？大家第一次看的时候，确实是感觉好像好像是一个动态的，后来然后有同学问我，我说是一个GIF图片，那哥们巨失望。就感觉好像自己的这个。信仰坍塌了一样是吧？怎么会这样呢？呃，在小时候。很小的时候，那个时候我我那个时候，我小时候才刚那有发廊就是。现在的这个剪头的地儿等就发廊，发廊那块不是有一个转的一个柱嘛，是吧，就天真的以为那个东西是一直在往上转，然后就想他怎么他怎么往上转呢，后来才发现他就是往上转，然后完了上面给你。弄一些图案的感觉是这样。还有是吧，小的时候也是上小学的时候是吧，我们有一个特别牛的一个这个，呃，班主任。

讲数学语文嘛，就是讲主要课嘛，老师特别厉害，我特别崇拜他是吧，特别特别崇拜，有一次呢，一不小心就就在这个洗澡的时候看见他了，我发现他跟我长得一样，我就很失望。我想，这么厉害的人，他怎么也脱了隐，怎么跟我长得差不多呢？后来长大了才知道是吧，原来不是这样，哎，我们这块就是是吧，这就是一个转的东西。所以说我们这个图片往这一放，下一个目标是什么呢？下一个目标我们就是希望在Ajax请求发出的时候，这个图片显示。Ajax请求响应回来的时候，这个图片消失就可以了吧。干这件事，比如我们再打开它这里边儿啊。有一个overview，大家看。往下。最后一行你看，如果你要是想这个使block UI对AX起作用的话，我们就可以这样来写，叫Ajax开始的时候。

写它Ajax结束的时候写它，那我于是的话，怎么这行代码我复制一下，我看一看。这复制之后的话，它是个什么样的。那当然，我需要把这个。ES拷进来。这块的话呢，我已经导入了啊，于是我们看一看加上这个之后，它是个什么情况。刷新。好，我找一个。大家看是不是这么一个效果呀，因为默认的它是这样，所以说我需要怎么样，我需要去改它，给它改成那个图片吧。

那个图片。是哪个呢？这个时候我们需要来看这个。你看那个例子哈。说图片的。有一个带图片的image。图片，我们只要把我们那个小图小图片放在这块就可以了，所以说我们改一下看看怎么写的哈，说这里边。加上一个block里边加它，Block UI里面加上它，看到这结束。Control。See。那好吧。两边的符号也包含。于是过来。这个格式太差了。

大家看。这是个这是个什么格式，是不是啊。你看这不是吗？冒号的形式是吧。里边儿又是杰森。第基森顺文。然后上面是那个大的接水。然后结束。保存好了，我们看我们加完这个之后的话呢，我们现在显示的应该是这个图片，这个图片这个ID，我来写一下。Control c。过来。加上OK，看一下效果。刷新。但没头了是吧？

这样不好是吧？我没开始HS，他是不是就不应该执行啊。懂我这个意思吧，Block UI。这部分CTRLX。以前是这么写的吗？看看以前的代码。回来。哦，没有括号吧，以前是没有括号的，以前是这么写的。保存。对，这样就好了。这是没问题的，那我们看这个例子吧。看这上面是怎么写的呢？这个例子我们找到。这个里边。找到demos，看人家是怎么写的啊。这个是只有我点的时候哦，可力可力方程写外边是吧，看到了吧。

好吧，应该是这么一个效果，CTRLC，那我这这应该给谁呀。这应该给我们的这个start吧。我看我复制的是哪一部分。呃，都复制了，那就是给他。Control。喂。啊，这个太太不爽了。CC。好吧，我们在这个在这个基础上写吧。Function。然后呢？把里边这个给它移进去。CTRLX。CTRLV啊，应该是这么一个效果。好了，再看。再看一下那个例子哈。Function没问题。好了再走。是这么一个效果吧。

好了，那还差点什么呀，比方说差点这个，嗯，背景色呀，那他没有边框啊，没有边框这个事应该怎么搞啊。还得看例子，没有边框的找一个。这个有边框的。应该是什么？应该是有一个CSS包是none啊。好，看这个。啊，这个没有边框，我们看看来边框是不是CSS，加上包装肾脏就好使。Ctrl c CSS border就可以了。嗯。保存再看。还差一点什么呀，我这个背景色有点不好是吧，背景色要是跟我这个图片是一个颜色是不是就好了，那背景色怎么调呢？背景色，我们是不是看到它有一个什么绿色的还是蓝色的那么一个东西是吧。

嗯。Background color啊，这个就是对。Control。C。拿过来。我们这应该是FF。这个。白色吗？刷新。背景是没变的。是这个啊。我们看它有一个全绿的那个。不是这个。不是这个，哪个是这个。把他。叫看不对吧，叫什么over play CSS吧。对吧，应该这么看啊，把这个复制过来。不，不再是CSS，而是他。过来看。

加一个逗号。这么写吧。F看效果。刷新找一个。是不是可以了。不就是这个效果吗？这样这个就可以显示啊，这就是我们整个这个调的这个过程，那同学可能会问是吧，说老师这里边每一个都是什么意思啊，讲实话我也不知道。你需要的时候过来调就可以，很多东西就是拿来之后就可以用。那好了，我现在的话呢，把这个文档发给大家，大家的话呢，也像我这样来写一下。这个block UI啊，它就是在我们发送AX请求的时候开始工作，这个响应回来的时候，它，诶这个这个block UI就消失了，我们这个代码呢，核心代码还是在这你看。

开始的时候AX，开始的时候执行它，AX结束的时候执行它，还有一个需要注意的地方，那你如果希望中间这个效果要是出来的话，你需要把这个包含在一个方式里边，我们开始我们。没写对是吧，你发现怎么了，他是不是先这个一刷新它就执行了啊，这个时候我们后面一改的话呢，我们发现应该是这样一个效果。这个的话呢，我也来做一个讲解。嗯。使用block UI。哎，能看什么呢？能看A的请求。发出时。

执行一个函数AX请求。响应，Ajax响应。送达时。呃，执行一个函数，具体说的话，看它发出的时候呢，提醒他。结束的时候呢，结束他。这个呢是插件给我们已经都盖好的。然后我们可以在。可以这个对那个样式来做出修改，好可以对。样式做出。修改。怎么改呀？哎，我们需要把这个包含在一个方程里边。需要把。他。包含在一个。Question。

好，具体写的话呢，就是我们现在写的这个。Employees。哎，就是我们这块的这个效果。嗯。然后说呃，具体的效果的话呢，我们可以看看文档。行了，大家也来用一下这个block UI来实现刚才那样的一个效果。