商品名・・・・・・100円とかの「・・・」を作るJS

よく、商品一覧ページとかである

商品名1・・・・・・・100円
商品名2・・・・・・1,000円
商品名その３・・・10,000円
商品名その4・・・・・・10円

の「・・・」の部分を作るJS。

背景がベタ塗りならCSSだけで出来るけど、背景にテクスチャ敷いてたりしてると難しい（CSSだけでは無理？）だと思ったので、JS使って実現させる事に。

しかし、「・・・」ってなんて言いうんだろう。
勝手にdotListとかいう名前にしちゃったけど、それだと

・ほげほげ
・ふがふが

と混同するよね・・・。

調べたら「リーダー」で良いみたいなので、leaderListにしました。
http://ja.wikipedia.org/wiki/%E3%83%AA%E3%83%BC%E3%83%80%E3%83%BC_(%E8%A8%98%E5%8F%B7)

HTML

<div class="leaderList"><span class="left">ほげほげ</span><span class="dot"></span><span class="right">1,000円</span></div>
<div class="leaderList"><span class="left">ふがふがぴよ</span><span class="dot"></span><span class="right">100円</span></div>
<div class="leaderList"><span class="left">うわぁぁぁぁぁぁぁ</span><span class="dot"></span><span class="right">900円</span></div>

CSS

div.leaderList{
  margin: 5px 0;
  width: 400px;
  overflow: hidden;
}

div.leaderList span.left {
  display: block;
  float: left;
}

div.leaderList span.right {
  display: block;
  float: right;
}

JavaScript

/**
 *	ほげ・・・・・・・・100
 *	ふがふが・・・1000
 *	とかの「・・・」を作る
 *	
 *	@param	element (jQueryElemet)
 *	@param	imagePath (ドット画像のURL)
 *	@param	margin (ドット画像のマージン)
 *
 */
function addLeaderList(element, imagePath, margin){
	var margin = margin || 0;
	element.each(function(){
		var dWidth = parseInt($(this).width());
		var dHeight = parseInt($(this).height());
		var lWidth = parseInt($(this).children('.left').width());
		var rWidth = parseInt($(this).children('.right').width());
		
		var dotElement = $(this).children('.dot')
		dotElement.css({
			margin: margin,
			display: 'inline-block',
			height: dHeight + 'px',
			width: dWidth - (lWidth + rWidth) - 10 + 'px',
			background: 'url(' + imagePath + ') repeat-x left bottom'
		});
	});
}

addLeaderList($('.leaderList'), 'image/dot.gif', '0 5px');