読者です 読者をやめる 読者になる 読者になる

ゴミ溜め@技術系日常系雑文

主にWeb技術やそのほかつまづいたこととか引っかかって調べたこととかをまとめてます。

はてなダイアリーから引っ越しました。)

昨日の件結局妥協した。

javascript jQuery ウェブサイト制作

昨日の件、妥協した。
やっぱり。heightLine.jsを使おう。ただ、やっぱりいちいちクラス名を指定するのがめんどくさめんどくさいのでheightLine.jsのnew function()内の末尾に下記のコードを追加した。

追記。
しまった。addClassの前にremoveClassしてないので実行のたびに同じクラス名を付与し続けるというとんでもないことしてた。修正。

  jQuery.fn.heightLine = function(groupName) {
    
    var className = "heightLine" + ( typeof(groupName) != "undefined" ? "-"+groupName: "" );
    
    $(this).removeClass(className);
    $(this).addClass(className);
    
    heightLine();
  };

jquery.flatheights.js同様に高さ指定する要素を指定できるようになったのでまあ良しとする。

使い方は

/**
 * @param target    string 高さを揃えたい対象
 * @param groupName string グループ化したい場合に、名前を指定する
 */
$( target ).heightLine( groupName);

例。

$("#side-navi,#main-content").heightLine();
  // -> 「#side-navi」と「#main-content」に「heightLine」というクラス名を付加した後、heightLineを実行する。

$(".section").heightLine("section");
  // -> 「.section」に対して、「heightLine-section」というクラス名を付加した後、heightLineを実行する。

複数個のグループごとに高さを揃えたい時には、groupNameに適当な名前を設定する。