87,910
社区成员
发帖
与我相关
我的任务
分享同时使用两个jquery插件，其中一个插件的部分效果失效！深夜跪求大神。。
深夜跪求大神啊！！我用fancybox插件和masonry插件
js文件引入顺序如下:
结果参数fancybox中的参数closeBtn、hideOnOverlayClick设置都无效啊，为了检验fancybox是否有效，将scrolling:'visible'注释掉发现有滚动条显示，说明文件时导入正确的了，可是，看不到关闭按钮！也没有遮罩层！文件图片等导入路径绝对没错！我在别的页面用是正常的！可是放到有masonry插件的这个页面就出现问题了啊，天啊。。。到底怎么回事。。T T花了好长时间把masonry插件弄好开心了好久，又发现fancybox有问题，这是不让人睡觉的节奏。。。。。。。。。。。。。。。。。。。。。大神救我！！小女子感激不尽！！
js文件引入顺序如下:
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.fancybox.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(function($){
$("a.single_image").fancybox({
padding:0,
closeBtn:true,
autoScale:false,
scrolling:'visible',
autoDimensions:true,
hideOnOverlayClick:true
});
});
</script>
<script type="text/javascript" src="js/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script type="text/javascript">
var jq = jQuery.noConflict();
jq(function(){
var $container = jq('#masonry');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.post',
columnWidth:355,
gutterWidth : 10,
isFitWidth:true,
isAnimated: true,
overlayShow:true
});
});
});
</script>
结果参数fancybox中的参数closeBtn、hideOnOverlayClick设置都无效啊，为了检验fancybox是否有效，将scrolling:'visible'注释掉发现有滚动条显示，说明文件时导入正确的了，可是，看不到关闭按钮！也没有遮罩层！文件图片等导入路径绝对没错！我在别的页面用是正常的！可是放到有masonry插件的这个页面就出现问题了啊，天啊。。。到底怎么回事。。T T花了好长时间把masonry插件弄好开心了好久，又发现fancybox有问题，这是不让人睡觉的节奏。。。。。。。。。。。。。。。。。。。。。大神救我！！小女子感激不尽！！
...全文
请发表友善的回复…
发表回复
sz_syy 2014-09-02
- 打赏
- 举报
<script type="text/javascript">
$.noConflict();
jQuery(function($){
$("a.single_image").fancybox({
padding:0,
closeBtn:true,
autoScale:false,
scrolling:'visible',
autoDimensions:true,
hideOnOverlayClick:true
});
});
</script>
<script type="text/javascript" src="js/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script type="text/javascript">
var jq = jQuery.noConflict();
jq(function(){
var $container = jq('#masonry');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.post',
columnWidth:355,
gutterWidth : 10,
isFitWidth:true,
isAnimated: true,
overlayShow:true
});
});
});
</script>
总觉得你样写，好像有问题
你可以把两件插件自己封装一下，然后自己以对象的形式调用
比如以下这也是我用到的extjs4的表格插件，我自己封闭了一下,代码：
function ObjGrid() {
//实体类列值
this.cmValue = "";
//数据源列
this.storeValue = "";
this.toDivId = "";
this.ajaxUrl = "";
this.pagesize = 0;
this.toolBarObj = null;
this.IsChecked = false;
this.GridHeight = "";
this.GridID = "";
this.GridWidth = "auto";
this.setGridWidth = function (w) {
this.GridWidth = w;
}
this.setGridID = function (i) {
this.GridID = i;
}
this.setHeight = function (h) {
this.GridHeight = h;
}
this.smck = "";
this.setIsCheckBox = function (c) {
this.IsChecked = c;
if (this.IsChecked) {
this.smck = new Ext.grid.CheckboxSelectionModel();
}
else {
this.smck = new Ext.grid.CheckboxSelectionModel({ singleSelect: true });
}
}
this.setToolbar = function (t) {
this.toolBarObj = t;
}
this.setPageSize = function (s) {
this.pagesize = s;
}
//异步路径
this.setAjaxUrl = function (u) {
this.ajaxUrl = u;
}
//渲染
this.setDivId = function (d) {
this.toDivId = d;
}
this.setCMValue = function (c) {
this.cmValue = eval('[' + c + ']');
}
this.setStoreValue = function (s) {
this.storeValue = eval('[' + s + ']');
}
this.IsPageDown = false;
this.setIsPageDown = function (f) {
this.IsPageDown = f;
}
this.ajaxdata = "";
//异步获取数据
this.grid = null;
this.dstore = null;
//创建grid
this.createGrid = function () {
//创建实体
var cm = new Ext.grid.ColumnModel(
this.cmValue
);
//数据源
this.dstore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({ url: this.ajaxUrl, method: 'GET' }),
reader: new Ext.data.JsonReader
({
totalProperty: 'pageCount',
root: 'rowslist',
fields: this.storeValue
})
});
// var start = 0;
//分页控件
var pageTool = new Ext.PagingToolbar({
plugins: [new Ext.ui.plugins.SliderPageSize(), new Ext.ui.plugins.ComboPageSize({ addToItem: false, prefixText: '每页', postfixText: '条' })],
store: this.dstore,
pageSize: this.pagesize,
beforePageText: "第",
afterPageText: "/ {0}页",
firstText: "首页",
prevText: "上一页",
nextText: "下一页",
lastText: "尾页",
refreshText: "刷新",
displayInfo: true,
displayMsg: "总共 {2} 条记录",
emptyMsg: "没有记录"
});
//初始grid
if (this.IsPageDown) {
this.grid = new Ext.grid.GridPanel({
id: this.GridID,
xtype: 'grid',
store: this.dstore,
height: this.GridHeight,
layout: 'fit',
width: this.GridWidth,
border: false,
cm: cm,
viewConfig: {
columnsText: "显示/隐藏列",
sortAscText: "正序排列",
sortDescText: "倒序排列",
forceFit: false
},
tbar: this.toolBarObj,
sm: this.smck,
bbar: pageTool
});
}
else {
this.grid = new Ext.grid.GridPanel({
id: this.GridID,
xtype: 'grid',
store: this.dstore,
height: this.GridHeight,
layout: 'fit',
width: this.GridWidth,
border: false,
cm: cm,
viewConfig: {
columnsText: "显示/隐藏列",
sortAscText: "正序排列",
sortDescText: "倒序排列",
forceFit: false
},
tbar: this.toolBarObj,
sm: this.smck
});
}
//注册双击事件
this.grid.on("rowdblclick", function (thisGrid, rowIndex, e) {
var row = thisGrid.getStore().getAt(rowIndex).data;
GridDoubleClick(row);
});
//注册单击事件
this.grid.on("rowclick", function (thisGrid, rowIndex, e) {
var row = thisGrid.getStore().getAt(rowIndex).data;
var rows = thisGrid.getSelectionModel().getSelections();
GridSingleClick(row, rows);
});
// this.grid.render();
//加载
this.dstore.load({ params: { start: 0, limit: this.pagesize} });
return this.grid;
}
this.GetSelectedRows = function () {
var rows = Ext.getCmp(this.GridID).getSelectionModel().getSelections();
return rows;
}
this.GetAllRows = function () {
var rows = Ext.getCmp(this.GridID).getStore().getRange(0, this.dstore.getCount());
return rows;
}
//刷新
this.ReLoadGrid = function () {
this.dstore.load({ params: { start: 0, limit: this.pagesize} });
}
//grid自适应宽高 gObj 网格控件对象
this.GridReSize = function (gObj) {
var o = parent.GetPanelSize();
var panelHeight = o.el.dom.clientHeight;
var panelWidth = o.el.dom.clientWidth;
gObj.grid.setHeight(panelHeight - 29);
gObj.grid.setWidth(panelWidth - 2);
}
}
然后在页面调用 就是：
ObjGrid obj = new ObjGrid();
obj.属性，
obj.方法
这样就是以对象的形式，不会出现重复，覆盖的现象。你可以参考
pad1614 2014-09-01
- 打赏
- 举报
如果说是以后者为主的话，那我配置的fancybox参数就完全是废了的吧？可是我注释掉scrolling:'visible'后发现这段代码其实是有执行的。。。。
虽然如此，还是按照你说的办法改了下代码，代码如下：
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.fancybox.js"></script>
<script type="text/javascript" src="js/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script type="text/javascript">
var jq = jQuery.noConflict();
jq(function(){
var $container = jq('#masonry');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.post',
columnWidth:355,
gutterWidth : 10,
closeBtn:true,
isFitWidth:true,
isAnimated: true,
overlayShow:true
});
});
jq("a.single_image").fancybox({
padding:0,
closeBtn:true,
autoScale:false,
scrolling:'visible',
autoDimensions:true,
hideOnOverlayClick:true
});
});
</script>
Mxxim敏敏 2014-09-01
- 打赏
- 举报
如果说是以后者为主的话，那我配置的fancybox参数就完全是废了的吧？可是我注释掉scrolling:'visible'后发现这段代码其实是有执行的。。。。
虽然如此，还是按照你说的办法改了下代码，代码如下：
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.fancybox.js"></script>
<script type="text/javascript" src="js/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script type="text/javascript">
var jq = jQuery.noConflict();
jq(function(){
var $container = jq('#masonry');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.post',
columnWidth:355,
gutterWidth : 10,
closeBtn:true,
isFitWidth:true,
isAnimated: true,
overlayShow:true
});
});
jq("a.single_image").fancybox({
padding:0,
closeBtn:true,
autoScale:false,
scrolling:'visible',
autoDimensions:true,
hideOnOverlayClick:true
});
});
</script>
Mxxim敏敏 2014-09-01
- 打赏
- 举报
就是页面没报错误才纠结。。。。不过后来我又把使用masonry插件的代码放到另外一个用fancybox插件没出现问题的页面就好了。。。不过还是纠结为什么在这个页面会没效果。。
lchg120 2014-09-01
- 打赏
- 举报
$.noConflict();和jQuery.noConflict(); 其实是重复调用了插件，应该是插件是有配置项，启用了相同的配置项后，配置参数是以后者为主，故此。要解决的话：1、更改插件名，分别存为不同的文件。2、采用模块化写代码：jsrequire，可以让代码模块化执行，相互不受影响。
嘻哈大咖秀 2014-09-01
- 打赏
- 举报
页面有报什么错误？
会飞的Pikachu 2014-09-01
- 打赏
- 举报
你请吗，话说现在都快吃晚饭了[/quote]我有西瓜Mxxim敏敏 2014-09-01
- 打赏
- 举报
你请吗，话说现在都快吃晚饭了Mxxim敏敏 2014-09-01
- 打赏
- 举报
如果说是以后者为主的话，那我配置的fancybox参数就完全是废了的吧？可是我注释掉scrolling:'visible'后发现这段代码其实是有执行的。。。。
虽然如此，还是按照你说的办法改了下代码，代码如下：
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.fancybox.js"></script>
<script type="text/javascript" src="js/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script type="text/javascript">
var jq = jQuery.noConflict();
jq(function(){
var $container = jq('#masonry');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.post',
columnWidth:355,
gutterWidth : 10,
closeBtn:true,
isFitWidth:true,
isAnimated: true,
overlayShow:true
});
});
jq("a.single_image").fancybox({
padding:0,
closeBtn:true,
autoScale:false,
scrolling:'visible',
autoDimensions:true,
hideOnOverlayClick:true
});
});
</script>
ez2dj_dl 2014-09-01
- 打赏
- 举报
美女别急，咱们先去吃个夜宵，然后慢慢深入...
Mxxim敏敏 2014-09-01
- 打赏
- 举报
