我应该如何将Javascript添加到Laravel Views？

时间：2015-08-22 16:03:12

标签： laravel-5.1

好的，我是学习如何使用Laravel的新手，但是我使用核心php非常好。所以我很好奇如何在Laravel网站中正确使用Javascript？

示例：我希望对导航菜单项有一些效果，这些效果会在点击时隐藏或显示。

由于

1 个答案:

答案 0 :(得分：2)

将您的javascript代码放入刀片模板/resources/views/view_name.blade.php中 例如我用于测试排序的旧脚本：
的 routes.php文件 

Route::post('sort', '\Rutorika\Sortable\SortableController@sort');
Route::get('sort/test', 'SortController@sort');

<强> SortController 

<?php

namespace App\Http\Controllers;

use App\Http\Requests;
use App\Cat;
class ManagerController extends Controller
{
 public function sort()
    {
        return view('sort',['cats'=>Cat::orderBy('position')->get()]);
    }
}

<强> sort.blade.php 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Laravel</title>
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="http://sortable5.boxfrommars.ru/vendor/flat-ui/js/jquery-1.8.3.min.js"></script>
    <script src="http://sortable5.boxfrommars.ru/vendor/flat-ui/js/jquery.ui.touch-punch.min.js"></script>
    <script src="http://sortable5.boxfrommars.ru/vendor/jquery-ui-1.10.4/js/jquery-ui-1.10.4.custom.min.js"></script>

      <style>
            .grid-actions {
                text-align: right;
            }

            .grid-actions .btn {
                margin-left: 16px;
            }
            .sortable-handle {
                cursor: move;
                width: 40px;
                color: #ddd;
            }
            .id-column {
                width: 40px;
            }

            /** notifications style */
            .alert {
                font-size: 14px;
            }
            .bootstrap-growl .close {
                margin-left: 10px;
            }

            /** forms */
        </style>
</head>
<body>

<table class="table table-striped table-hover">
    <tbody class="sortable" data-entityname="cats">
    @foreach ($cats as $cats)
    <tr data-itemId="{{{ $cats->id }}}">
        <td class="sortable-handle"><span class="glyphicon glyphicon-sort"></span></td>
        <td class="id-column">{{{ $cats->id }}}</td>
        <td>{{{ $cats->title }}}</td>
    </tr>
    @endforeach
    </tbody>
</table>
</body>

<script>
    /**
     *
     * @param type string 'insertAfter' or 'insertBefore'
     * @param entityName
     * @param id
     * @param positionId
     */
    var changePosition = function(requestData){
        $.ajax({
            'url': '/sort',
            'type': 'POST',
            'data': requestData,
            'success': function(data) {
                if (data.success) {
                    console.log('Saved!');
                } else {
                    console.error(data.errors);
                }
            },
            'error': function(){
                console.error('Something wrong!');
            }
        });
    };

    $(document).ready(function(){
        var $sortableTable = $('.sortable');
        if ($sortableTable.length > 0) {
            $sortableTable.sortable({
                handle: '.sortable-handle',
                axis: 'y',
                update: function(a, b){

                    var entityName = $(this).data('entityname');
                    var $sorted = b.item;

                    var $previous = $sorted.prev();
                    var $next = $sorted.next();

                    if ($previous.length > 0) {
                        changePosition({
                            parentId: $sorted.data('parentid'),
                            type: 'moveAfter',
                            entityName: entityName,
                            id: $sorted.data('itemid'),
                            positionEntityId: $previous.data('itemid')
                        });
                    } else if ($next.length > 0) {
                        changePosition({
                            parentId: $sorted.data('parentid'),
                            type: 'moveBefore',
                            entityName: entityName,
                            id: $sorted.data('itemid'),
                            positionEntityId: $next.data('itemid')
                        });
                    } else {
                        console.error('Something wrong!');
                    }
                },
                cursor: "move"
            });
        }

        $('.sortable td').each(function(){ // fix jquery ui sortable table row width issue
            $(this).css('width', $(this).width() +'px');
        });
    });
</script>
</html>
相关问题
最新问题