JQuery插件调用Columnizer不能正常工作在IE上 [英] Jquery plugin called Columnizer not functioning properly on IE
本文介绍了JQuery插件调用Columnizer不能正常工作在IE上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用一个名为Columnizer的Jquery插件来布局我的文本，它在firefox上工作得很好，但它不能在IE上工作，而不会创建一个新的列并将它们静态放置。
http：// welcome。 totheinter.net/columnizer-jquery-plugin/
对于Firefox，它会自动将元素排列在
列中：我们如何使它也在IE上工作？我真的很努力，只是没有工作
我的html
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js>< / script>
< script type =text / javascriptsrc =https://raw.github.com/adamwulf/Columnizer-jQuery-Plugin/master/src/jquery.columnizer.js>< /脚本>
< script type =text / javascript>
$（function（）{
$（'h1'）。addClass（'dontend'）;
$（'。wide'）。columnize（{
width：120 ，
height：400
}）;
}）;
< / script>
< script style =display：nonetype =text / javascript> var Mint = new Object（）; Mint.save = function（）
{var now = new Date（）; var debug = false; if（window.location.hash =='＃Mint：Debug'）{debug = true;}; var path ='http：//welcome.totheinter.net/mint/？ record& key = 6a56784248357a3735323031363633316663796c526d'; path = path.replace（/ ^ https？：/，window.location.protocol）; for（var developer in this）
{for（var plugin in this [developer]）
{if（this [developer] [plugin]&& this [developer] [plugin] .onsave）
{path + = this [developer] [plugin] .onsave（）;};} }; path + ='&'+ now.getTime（）; if（debug）{window.open（path +'& debug& errors'，'MintLiveDebug'+ now.getTime（））; return;}; var ie = / * @ cc_on！@ * / 0; if（！ie&&&&&&&&（document.createElementNS || document.createElement））
{var tag =（document.createElementNS）？document .createElementNS（'http://www.w3.org/1999/xhtml','script'）：document.createElement（'script'）; tag.type ='text / javascript'; tag.src = path +'& ; serve_js'; document.getElementsByTagName（'head'）[0] .appendChild（tag）;}
else if（document.write）
{document.write（'<'+'script type =text / javascriptsrc ='+ path +'& amp; serve_js><'+'/ script>'）;};}; if（！Mint.SI）{Mint.SI = new Object （）;}
Mint.SI.Referrer = {onsave：function（）
{var encoded = 0; if（typeof Mint_SI_DocumentTitle =='undefined'）{Mint_SI_DocumentTitle = document.title;}
else {encoded = 1;}; var referer =（window.decodeURI）？window.decodeURI（document.referrer）：document.referrer; var resource =（window.decodeURI）？window.decodeURI（document.URL）： document.URL; return'& referer ='+ escape（referer）+'& resource ='+ escape（resource）+'& resource_title ='+ escape（Mint_SI_DocumentTitle）+'& resource_title_encoded ='+ encoded; }}; Mint.save（）;< / script>
< meta charset =utf-8/>
< link rel =stylesheethref =f.css>
< div class =block> Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello< / div>< br>
< div class =block> Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello< / div>< br>
< div class =block> Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello< / div>< br>
< div class =block> Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello< / div>< br>
< div class =block> Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello< / div>< br>
< / div>< / div>
我的CSS
.container {
background-color：＃;
height：300px;
width：700px;
}
.block {
width：100px;
height：150px;
background-color：＃;
margin：10px;
margin-top：5px;
}
解决方案
>< div class =block> ，并在 wide 类中保留纯文本。这应该工作，columnizer插件将自动添加每个块的类。
例如：
< div class =container>
< div class =wide>
< p> Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello< / p>
< p> Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello< / p>
< / div>
< / div>
Columnnizer会自动将文本分成不同的列。
如下所示
< div class =widestyle =width：2700px;
< div class =first columnstyle =width：300px; float：left;>
< div class =columnstyle =width：300px; float：left;>
< div class =columnstyle =width：300px; float：left;>
< / div>
新代码（将此代码粘贴到文本编辑器并将其另存为HTML页面并检查IE8和IE7上的HTML页面）
<！DOCTYPE html PUBLIC DTD HTML 4.01 Transitional // ENhttp://www.w3.org/TR/html4/loose.dtd\">
< html lang =en>
< head>
< head>
< style>
.column * {padding：5px; }
< / style>
< script type =text / javascriptsrc =http://code.jquery.com/jquery-1.9.1.min.js>< / script>
< script type =text / javascriptsrc =https://raw.github.com/adamwulf/Columnizer-jQuery-Plugin/master/src/jquery.columnizer.js>< /脚本>
< script type =text / javascript>
$（function（）{
$（'h1'）。addClass（'dontend'）;
$（'。wide'）。columnize（{
width：300 ，
height：200
}）;
}）;
< / script>
< / head>
< body>
< div id =wrapper>
< div class =wide>
< h1> Lorem ipsum ne justo< / h1>
< p> Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello HelloHello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello< / p>
< p> Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello< / p>
< p> Hello hello HellHello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello o hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello< / p>
< p> Hello hello Hello hello Hello hello Hello hello Hello hello Hello heHello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello llo Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello< / p>
< p> Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello< / p>
< p> Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello< / p>
< / div>
< / div>
< / body>
< / html>
I'm using a Jquery plugin called Columnizer to layout my text and it works perfectly on firefox but it doesn't work probably on IE without making a new column and placing them statically.
http://welcome.totheinter.net/columnizer-jquery-plugin/
With Firefox , it automically arranges the element in column
How can we make it also work on IE? I'm trying really hard and just not working
My html
<script type = "text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type = "text/javascript" src ="https://raw.github.com/adamwulf/Columnizer-jQuery-Plugin/master/src/jquery.columnizer.js"></script>
<script type="text/javascript">
$(function(){
$('h1').addClass('dontend');
$('.wide').columnize({
width : 120,
height : 400
});
});
</script>
<script style="display:none" type="text/javascript">var Mint=new Object();Mint.save=function()
{var now=new Date();var debug=false;if(window.location.hash=='#Mint:Debug'){debug=true;};var path='http://welcome.totheinter.net/mint/?record&key=6a56784248357a3735323031363633316663796c526d';path=path.replace(/^https?:/,window.location.protocol);for(var developer in this)
{for(var plugin in this[developer])
{if(this[developer][plugin]&&this[developer][plugin].onsave)
{path+=this[developer][plugin].onsave();};};};path+='&'+now.getTime();if(debug){window.open(path+'&debug&errors','MintLiveDebug'+now.getTime());return;};var ie=/*@cc_on!@*/0;if(!ie&&document.getElementsByTagName&&(document.createElementNS||document.createElement))
{var tag=(document.createElementNS)?document.createElementNS('http://www.w3.org/1999/xhtml','script'):document.createElement('script');tag.type='text/javascript';tag.src=path+'&serve_js';document.getElementsByTagName('head')[0].appendChild(tag);}
else if(document.write)
{document.write('<'+'script type="text/javascript" src="'+path+'&serve_js"><'+'/script>');};};if(!Mint.SI){Mint.SI=new Object();}
Mint.SI.Referrer={onsave:function()
{var encoded=0;if(typeof Mint_SI_DocumentTitle=='undefined'){Mint_SI_DocumentTitle=document.title;}
else{encoded=1;};var referer=(window.decodeURI)?window.decodeURI(document.referrer):document.referrer;var resource=(window.decodeURI)?window.decodeURI(document.URL):document.URL;return '&referer='+escape(referer)+'&resource='+escape(resource)+'&resource_title='+escape(Mint_SI_DocumentTitle)+'&resource_title_encoded='+encoded;}};Mint.save();</script>
<meta charset="utf-8" />
<link rel="stylesheet" href="f.css">
<div class="container"> <div class="wide">
<div class="block"> Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello </div><br>
<div class="block"> Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello </div><br>
<div class="block"> Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello </div><br>
<div class="block"> Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello </div><br>
<div class="block"> Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello </div><br>
<div class="block"> Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello </div><br>
</div></div>
My CSS
.container {
background-color: #;
height: 300px;
width: 700px;
}
.block {
width: 100px;
height:150px;
background-color: #;
margin: 10px;
margin-top: 5px;
}
解决方案
Remove <div class="block"> and just keep plain text inside wide class. This should work, the columnizer plugin will add the classes for each block automatically.
Eg:
<div class="container">
<div class="wide">
<p>Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello </p>
<p>Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello </p>
</div>
</div>
The Columnnizer will automatically divide the text into different columns. Like shown below
<div class="wide" style="width: 2700px;">
<div class="first column" style="width: 300px; float: left;">
<div class="column" style="width: 300px; float: left;">
<div class="column" style="width: 300px; float: left;">
</div>
New Code(Paste this code on a Text editor and save it as a HTML page and check the HTML page on IE8 and IE7)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<head>
<style>
.column *{ padding: 5px; }
</style>
<script type = "text/javascript" src ="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type = "text/javascript" src ="https://raw.github.com/adamwulf/Columnizer-jQuery-Plugin/master/src/jquery.columnizer.js"></script>
<script type="text/javascript">
$(function(){
$('h1').addClass('dontend');
$('.wide').columnize({
width : 300,
height : 200
});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="wide">
<h1>Lorem ipsum ne justo</h1>
<p>Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello HelloHello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello </p>
<p>Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello </p>
<p>Hello hello HellHello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello o hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello </p>
<p>Hello hello Hello hello Hello hello Hello hello Hello hello Hello heHello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello llo Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello </p>
<p>Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello </p>
<p>Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello hello Hello </p>
</div>
</div>
</body>
</html>
这篇关于JQuery插件调用Columnizer不能正常工作在IE上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
