0

私は非常に厳密に設計された（私ではなく）ナビゲーション機能を備えたクライアントサイトを持っています：

スライドショーナビゲーション

これは順序付けられていないリストで構成され、各リスト項目に3つのDIVがあります。

<ul id="application-tabs">
   <li>
      <div class="cv-home-applications-slideshow-tab-first"></div>
      <div class="cv-home-applications-slideshow-tab"><h4>Coffee</h4></div>
      <div class="cv-home-applications-slideshow-tab-right"></div>
   </li>
   <li>
      <div class="cv-home-applications-slideshow-tab-left"></div>
      <div class="cv-home-applications-slideshow-tab"><h4>Pet Food</h4></div>
      <div class="cv-home-applications-slideshow-tab-right"></div>
   </li>
</ul>

コンテンツは中央のDIVにあり、最初/左と右のDIVは角度の付いたタブボタンを作成します。

このクライアントは、ページ上部にあるGoogle翻訳ユーティリティもリクエストしています。

私の問題は、ナビゲーション要素が常にそのスペースを端から端まで埋める必要があることです。翻訳によって「Coffee」ではなく「Cafe」などの短い単語が生成される場合は、それに応じて拡張する必要があります。

同様に、「Cerveza」のように単語が長くなる場合は、フォントサイズを小さくする必要があります。

CSSと組み合わせてJavaScriptを使用する必要があると確信していますが、どこから始めればよいのか完全にはわかりません。どんな援助もいただければ幸いです。

ありがとう、

ty

4

1 に答える 1

1

これはソリューションのフィドルです。メニューを自動的に配置してhttp://jsfiddle.net/nFRjc/に合わせます

var $j = jQuery.noConflict();
    $j(document).ready(function () {
        var containerWidth = $j('#application-tabs').width();
        var linksWidth = 0;
        $j('#application-tabs li div + div').children().each(function () {
            linksWidth += $j(this).width();
        });       
        var linkSpacing = Math.floor((containerWidth - linksWidth) / ($j('#application-tabs').children('li').length));
        $j('#application-tabs').children().not(':last-child').css('margin-right', linkSpacing + "px");
    });​

フォントが大きすぎる場合は、フォントのサイズを小さくする簡単なソリューションです。このフィドルを参照してください。リンクのフォントサイズは100pxですが、スクリプトは収まるまで縮小します。 http://jsfiddle.net/nFRjc/2/ 個々のリンクの幅の合計がコンテナーの幅より大きいかどうかを確認し、true の場合はフォント サイズを 1 減らすループを追加しました。

var $j = jQuery.noConflict();
    $j(document).ready(function () {
        var containerWidth = $j('#application-tabs').width();
        var linksWidth = 0;
        $j('#application-tabs li div + div').children().each(function () {
            linksWidth += $j(this).width();
        });
        while (linksWidth >= (containerWidth - 100)) {
            $j('#application-tabs li div + div h4').css({'font-size': '-=1'});
            var linksWidth = 0;
            $j('#application-tabs li div + div').children().each(function () {
                linksWidth += $j(this).width();
            });
        }
        var linkSpacing = Math.floor((containerWidth - linksWidth) / ($j('#application-tabs').children('li').length));
        $j('#application-tabs').children().not(':last-child').css('margin-right', linkSpacing + "px");
    });​
于 2012-08-29T20:08:12.553 に答える