2015-09-15 14 views
0

即时尝试将plupload实现到现有模板中,但在添加plupload时遇到问题JQuery文件现有模板停止工作,如下拉菜单和其他功能当第二个jQuery库添加时,多个jQuery - Plupload不起作用

这是没有plupload文件的当前head标签

<head> 
<meta charset='utf-8'> 
<meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0' /> 
<title>$capital_name</title> 
<link href='bootstrap/css/bootstrap.min.css' rel='stylesheet' type='text/css' /> 

<!-- jQuery UI --> 
<!--<link href='plugins/jquery-ui/jquery-ui-1.10.2.custom.css' rel='stylesheet' type='text/css' />--> 
<!--[if lt IE 9]> 
    <link rel='stylesheet' type='text/css' href='plugins/jquery-ui/jquery.ui.1.10.2.ie.css'/> 
<![endif]--> 
<link href='assets/css/main.css' rel='stylesheet' type='text/css' /> 
<link href='assets/css/plugins.css' rel='stylesheet' type='text/css' /> 
<link href='assets/css/responsive.css' rel='stylesheet' type='text/css' /> 
<link href='assets/css/icons.css' rel='stylesheet' type='text/css' /> 
<link rel='stylesheet' href='assets/css/fontawesome/font-awesome.min.css'> 
<!--[if IE 7]> 
    <link rel='stylesheet' href='assets/css/fontawesome/font-awesome-ie7.min.css'> 
<![endif]--> 
<!--[if IE 8]> 
    <link href='assets/css/ie8.css' rel='stylesheet' type='text/css' /> 
<![endif]--> 
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'> 

<script type='text/javascript' src='assets/js/libs/jquery-1.10.2.min.js'></script> 
<script type='text/javascript' src='plugins/jquery-ui/jquery-ui-1.10.2.custom.min.js'></script> 
<script type='text/javascript' src='bootstrap/js/bootstrap.min.js'></script> 
<script type='text/javascript' src='assets/js/libs/lodash.compat.min.js'></script> 
<!-- HTML5 shim, for IE6-8 support of HTML5 elements --> 
<!--[if lt IE 9]> 
    <script src='assets/js/libs/html5shiv.js'></script> 
<![endif]--> 
<script type='text/javascript' src='plugins/touchpunch/jquery.ui.touch-punch.min.js'></script> 
<script type='text/javascript' src='plugins/event.swipe/jquery.event.move.js'></script> 
<script type='text/javascript' src='plugins/event.swipe/jquery.event.swipe.js'></script> 
<script type='text/javascript' src='assets/js/libs/breakpoints.js'></script> 
<script type='text/javascript' src='plugins/respond/respond.min.js'></script> <!-- Polyfill for min/max-width CSS3 Media Queries (only for IE8) --> 
<script type='text/javascript' src='plugins/cookie/jquery.cookie.min.js'></script> 
<script type='text/javascript' src='plugins/slimscroll/jquery.slimscroll.min.js'></script> 
<script type='text/javascript' src='plugins/slimscroll/jquery.slimscroll.horizontal.min.js'></script> 
<!--[if lt IE 9]> 
    <script type='text/javascript' src='plugins/flot/excanvas.min.js'></script> 
<![endif]--> 
<script type='text/javascript' src='plugins/sparkline/jquery.sparkline.min.js'></script> 
<script type='text/javascript' src='plugins/flot/jquery.flot.min.js'></script> 
<script type='text/javascript' src='plugins/flot/jquery.flot.tooltip.min.js'></script> 
<script type='text/javascript' src='plugins/flot/jquery.flot.resize.min.js'></script> 
<script type='text/javascript' src='plugins/flot/jquery.flot.time.min.js'></script> 
<script type='text/javascript' src='plugins/flot/jquery.flot.growraf.min.js'></script> 
<script type='text/javascript' src='plugins/easy-pie-chart/jquery.easy-pie-chart.min.js'></script> 
<script type='text/javascript' src='plugins/daterangepicker/moment.min.js'></script> 
<script type='text/javascript' src='plugins/daterangepicker/daterangepicker.js'></script> 
<script type='text/javascript' src='plugins/blockui/jquery.blockUI.min.js'></script> 
<script type='text/javascript' src='plugins/fullcalendar/fullcalendar.min.js'></script> 
<script type='text/javascript' src='plugins/noty/jquery.noty.js'></script> 
<script type='text/javascript' src='plugins/noty/layouts/top.js'></script> 
<script type='text/javascript' src='plugins/noty/themes/default.js'></script> 
<script type='text/javascript' src='plugins/uniform/jquery.uniform.min.js'></script> 
<script type='text/javascript' src='plugins/select2/select2.min.js'></script> 
<script type='text/javascript' src='assets/js/app.js'></script> 
<script type='text/javascript' src='assets/js/plugins.js'></script> 
<script type='text/javascript' src='assets/js/plugins.form-components.js'></script> 
<script> 
$(document).ready(function(){ 
    'use strict'; 

    App.init(); // Init layout and core plugins 
    Plugins.init(); // Init all plugins 
    FormComponents.init(); // Init all form-specific plugins 
}); 
</script> 
<script type='text/javascript' src='assets/js/custom.js'></script> 
<script type='text/javascript' src='assets/js/demo/pages_calendar.js'></script> 
<script type='text/javascript' src='assets/js/demo/charts/chart_filled_blue.js'></script> 
<script type='text/javascript' src='assets/js/demo/charts/chart_simple.js'></script> 

下面是两行我尝试当我遇到问题的添加和模板停止工作

<script type='text/javascript' src='assets/plupload/jquery.js'></script> 
<script type='text/javascript' src='assets/plupload/plupload.full.min.js'></script> 
<script type='text/javascript' src='assets/plupload/jquery.plupload.queue.min.js'></script> 
<link type='text/css' rel='stylesheet' href='assets/plupload/jquery.plupload.queue.css' media='screen'> 

任何帮助是非常赞赏目前IM困境而无法工作,如何进行

代码添加得益于以下

\t <script src='assets/plupload/jquery.js'></script> 
 
<script> 
 
$.noConflict(); 
 
jQuery(document).ready(function(){ 
 
    jQuery('button').click(function(){ 
 
     jQuery('p').text('jQuery is still working!'); 
 
    }); 
 
}); 
 
</script>

+0

我觉得不同功能的相同类名应该在那里,所以没有按预期工作。 –

+0

哪里可以开始寻找? – Nathan

+0

你有单独的jQuery的滚动,滑动,daterangepicker等。,实际上bootstrap blugin可能支持你的所有需求 –

回答

1

您需要使用的jQuerynoConflict()方法。 noConflict()方法释放$标识符上的保留,以便其他脚本可以使用它。

在我们使用noConflict()下面的代码只包括jquery js文件后,我们发布$是被他人使用jQuery的全局函数,我们使用的是jQuery作为别名,而不是$

使用noConflict()(如var jq = $.noConflict();)时,您可以将自定义变量声明为别名。现在您可以使用jquery使用jq别名来访问。

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script> 
$.noConflict(); 
jQuery(document).ready(function(){ 
    jQuery("button").click(function(){ 
     jQuery("p").text("jQuery is still working!"); 
    }); 
}); 
</script> 
</head> 
<body> 

<p>The noConflict() method releases the hold on the $ shortcut identifier, so that other scripts can use it.</p> 

</body> 
</html> 

编辑:

用户的jQuery noconflict在此之后在你的代码后,并不plupload JS。

<script type='text/javascript' src='assets/js/libs/jquery-1.10.2.min.js'></script> 
<script> 
$.noConflict(); 
</script> 

注:现在,如果你已经写在你的应用程序,它被引用jquery-1.10.2.min.js任何jQuery代码,通过jQuery更换$

+0

这似乎是一半的工作,它允许两个JQuery文件现在加载但是plupload上的文件上传按钮不工作只是直接回到那里的网站,当删除上述代码时,它允许选择文件 – Nathan

+0

Make确定你正在正确使用jQuery别名。 jQuery的文件,你有使用noConflict。要引用该jquery文件,您必须使用jquery作为别名。对于其他它将有默认的一个,我想是$。 – Akki619

+0

对不起,我完全新的JQuery,不知道该怎么做,我已经更新了上面的代码,以显示我的代码编辑,如果它有助于jquery文件即时通讯使用的plupload是jQuery JavaScript库v1.11.1 – Nathan

0

这是b'se plupload使用旧的1.9.0 jQuery。我解决了这个问题,把所有pupload代码放在标签上面,调用后面的jQuery版本,然后在jQuery之后添加一个

<script> 
$.noConflict(); 
</script> 

例如

... 
<script type='text/javascript' src='assets/plupload/jquery.js'></script> 
<script type='text/javascript' src='assets/plupload/plupload.full.min.js'></script> 
<script type='text/javascript' src='assets/plupload/jquery.plupload.queue.min.js'></script> 
<link type='text/css' rel='stylesheet' href='assets/plupload/jquery.plupload.queue.css' media='screen'> 
... 
<script type='text/javascript' src='assets/js/libs/jquery-1.10.2.min.js'></script> 
<script> 
$.noConflict(); 
</script> 
...