Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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

商品名1・・・・・・・100円
商品名2・・・・・・1,000円
商品名その3・・・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');
Evolutor_web
Webサイトを中心にいろいろとやってる人。FlashやらHTMLやらPHPやらJavaScriptやらもろもろ。 趣味はPC/Mac、スマホ、音楽、サバゲ、東方。 つまり、金のかかるただのオタク。
http://www.evolutor.net/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away