Html 在何处初始化laravel的jquery
我正在尝试将拖放功能添加到我的花式目录树中。但是，我初始化jquery库的位置似乎有问题，导致错误消息表明我尝试使用的jquery函数不可用等 特定错误消息=app.js:24 jQuery。延迟异常：$（…）。perfectScrollbar不是函数类型错误：$（…）。perfectScrollbar不是函数 如果我直接初始化一个完美的滚动条，它将继续反映其他库不是函数等等 代码的简单概述（编辑以显示master blade已经需要jquery一次） --主刀片--Html 在何处初始化laravel的jquery,html,jquery,laravel,laravel-blade,fancytree,Html,Jquery,Laravel,Laravel Blade,Fancytree,我正在尝试将拖放功能添加到我的花式目录树中。但是，我初始化jquery库的位置似乎有问题，导致错误消息表明我尝试使用的jquery函数不可用等 特定错误消息=app.js:24 jQuery。延迟异常：$（…）。perfectScrollbar不是函数类型错误：$（…）。perfectScrollbar不是函数 如果我直接初始化一个完美的滚动条，它将继续反映其他库不是函数等等 代码的简单概述（编辑以显示master blade已经需要jquery一次） --主刀片-- @收益率（'page_t
@收益率（'page_title'，设置（'admin.title'）。“-”。设置（'admin.description'））
@收益率（'css'）
@if（config（'voyager.multilingual.rtl'））
@恩迪夫
.voyager.侧面菜单.导航栏标题{
背景：#FFFFFF；
边框颜色：#FFFFFF；
{{--background:{{config（'voyager.primary_color'，'#22A7F0'）}；--}
{{--border color:{{config（'voyager.primary_color'，'#22A7F0'）}；--}
}
.widget.btn主{
边框颜色：{{config（'voyager.primary_color'，'#22A7F0'）}；
}
.widget.btn primary:focus、.widget.btn primary:hover、.widget.btn primary:active、.widget.btn-primary.active、.widget.btn primary:active:focus{
背景：{{config（'voyager.primary_color'，'#22A7F0'）}；
}
.旅行者号.面包屑a{
颜色：{{config（'voyager.primary_color'，'#22A7F0'）}；
}
.app container.side menu.panel.widget h5{
浮动：左；
显示：块；
位置：绝对位置；
顶部：0px；
宽度：180px；
文本对齐：左对齐；
不透明度：0；
过渡：不透明度。3s缓解；
利润上限：17像素；
左：68px；
溢出：隐藏；
高度：29px；
}
.app container.side menu.panel.widget h6{
浮动：左；
显示：块；
位置：绝对位置；
顶部：15px；
宽度：180px；
文本对齐：左对齐；
不透明度：0；
过渡：不透明度。3s缓解；
利润上限：17像素；
左：68px；
溢出：隐藏；
高度：29px；
}
.app-container.expanded.panel.widget h5{
不透明度：1；
}
.app-container.expanded.panel.widget h6{
不透明度：1；
}
.app container.side菜单：hover.panel.widget h5{
不透明度：1；
}
.app container.side菜单：hover.panel.widget h6{
不透明度：1；
}
@如果（！empty（配置（'voyager.additional_css'））
@foreach（config（'voyager.additional_css'）为$css）@endforeach
@恩迪夫
@收益率（‘头’）
@如果（$admin\u loader\u img==''）
@否则
@恩迪夫
@包括（'voyager:：dashboard.navbar'）
@包括（'voyager:：dashboard.sidebar'）
（功能（）{
var appContainer=document.querySelector（“.app container”），
sidebar=appContainer.querySelector（“.side菜单”），
navbar=appContainer.querySelector（'nav.navbar.navbar-top'），
loader=document.getElementById（'voyager-loader'），
汉堡菜单=document.querySelector（“.hamburger”），
sidebarTransition=侧边栏.style.transition，
navbarTransition=navbar.style.transition，
containerTransition=appContainer.style.transition；
sidebar.style.WebkitTransition=sidebar.style.MozTransition=sidebar.style.transition=
appContainer.style.WebKittTransition=appContainer.style.MozTransition=appContainer.style.transition=
navbar.style.WebkitTransition=navbar.style.MozTransition=navbar.style.transition='none'；
if（window.localStorage&&window.localStorage['voyager.stickySidebar']='true'）{
appContainer.className+=“未展开动画”；
loader.style.left=（sidebar.clientWidth/2）+'px'；
hamburgerMenu.className+='处于活动状态，无动画'；
}
navbar.style.WebKittTransition=navbar.style.MozTransition=navbar.style.transition=navbarTransition；
sidebar.style.WebkitTransition=sidebar.style.MozTransition=sidebar.style.transition=sidebarTransition；
appContainer.style.WebKittTransition=appContainer.style.MozTransition=appContainer.style.transition=containerTransition；
})();
@产量（'页眉'）
@产量（‘含量’）
@包括（'voyager:：partials.app footer'）
@if（会话：：has（'alerts'））
让警报={！！json_编码（Session:：get（'alerts'））；
帮助程序。显示警报（警报、toastr）；
@恩迪夫
@if（会话：：has（'message'））
//TODO:将控制器更改为使用AlertsMessages特征。。。然后把这个拿走
var alertType={！！json_encode（Session:：get（'alert-type'，'info'））；
var alertMessage={！！json_encode（Session:：get（'message'））！！}；
var-alerter=toastr[alertType]；
如果（警报）{
警报（警报信息）；
}否则{
toastr.error（“toastr警报类型“+警报类型+”未知”）；
}
@恩迪夫
@收益（'javascript'）
@如果（！empty（配置（'voyager.additional_js'））
@foreach（配置（'voyager.additional_js'）为$js）@endforeach
@恩迪夫
扩展主刀片
@部分(
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}" @if (config('voyager.multilingual.rtl')) dir="rtl" @endif>
<head>
<title>@yield('page_title', setting('admin.title') . " - " . setting('admin.description'))</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}"/>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="{{ voyager_asset('images/logo-icon.png') }}" type="image/x-icon">
<!-- App CSS -->
<link rel="stylesheet" href="{{ voyager_asset('css/app.css') }}">
<!-- fancy tree jquery/css-->
@yield('css')
@if(config('voyager.multilingual.rtl'))
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.4.0/css/bootstrap-rtl.css">
<link rel="stylesheet" href="{{ voyager_asset('css/rtl.css') }}">
@endif
<!-- Few Dynamic Styles -->
<style type="text/css">
.voyager .side-menu .navbar-header {
background:#FFFFFF;
border-color:#FFFFFF;
{{--background:{{ config('voyager.primary_color','#22A7F0') }};--}}
{{--border-color:{{ config('voyager.primary_color','#22A7F0') }};--}}
}
.widget .btn-primary{
border-color:{{ config('voyager.primary_color','#22A7F0') }};
}
.widget .btn-primary:focus, .widget .btn-primary:hover, .widget .btn-primary:active, .widget .btn-primary.active, .widget .btn-primary:active:focus{
background:{{ config('voyager.primary_color','#22A7F0') }};
}
.voyager .breadcrumb a{
color:{{ config('voyager.primary_color','#22A7F0') }};
}
.app-container .side-menu .panel.widget h5 {
float: left;
display: block;
position: absolute;
top: 0px;
width: 180px;
text-align: left;
opacity: 0;
transition: opacity .3s ease;
margin-top: 17px;
left: 68px;
overflow: hidden;
height: 29px;
}
.app-container .side-menu .panel.widget h6 {
float: left;
display: block;
position: absolute;
top: 15px;
width: 180px;
text-align: left;
opacity: 0;
transition: opacity .3s ease;
margin-top: 17px;
left: 68px;
overflow: hidden;
height: 29px;
}
.app-container.expanded .panel.widget h5 {
opacity: 1;
}
.app-container.expanded .panel.widget h6 {
opacity: 1;
}
.app-container .side-menu:hover .panel.widget h5 {
opacity: 1;
}
.app-container .side-menu:hover .panel.widget h6 {
opacity: 1;
}
</style>
@if(!empty(config('voyager.additional_css')))<!-- Additional CSS -->
@foreach(config('voyager.additional_css') as $css)<link rel="stylesheet" type="text/css" href="{{ asset($css) }}">@endforeach
@endif
@yield('head')
</head>
<body class="voyager @if(isset($dataType) && isset($dataType->slug)){{ $dataType->slug }}@endif">
<div id="voyager-loader">
<?php $admin_loader_img = Voyager::setting('admin.loader', ''); ?>
@if($admin_loader_img == '')
<img src="{{ voyager_asset('images/logo-icon.png') }}" alt="Voyager Loader">
@else
<img src="{{ Voyager::image($admin_loader_img) }}" alt="Voyager Loader">
@endif
</div>
<?php
if (starts_with(Auth::user()->avatar, 'http://') || starts_with(Auth::user()->avatar, 'https://')) {
$user_avatar = Auth::user()->avatar;
} else {
$user_avatar = Voyager::image(Auth::user()->avatar);
}
?>
<div class="app-container">
<div class="fadetoblack visible-xs"></div>
<div class="row content-container">
@include('voyager::dashboard.navbar')
@include('voyager::dashboard.sidebar')
<script>
(function(){
var appContainer = document.querySelector('.app-container'),
sidebar = appContainer.querySelector('.side-menu'),
navbar = appContainer.querySelector('nav.navbar.navbar-top'),
loader = document.getElementById('voyager-loader'),
hamburgerMenu = document.querySelector('.hamburger'),
sidebarTransition = sidebar.style.transition,
navbarTransition = navbar.style.transition,
containerTransition = appContainer.style.transition;
sidebar.style.WebkitTransition = sidebar.style.MozTransition = sidebar.style.transition =
appContainer.style.WebkitTransition = appContainer.style.MozTransition = appContainer.style.transition =
navbar.style.WebkitTransition = navbar.style.MozTransition = navbar.style.transition = 'none';
if (window.localStorage && window.localStorage['voyager.stickySidebar'] == 'true') {
appContainer.className += ' expanded no-animation';
loader.style.left = (sidebar.clientWidth/2)+'px';
hamburgerMenu.className += ' is-active no-animation';
}
navbar.style.WebkitTransition = navbar.style.MozTransition = navbar.style.transition = navbarTransition;
sidebar.style.WebkitTransition = sidebar.style.MozTransition = sidebar.style.transition = sidebarTransition;
appContainer.style.WebkitTransition = appContainer.style.MozTransition = appContainer.style.transition = containerTransition;
})();
</script>
<!-- Main Content -->
<div class="container-fluid">
<div class="side-body padding-top">
@yield('page_header')
<div id="voyager-notifications"></div>
@yield('content')
</div>
</div>
</div>
</div>
@include('voyager::partials.app-footer')
<!-- Javascript Libs -->
<script type="text/javascript" src="{{ voyager_asset('js/app.js') }}"></script>
<!-- <script type="text/javascript" src="{{ voyager_asset('js/app.js') }}"></script> -->
<script>
@if(Session::has('alerts'))
let alerts = {!! json_encode(Session::get('alerts')) !!};
helpers.displayAlerts(alerts, toastr);
@endif
@if(Session::has('message'))
// TODO: change Controllers to use AlertsMessages trait... then remove this
var alertType = {!! json_encode(Session::get('alert-type', 'info')) !!};
var alertMessage = {!! json_encode(Session::get('message')) !!};
var alerter = toastr[alertType];
if (alerter) {
alerter(alertMessage);
} else {
toastr.error("toastr alert-type " + alertType + " is unknown");
}
@endif
</script>
@yield('javascript')
<!-- Javascript Libs -->
<!-- <script type="text/javascript" src="{{ voyager_asset('js/app.js') }}"></script> -->
@if(!empty(config('voyager.additional_js')))<!-- Additional Javascript -->
@foreach(config('voyager.additional_js') as $js)<script type="text/javascript" src="{{ asset($js) }}"></script>@endforeach
@endif
</body>
</html>
Extends Master Blade
@section('content')
--fancy tree code--
@stop
@section('javascript)
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="/src/jquery-ui-dependencies/jquery.fancytree.ui-deps.js" type="text/javascript"></script>
<script src="/src/jquery.fancytree.js" type="text/javascript"></script>
<script src="/src/jquery.fancytree.dnd.js" type="text/javascript"></script>
<script src="/src/jquery.fancytree.edit.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// using default options
$("#tree").fancytree({
extensions: ["dnd"],
checkbox: false,
icon: false,
generateIds: true,
dnd: {
autoExpandMS: 400,
focusOnClick: true,
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
dragStart: function(node, data) {
/** This function MUST be defined to enable dragging for the tree.
* Return false to cancel dragging of node.
*/
return true;
},
dragEnter: function(node, data) {
/** data.otherNode may be null for non-fancytree droppables.
* Return false to disallow dropping on node. In this case
* dragOver and dragLeave are not called.
* Return 'over', 'before, or 'after' to force a hitMode.
* Return ['before', 'after'] to restrict available hitModes.
* Any other return value will calc the hitMode from the cursor position.
*/
// Prevent dropping a parent below another parent (only sort
// nodes under the same parent)
/* if(node.parent !== data.otherNode.parent){
return false;
}
// Don't allow dropping *over* a node (would create a child)
return ["before", "after"];
*/
return true;
},
dragDrop: function(node, data) {
/** This function MUST be defined to enable dropping of items on
* the tree.
*/
data.otherNode.moveTo(node, data.hitMode);
}
},
}
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}" @if (config('voyager.multilingual.rtl')) dir="rtl" @endif>
<head>
<title>@yield('page_title', setting('admin.title') . " - " . setting('admin.description'))</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}"/>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="{{ voyager_asset('images/logo-icon.png') }}" type="image/x-icon">
<!-- App CSS -->
<link rel="stylesheet" href="{{ voyager_asset('css/app.css') }}">
<!-- fancy tree jquery/css-->
@yield('css')
@if(config('voyager.multilingual.rtl'))
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.4.0/css/bootstrap-rtl.css">
<link rel="stylesheet" href="{{ voyager_asset('css/rtl.css') }}">
@endif
<!-- Few Dynamic Styles -->
<style type="text/css">
.voyager .side-menu .navbar-header {
background:#FFFFFF;
border-color:#FFFFFF;
{{--background:{{ config('voyager.primary_color','#22A7F0') }};--}}
{{--border-color:{{ config('voyager.primary_color','#22A7F0') }};--}}
}
.widget .btn-primary{
border-color:{{ config('voyager.primary_color','#22A7F0') }};
}
.widget .btn-primary:focus, .widget .btn-primary:hover, .widget .btn-primary:active, .widget .btn-primary.active, .widget .btn-primary:active:focus{
background:{{ config('voyager.primary_color','#22A7F0') }};
}
.voyager .breadcrumb a{
color:{{ config('voyager.primary_color','#22A7F0') }};
}
.app-container .side-menu .panel.widget h5 {
float: left;
display: block;
position: absolute;
top: 0px;
width: 180px;
text-align: left;
opacity: 0;
transition: opacity .3s ease;
margin-top: 17px;
left: 68px;
overflow: hidden;
height: 29px;
}
.app-container .side-menu .panel.widget h6 {
float: left;
display: block;
position: absolute;
top: 15px;
width: 180px;
text-align: left;
opacity: 0;
transition: opacity .3s ease;
margin-top: 17px;
left: 68px;
overflow: hidden;
height: 29px;
}
.app-container.expanded .panel.widget h5 {
opacity: 1;
}
.app-container.expanded .panel.widget h6 {
opacity: 1;
}
.app-container .side-menu:hover .panel.widget h5 {
opacity: 1;
}
.app-container .side-menu:hover .panel.widget h6 {
opacity: 1;
}
</style>
@if(!empty(config('voyager.additional_css')))<!-- Additional CSS -->
@foreach(config('voyager.additional_css') as $css)<link rel="stylesheet" type="text/css" href="{{ asset($css) }}">@endforeach
@endif
@yield('head')
</head>
<body class="voyager @if(isset($dataType) && isset($dataType->slug)){{ $dataType->slug }}@endif">
<div id="voyager-loader">
<?php $admin_loader_img = Voyager::setting('admin.loader', ''); ?>
@if($admin_loader_img == '')
<img src="{{ voyager_asset('images/logo-icon.png') }}" alt="Voyager Loader">
@else
<img src="{{ Voyager::image($admin_loader_img) }}" alt="Voyager Loader">
@endif
</div>
<?php
if (starts_with(Auth::user()->avatar, 'http://') || starts_with(Auth::user()->avatar, 'https://')) {
$user_avatar = Auth::user()->avatar;
} else {
$user_avatar = Voyager::image(Auth::user()->avatar);
}
?>
<div class="app-container">
<div class="fadetoblack visible-xs"></div>
<div class="row content-container">
@include('voyager::dashboard.navbar')
@include('voyager::dashboard.sidebar')
<script>
(function(){
var appContainer = document.querySelector('.app-container'),
sidebar = appContainer.querySelector('.side-menu'),
navbar = appContainer.querySelector('nav.navbar.navbar-top'),
loader = document.getElementById('voyager-loader'),
hamburgerMenu = document.querySelector('.hamburger'),
sidebarTransition = sidebar.style.transition,
navbarTransition = navbar.style.transition,
containerTransition = appContainer.style.transition;
sidebar.style.WebkitTransition = sidebar.style.MozTransition = sidebar.style.transition =
appContainer.style.WebkitTransition = appContainer.style.MozTransition = appContainer.style.transition =
navbar.style.WebkitTransition = navbar.style.MozTransition = navbar.style.transition = 'none';
if (window.localStorage && window.localStorage['voyager.stickySidebar'] == 'true') {
appContainer.className += ' expanded no-animation';
loader.style.left = (sidebar.clientWidth/2)+'px';
hamburgerMenu.className += ' is-active no-animation';
}
navbar.style.WebkitTransition = navbar.style.MozTransition = navbar.style.transition = navbarTransition;
sidebar.style.WebkitTransition = sidebar.style.MozTransition = sidebar.style.transition = sidebarTransition;
appContainer.style.WebkitTransition = appContainer.style.MozTransition = appContainer.style.transition = containerTransition;
})();
</script>
<!-- Main Content -->
<div class="container-fluid">
<div class="side-body padding-top">
@yield('page_header')
<div id="voyager-notifications"></div>
@yield('content')
</div>
</div>
</div>
</div>
@include('voyager::partials.app-footer')
<!-- Javascript Libs -->
<script type="text/javascript" src="{{ voyager_asset('js/app.js') }}"></script>
<!-- <script type="text/javascript" src="{{ voyager_asset('js/app.js') }}"></script> -->
<script>
@if(Session::has('alerts'))
let alerts = {!! json_encode(Session::get('alerts')) !!};
helpers.displayAlerts(alerts, toastr);
@endif
@if(Session::has('message'))
// TODO: change Controllers to use AlertsMessages trait... then remove this
var alertType = {!! json_encode(Session::get('alert-type', 'info')) !!};
var alertMessage = {!! json_encode(Session::get('message')) !!};
var alerter = toastr[alertType];
if (alerter) {
alerter(alertMessage);
} else {
toastr.error("toastr alert-type " + alertType + " is unknown");
}
@endif
</script>
<!-- Javascript Libs -->
<!-- <script type="text/javascript" src="{{ voyager_asset('js/app.js') }}"></script> -->
@if(!empty(config('voyager.additional_js')))<!-- Additional Javascript -->
@foreach(config('voyager.additional_js') as $js)<script type="text/javascript" src="{{ asset($js) }}"></script>@endforeach
@endif
</body>
</html>
Extends Master Blade
@section('content')
--fancy tree code--
@stop
@section('javascript)
<script type="text/javascript">
$(function(){
// using default options
$("#tree").fancytree({
extensions: ["dnd"],
checkbox: false,
icon: false,
generateIds: true,
dnd: {
autoExpandMS: 400,
focusOnClick: true,
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
dragStart: function(node, data) {
/** This function MUST be defined to enable dragging for the tree.
* Return false to cancel dragging of node.
*/
return true;
},
dragEnter: function(node, data) {
/** data.otherNode may be null for non-fancytree droppables.
* Return false to disallow dropping on node. In this case
* dragOver and dragLeave are not called.
* Return 'over', 'before, or 'after' to force a hitMode.
* Return ['before', 'after'] to restrict available hitModes.
* Any other return value will calc the hitMode from the cursor position.
*/
// Prevent dropping a parent below another parent (only sort
// nodes under the same parent)
/* if(node.parent !== data.otherNode.parent){
return false;
}
// Don't allow dropping *over* a node (would create a child)
return ["before", "after"];
*/
return true;
},
dragDrop: function(node, data) {
/** This function MUST be defined to enable dropping of items on
* the tree.
*/
data.otherNode.moveTo(node, data.hitMode);
}
},
}
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="/src/jquery-ui-dependencies/jquery.fancytree.ui-deps.js" type="text/javascript"></script>
<script src="/src/jquery.fancytree.js" type="text/javascript"></script>
<script src="/src/jquery.fancytree.dnd.js" type="text/javascript"></script>
<script src="/src/jquery.fancytree.edit.js" type="text/javascript"></script>