Как добавить Javascript в Laravel Views?

Хорошо, я очень новичок в изучении способов использования Laravel, однако я вполне уверен, используя core php. Так что мне просто интересно, как правильно использовать Javascript на сайте Laravel?Как добавить Javascript в Laravel Views?

Пример: Я хочу иметь некоторые эффекты для пунктов меню навигации, которые будут скрыты или отображаться по щелчку.

Благодаря

источник

2015-08-22 Elevant

разместить Javascript код в шаблон лезвия /resources/views/view_name.blade.php
, например мой старый сценарий для теста сортировки:
routes.php

Route::post('sort', '\Rutorika\Sortable\[email protected]'); 
Route::get('sort/test', '[email protected]');

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>

источник

2015-08-22 16:46:28

Как добавить Javascript в Laravel Views?

ответ

Смежные вопросы