jquery.justify.jsを使って均等割りする時の健忘録

Jquery

WEBサイトを制作している時に、ふとテーブルなんかを組んでいて綺麗に均等割りに文字が並ぶと綺麗なのに・・・
って思ったことありませんか？
millelog_20160227

CSS的には、
text-align: justify;
text-justify: inter-ideograph; /* IE向け */
を使用して対応するのがスマートかな～って思いましたが。。。うまくいかないんです（汗

そこで今回調べてみたところ、jquery.justify.jsと言うjqueryがありました。

使い方は至って簡単！

先ずはメソッドを読み出して。。。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.justify.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.justify').justify();
    $('.justify-table th').justify();
});
</script>

適用させてたい所に指示を出すだけ！

<h1 class="justify">均等割り付けサンプル</h1>
<table class="justify-table">
・
・
</table>

※参考までに見出し文書とテーブル内のthに対して適用させた例を挙げています。

<script type="text/javascript">
$(document).ready(function(){
    $('.justify').justify();
    $('.justify-table th').justify();
});
</script>

上記内では、$(‘.justify’).justify();　にて見出しなどに対してはクラス定義で.justifyと書けばよい訳で、テーブルなどに関しては.justify-table thと書けば良いです。

ただ。。。
色々ググってみたものの上記のような書き方をみなさんはされていまして同じことをしているのに、いざ実際にやってみると適用されませんでした（泣

そこで、デバックしてみたところエラーが表示されているのに気づきました！

エラーは一つしか表示されないのですが、そこを解決するとまた新たなエラーが！
まぁそこは割愛しまして下記の様にjquery.justify.js内の項目を書き換えると適用されるようになります。

jquery.justify.js内の34行目にある

if (jQuery.browser.msie && jQuery.browser.version >= 8) {

を下記の様に書き換えてください。

if( !jQuery.support.noCloneEvent && jQuery.support.tbody ) {

続いて81行目にある

if ($.browser.msie && $.browser.version < 8) {

を下記の様に書き換えてください。

if( !jQuery.support.noCloneEvent && !jQuery.support.tbody ) {

これで解決！

因みにjquery.justify.jsはこちらのGitHubからどうぞ。

みっくん