股票场内基金交易，没时间盯盘？

使用优财助手电脑客户端记录下您的股票买入卖出数据，能帮您时刻盯盘，会根据您记录的未售出买入价计算上涨或下跌幅度，及时弹框通知您。想知道如何使用？快点击左方视频观看了解吧~~下载地址：http://youcaizhushou.com

标签选择优化

前言

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

说明

开发环境：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 ，将：

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
    @include('partials.flash')
    @yield('content')

</div>
<script src="//code.jquery.com/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
        $('div.alert').not('.alert-important').delay(3000).slideUp(300);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

<div class="footer">
    @yield('footer')

</div>
</body>
</html>

<!doctype html>

<head>

<title>Document</title>

</head>

<body>

@include('partials.flash')

@yield('content')

</div>

$('div.alert').not('.alert-important').delay(3000).slideUp(300);

</script>

@yield('footer')

</div>

</body>

</html>

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

{!! Form::select('tag_list[]',$tags,null,['id'=>'tag_list','class'=>'form-control','multiple']) !!}

1 2	{!! Form::select('tag_list[]',$tags,null,['id'=>'tag_list','class'=>'form-control','multiple']) !!}

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

@section('footer')
    <script>
        $('#tag_list').select2();
    </script>
@endsection

@section('footer')

$('#tag_list').select2();

</script>

@endsection

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

小优化1：提示符

@section('footer')
    <script>
        $('#tag_list').select2({placeholder:'choose a tag'});
    </script>
@endsection

@section('footer')

$('#tag_list').select2({placeholder:'choose a tag'});

</script>

@endsection

小优化2：增加标签

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

@section('footer')
    <script>
        $('#tag_list').select2({
            placeholder:'choose a tag',
            tags:true
            });
    </script>
@endsection

@section('footer')

$('#tag_list').select2({

placeholder:'choose a tag',

tags:true

});

</script>

@endsection

整理 css 和 js 文件

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

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

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

mkdir -p /js/libs
mkdir -p /css/libs

mkdir -p /js/libs

mkdir -p /css/libs

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

打开根目录下的 gulpfile.js ，修改如下：

elixir(function(mix) {
    mix.sass('app.scss','resource/css').coffee();
    mix.styles([
        'libs/bootstrap.min.css',
        'select2.min.css'
        ]);
   mix.scripts([
        'libs/bootstrap.min.js',  
        'libs/jquery.js',  
        'libs/select2.min.js'
        ]);
});

elixir(function(mix) {

mix.sass('app.scss','resource/css').coffee();

mix.styles([

'libs/bootstrap.min.css',

'select2.min.css'

]);

mix.scripts([

'libs/bootstrap.min.js',

'libs/jquery.js',

'libs/select2.min.js'

]);

});

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

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

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="/css/all.css" rel="stylesheet" />
</head>
<body>
<div class="container">
    @include('partials.flash')
    @yield('content')

</div>
<script src="/js/all.js"></script>
<div class="footer">
    @yield('footer')
</div>
</body>
</html>

<!doctype html>

<head>

<title>Document</title>

</head>

<body>

@include('partials.flash')

@yield('content')

</div>

@yield('footer')

</div>

</body>

</html>

这样就比较干净利落了。

总结

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

想获得去掉 5 元限制的证券账户吗？

证券交易股票基金的佣金，不足 5 元会按照 5 元收取。比如交易 1000 元的股票，按照普遍的证券佣金手续费率万 2.5，其交易佣金为 0.25 元，小于 5 元，实际会收取佣金 5 元，买卖两次需要支付 10 元佣金成本，1% 的利润就这样没了。

如果您想去掉最低交易佣金 5 元限制，使用微信扫描左边小程序二维码，访问微信小程序「优财助手」，点击底部菜单「福利」，阅读文章「通过优财开证券账户无最低交易佣金 5 元限制」，按照文章步骤操作即可获得免 5 元证券账户，股票基金交易手续费率万 2.5。

请注意，一定要按照文章描述严格操作，如错误开户是无法获得免 5 元证券账户的。

[Laravel 5 Fundamentals] 24 – Enhancing Select Elements

股票场内基金交易，没时间盯盘？

标签选择优化

利用三方 js 和 css

小优化1：提示符

小优化2：增加标签

整理 css 和 js 文件

总结

想获得去掉 5 元限制的证券账户吗？

Comments

发表评论取消回复

股票场内基金交易，没时间盯盘？

标签选择优化

利用三方 js 和 css

小优化1：提示符

小优化2：增加标签

整理 css 和 js 文件

总结

想获得去掉 5 元限制的证券账户吗？

Comments

发表评论 取消回复

发表评论取消回复