3

私は現在、パンくずナビゲーションをトリミングしてサイトのデザインを破壊しないようにする問題に苦労しています。

問題は次のとおりです。パンくずナビゲーションの幅は固定されています（たとえば900px）-したがって、ユーザーが、900pxを超えるパンくずリストになる場所にあるアイテムに移動した場合は、それに合わせてトリミングする必要があります。設計。

だから、私が立ち往生している部分はこれです：どのくらいトリミングするか、どこでトリミングするかをどのように決定できますか？ブレッドクラムの途中でテキストのオーバーフローをトリミングするだけでよいことがわかったので、結果として

いくつか>ナビゲーション>それ>...>は>長すぎる>

しかし、どうすればどこでカットするかを決めることができますか？また、要素のアンカーがトリミングされないようにするにはどうすればよいですか？！

私は本当にこれに固執しています、そのような問題に対処するための受け入れられた方法はありますか？！

4

3 に答える 3

5

ルート要素を保持し、ブレッドクラムが収まるまで次の要素を削除します。実際には、JavaScriptでこれを行うことをお勧めします。そうすると、ブレッドクラムのピクセル幅を計算するメソッドがありますが、PHPでは、ブレークポイントとして固定数の文字を使用する必要があります。異なる長さ。JSを使用することは、リンクがまだそこにあり、隠されているだけなので、SEOなどにはとにかく良いでしょう。

ブレッドクラムとして単純なリスト要素があると仮定します。

<ul id="breadcrumb">
    <li><a href="/">Home</a></li>
    <li><a href="/products/">Products</a></li>
    <li><a href="/products/hats/">Hats</a></li>
    <li><a href="/products/hats/large/">Large</a></li>
    <li><a href="/products/hats/large/red/">Red</a></li>
    <li><a href="/products/hats/large/red/round/">Round</a></li>
</ul>

次に、次のように長さをトリミングできます（jQueryを使用）。

if($('#breadcrumb').width() > 900) {
    $('#breadcrumb li:first').after('<li>...</li>');

    while($('#breadcrumb').width() > 900) {    
        $('#breadcrumb li').eq(2).remove();
    }
}

簡単な例で、おそらく機能しませんが、いくつかのアイデアが得られるはずです。

ところで、PHPでトリミングを実行する場合、単純にしたい場合は、ブレッドクラムが形成されているときにそれを実行する必要があります。後でトリミングを開始する場合は、かなり複雑な正規表現を使用するか、プロジェクトに何らかのDOMパーサーを含めてアンカータグをそのまま維持する必要があります。

于 2010-09-30T20:04:45.117 に答える
4

私のソリューションはプログラミングよりもデザイン指向であることを私は理解していますが、個人的には、パンくずリストをトリミングしません。代わりに、ブレッドクラムのコンテンツが900pxを超える場合は、完全に不透明から完全な透明に変化するpngをオーバーレイし、ブレッドクラムの最初の部分がフェードアウトするように見せます。次に、jQueryを使用して、パンくずリストをマウスの位置に応じて左または右にスクロールします（右マージンの左からのパーセンテージに基づいており、中心は0％または100％です）。同様に、カーソルが左マージンに近い場合に、右側に同じ透明なpng画像の反転バージョンを使用します。

これが私が言っていることをよりよく説明するための例です：

代替テキスト

お役に立てれば ！

于 2010-09-30T20:44:14.937 に答える
0

ブレッドクラムが最後に到達したときに休憩をとらないようにする場合は、次のようにします。

長すぎる単語を切り捨てる関数を使用してください。したがって、最長の単語の長さを決定します。表示を続けるのではなく、特定のポイントの後、通常は単語の最後で...を実行し、ブレッドクラムの次の部分に進みます。

このページをご覧ください。

http://www.the-art-of-web.com/php/truncate/

于 2010-09-30T20:08:01.360 に答える