标签选择优化

前言

上一节,我们解决了标签数据同步的瑕疵,今天我们对标签的选择进行一下优化。

说明

开发环境:Windows 7
Laravel 版本: 5+
IDE: Phpstorm

你有没有发现一个问题,标签少的时候,咋都好说,我自己一个一个选,标签多了怎么办?我一个一个选?不合适也不太可能吧,尤其是当你辛辛苦苦选择了一堆,然后刚好手滑点错了,所选的内容全部消失,这是多么痛的打击。这节课就是针对这个问题进行一下标签选择的优化。

利用三方 js 和 css

这里我们选用的是 select2 的三方 js 插件,这个库是专门美化和优化 select 而生的。

打开 http://select2.github.io/examples.html 找到 Multiple select boxes ,我们使用 Multiple select boxes 这种样式的标签选择。先看看效果。

有两种使用方式,第一种,下载到本地,第二种通过 CDN 。简单起见,我们使用 CDN 打个样。

打开 master.blade.php ,将:

将 css 复制到<head></head>里面,将 js 复制到下面。整体如下:

接下来,打开 form.blade.php ,给 tag_list 添加一个 id=’tag_list’:

然后下面以 jquery 的方式通过 id 来获取标签:

好了,保存,启动服务器,看一下效果吧。

小优化1:提示符

小优化2:增加标签

此时你能选择的标签都是 tag_list 里存在的 tag ,那要是不存在的标签,我想新增怎么办?

整理 css 和 js 文件

现在我们很多东西都是 cdn 来完成的效果呈现,但是这样的一个问题就是,每个 css 或者 js 都是通过一个 http 请求来获取到的,这样就会增加 http io 开销,所以一般都会下载到本地,然后引用。

打开 master.blade.php 看看该文件中引用了哪些 css 和 js 。

到 resources 目录下创建两个文件夹:

然后把 master.blade.php 里的 css 和 js 各自引用都下载到对应的 libs 中。

打开根目录下的 gulpfile.js ,修改如下:

保存退出,执行 gulp 命令,此时会在 public 目录下生成两个目录: css 和 js 目录,而且各自有一个名为 all.* 的文件。里面整合了所有项目用到的资源。

如果是生产模式下的话,你可以给 gulp 命令价一个参数 --production

现在就可以清理一下 maste.blade.php 文件中的引用了:

这样就比较干净利落了。

总结

本节的内容比较轻松,主要是改造一下标签选择的问题,也算一个瑕疵吧。

Comments

  1. 菜鳥

    老師您好,想請問若使用了select2的新增功能,在編輯頁存檔時應該怎麼做會比較好?先將新增的tag儲存至tag資料表,再取出新增的id號來存關聯嗎?謝謝您

发表评论

电子邮件地址不会被公开。 必填项已用*标注