00:00
呃,下面呢,我们可以看一下另外一个插件啊,叫这块UI,我们把它解压,我这里已经解好了啊,已经解压好了,我把这整个都拿进去,都都拷过去吧,都拷到我的这里面啊,需要什么东西我就从里面,嗯,来我专门创建一个测试的文件夹,叫下划线test啊,在这里面创建一个测试页面。嗯,好,我们来看,先来看一下这个这个这块的UI,它的这个网址啊,就是。这么多了,关闭其他。手里。
01:04
这个UI什么意思啊,叫user interface,有人翻译过来叫什么,翻译过来直接翻译叫用户接口,Interface接口的意思啊,但是我们平常肯定不会这么翻译嘛,是吧?肯定翻译用户界面啊,它这里面有什么DEMO能够去干嘛进行下载,这里面也可以下载是吧?这是什么?是不是API的文档啊,这是什么?信知道什么吗?主题啊,主题还有什么开发支持,这个就是兼容性什么的,博客关于啊,各种各样的都挺多的啊,这个这块UI实际上是非常大的一个东西啊,它可以做,它是它其实是整理了很多各种各个方面的一些效果。我们来看一下吧,就看我这里面给它打开,打开以后呢,这里面有一个什么,这不有个index啊,好把这个index打开一下,好这是各种各样的效果来这里面呢,有一个叫CC a according什么呢?手风琴啊,这个名字听起来挺有感觉的是吧?是一个什么效果呢?这效果大家做过好像做过类似效果不?
02:31
做过是吧啊,就是一个菜单的收缩和展开的效果,是吧啊OK,嗯,但他的这个啊,你看到它的展开是一个带动画的展开,对不对,能看到吧啊是一个平滑的过程,这个概念它叫是风行,这是啥A。就所有跟A匹配的啊,都列表显示出来。
03:00
啊,我这输了个C能看到吧,啊就有点类似于百度或者Google啊,就说百度吧,估计大家有些Google都没访问过啊,那个百度输入框,你在输入一个字符的时候,它是不是所有匹配的是不是都在下面列表显示啊类似吧,跟着过来对不对?好还有一些别的啊这个呢叫什么。到了啊OK,这个选项卡效果是吧?啊选项卡table看这个这什么是不是模态方自定义的一个是一个样子啊啊OK,这是啊这各种各样的一些图标,诶这个什么滑块是吧?而且这个滑块可以指定开始的和什么结束的位置,这是什么,是不是日历啊啊这是个日历啊OK,好来这是一个应该是一个什么进度条。
04:05
啊,这是一个下拉框啊,但这个下拉框是不是看起来效果比默认的是不是要好看一些啊,好看一些,这个是一个,就是一个输入框,但是只是一个什么数字的,嗯,这是一个二级菜单,这种效果用的少,嗯,这是这样的,展开的就是Windows操作系统以前的那种感觉啊是吧,以前Windows操作系统是不是就这样展开菜单的啊,以前还搞到手机里面去啊,那个Windows mobile不要以前的那个就Windows,他们不也出手机嘛,他们把那个电脑上面的模式搞到手机上面,这种模式在手机上怎么玩呢?没法玩啊,这为什么他失败,体验太差了啊,就这种模式在电脑里面还可以,我们电脑里面模式不就这样搞的嘛,是吧?啊,就这样搞的可以,因为它空间足够大是吧,你要在手机里面这么整,那肯定就是不行的。
05:05
OK啊,效果挺多的,那咱呢就做几个啊,做几个效果给大家演示一下,看看用它怎么做啊,首先我们来看一下他引入了一些什么库呗,是吧,他引了一些什么库,我们来看一下,你看他是在上面引的吗?还没有他是不在下面引的好多东西啊。他的JS代码没有写写多少啊,没写多少,好就在这边是吧,还有一个它显示的样子是不是比较特别啊,所以它必然会有什么呢样子啊,回到上面,刚才有个东西没给大家看。在这里,这里是不是他有自己专门的样式库,所以我们要想在我们的这个测试文件夹里用,首先我们干嘛是把这一个拷过来啊j query-Y点接是这个吧,好还有什么过,还有我们的他刚刚说的有我们是不是这里面有几块吗。
06:16
是在这,那我们我们能不能不考他的,我考我们自己的行不行可以,这都一样对不对,没什么区别啊,我就考这个吧,够了吗?肯定不够啦,你得考那个什么这块UI的是吧,对不对啊啊还有个样式没考吗?哦,刚才考过了是吧,这个没忘了考了,不好意思。是不是一共有三个啊,一共有三个,那下面呢,我们要将三个是不是都引入进来啊link走你。CSS是吧,来script接着呢,考进来没问题,Script啊,接着是写块UI,接着写我们的什么。
07:14
对吧,好,那下面呢,我们先啊,我们也想做出一个这样的效果啊,手风琴这个东西叫啊,你一定要记住这个概念啊,别人可能问手风琴效果能不能做啊,手风琴是不这是个什么效果,你别别人一说不知道啊,好来啊,让这里面的压缩,我不好拿,有个这个我把它的这个页面的标签给他拿过去,但我不考它内部自定义啊啥。我来说一说这个我们中文意思的效果叫什么手风琴,哎,啊手风琴好了,来这个看怎么样,因为它自定义的一个。
08:04
好,这里ID其实没有什么,他没有写特别的样式吧,这不就有个H3有下面下一层的div吗?没有看到什么特别的样式啊,好啦,那你说老师这么写是不是就好了,你觉得呢?就这样的好,怎么样,那个效果出来啊,神奇的事情就要快发生了啊,看着啊,看到它的最下面这个GS位置快速的划下啊,我只需要写一条语句。啊,协调什么鱼了,找到那个容那个容器调用a quarter就可以,什么意思呢?它不有一个ID吗?这个div是不是要控制差距,要它形成那个手工集的效果,它不有个ID吗?怎么写呢?无比的简单,先找到这个div是吧?啊或者是吧,点这个方法OK搞定。
09:12
啊,这是我们做的啊,第一个效果,手风琴的效果有点受不了是吧。看一下啊,是不是真的是这样。刷。你此时的心型应该是个什么样子的?OK,有人说老师这个太宽了,其实我可以再自己写个样式,是把它控制一下就行了啊,自己再写一下,给它控制一下就OK啊,嗯,还是挺好的,OK,好,嗯,你就效果过来了,我们再搞另外一效果呗,你说这也太简单,搞的没意思,难的吧,你又说难的简单,你还你还受不了是不是啊,简单你应该很爽才对啊,好,来下一个啊,下一个下一个我们搞那个它的自动啊,自动搜索完成的那个效果,就是我一个输入框输入一个数据,它就能匹配啊,就是这个。
10:25
啊,其实他也写的一般标签啊,没有写什么特别标签。嗯,我就不一个个去手写了啊,这个地方我们叫它什么呢?来第二个效果,我们叫它是一个,它是一个自动匹配,呃,搜索匹配吧。啊,OK,来看一下这个plus也不要啊,我们不用需要它的压子,我也没定义啊,这其他的没有什么特别的地方,好了,下面我们去做什么事情呢?我们要写一些GS啊,我们来看它怎么写的啊,不用背啊,我记住了,你如果能参照它写出来那就很不错了啊好,首先我们要去匹配,首先得一些待匹配的一些奏状嘛。
11:18
能不能懂,你们就说我输入了一个A,出来一个列表,那列表的数据从哪来的,是从这个里面来的,这个名字可以随便吧,名字可以随便啊,我把这个拿过去啊,其实没什么没什么,基本上没什么代码。OK,大家看一下。这就是这个数组,所有的数据都在这个里面,所有数据的数组,所有数据的数组,接着去找到的是谁。是不是这个输入框啊,对不对,找到输入框以后干嘛呢?调用这个什么,它是每一个效果名称都有一个对应的方法名啊,我们现在要做的是它其实非常简单,就调用这个方法,只是在调用方法的时候要指定什么硕士什么意思语言就是数据源啊,指定数据源说白了我去哪查呀,我去哪找啊。
12:24
能不能看到这个名字,我就写个硕士行不行?我不写硕士吧,我写date硕士可能看起来更好听一点。可不可以啊,可以啊,就这么固定好来看一看是吧?嗯,来是啊,说了S行不行,是不是OK啊,而且你的鼠标放在上面,它还有颜色变化,人说老师这些东西是是些什么呀,这些是些什么标签呢?啊来看一下吧。写什么?是ii,这些是我自己插进的吗?不是,是他帮我动态生成的。
13:11
啊,我们管它是谁是呢,我们最终要的是不是就是有一个效果就可以,我们要的是不是效果啊OK,这里为什么没了,是没有匹配的呀啊S我要把SC有吗。这里面是不是所有匹配的就这么简单?嗯。好再做一个好吧,再做一个啊,做一个这个,这个其实也就是一个方法的事啊,来看一下啊,我现在还是把页面给它捞过来啊。
14:03
这里面啊,先拉过来,我再跟大家读一下这个页面是怎么回事。啊。好,首先我们来说这是一个什么样的效果,怎么用中文怎么描述。什么效果叫选项卡一定要你要说出来,别人说你要知道是什么效果,对吧?啊选项卡的效果好,这个选项卡的效果它,那你说我的选项卡需要这个吗。需要这个吗?本质上不需要,只是一个提示作用,对不对?好,下面这个是不是就是我实际现选项卡效果的最终那个标签了,他一个ID,好里面有些什么呢?这是它的什么?是里面的几个选项,这个这些第二位是什么?是不是对应的内容部分,当我选择不同的选项的时候,是不是内容部分进行什么,是不是切换了啊好了,那下面我要做的事情啊,真的是太简单了,我还要去看吗?
15:15
啊,大家觉得应该怎么写啊,大家看一下写不写先他呗,接着了点点什么大点是不算了吗?确定啊是吗?是还是不是是的是吧,大的声音了,错了没关系,错了就。更何况,你们不会错。就OK了,可以了。就怎么想。
16:01
嗯,那我们瞬间就实现了这样的三个效果啊,多轻松的事啊,但是啊,你要去真正的去要想实现自己的效果,你肯定不会这么集中,你所你你好歹有时候需要去改一下,修改一下它的一些样式吧,对吧?样式就根据他的现在的情况啊,他现在习惯去改,就什么意思,这个背景颜色你要觉得不合适,你可以找到它通过什么样的样式去指定这个位景,你再去覆盖这个样式不就可以了吗?能不懂啊,这个是可以做的,你要去修改一些样式也是可以做的啊。嗯,大家下去后,就是按我的这个规则去把它搞一遍就可以,就自己也跟我一样啊,就看着这个,看能不能弄出来,能弄出来就可以了。
我来说两句