14

私はプロジェクトに取り組んできましたが、解決したいブートストラップの動作に矛盾があることに気付きました。

ポップオーバー (またはツールチップなど、基本的には同じもの) が画面の端に近づくと (右側のポップオーバーの場合、端に近づくと)、画面外に出ないように収縮します (機能するだけです)。ある程度までですが、通常はそれで十分です）。

これは、配置が左にある場合には発生しません。

すなわち:

正しい配置:

通常の幅:

ここに画像の説明を入力

端に近い：

ここに画像の説明を入力

左の配置:

通常の幅:

ここに画像の説明を入力

端に近い：

ここに画像の説明を入力

これらの画像は、問題を説明するために私が書いた小さなDEMOからのものです。

ソースコードをいじりましたが、これまでのところ役に立ちませんでした。そもそもこの動作の正確な原因に指を置くことができないようです。

何か案は？

ps

Bootstrap 3.1.1 を使用しています。新しい 3.2 ではこの問題は解決されません(この時点でのアップグレードは避けたいと思います)。

メジャーアップデート！

掘り下げた後、これはブートストラップとは関係がないことがわかりました-それは単純なcssです-要素を絶対に配置して横に押すと、画面にとどまろうとするようです。

私はこの動作について知りませんでした。自動的に発生しますが、押している方向にのみ発生します。つまり、左から押した div は画面の右端に到達すると縮小し、その逆も同様です。

たまたま、ポップオーバーがleft割り当てでのみ配置されているため、一貫性のない動作が見られます。右に押すと収縮しますが、他の方向には収縮しません。

解決策は代入することrightです - 簡単に聞こえますか? それほどでもない。ソース コードを取得して少し操作し、次の行を追加しました (jsfiddle の 250 行目辺りのどこかに):

if (placement == 'left' && offset.left < 0) {
    var right = ( $(window).width() + 10 ) - ( offset.left + actualWidth ); 

    offset.left = 0;
    $tip.offset(offset);
    $tip.css({ 'right': right });
}

合理的ですね。左へのオフセットが 0 未満の場合 (つまり、画面外になる場合)、ウィンドウの幅を計算し、そこから左のオフセットとポップオーバー ( actualWidth) 自体の幅を削除すると、右からの距離が得られます。

次に、オフセットを左にリセットし、右の配置を適用してください。しかし...それはある程度しか機能しません-つまり、2回目にしか機能しません。

あなた自身でそれをチェックしてください！一度ホバーすると位置がずれてしまい、マウスを横に引いてもう一度試すと、突然正しく配置されます。なんてこったい？

編集

わかりました、これはよく出てくるようですので、明確にします：

auto配置については知っています。私はそれをしたくありません。ポップオーバーの移動先を制御したいのですが、自動的に決定させることは問題の解決策ではなく、単に回避しているだけです

4

3 に答える 3

1

よし、少し近づいた。

rightCSS でを割り当てると、actualWidthとactualHeightが変更されるため、これらの変数を更新する必要があります。あなたのjsfiddleの253行目あたり：

if (placement == 'left' && offset.left < 0) {
    var right = (  $(window).width() + 10) - ( offset.left + actualWidth ); 

    offset.left = 0;
    $tip.offset(offset);
    $tip.css({ 'right': right });
    actualWidth  = $tip[0].offsetWidth;
    actualHeight = $tip[0].offsetHeight;
}

これは最初にホバーしたときは機能しますが、その後は毎回 をtop高く設定しすぎるため、ツールチップの上部を読むことができません。

更新:値を設定すると、関数right内の位置が台無しになっているようです。applyPlacementこれを修正するにrightは、初期の actualWidth と actualHeight を設定する前に値をクリアします (225 行目あたり)。

$tip.css({ 'right': '' });
// check to see if placing tip in new offset caused the tip to resize itself
var actualWidth  = $tip[0].offsetWidth
var actualHeight = $tip[0].offsetHeight
于 2014-08-06T05:02:12.550 に答える
0

これは、Web ページにアクセスするブラウザ/クライアントに大きく関係していると思います。たとえば、ヒントを適切な側に表示する (束ねられたり、左または右から判読不能になったりしない) には、オブジェクト要素の offsetLeft と offsetTop を javascript で決定し、それに応じて配置します。解像度ごとに異なるページを持つことができます。

画面幅が 400 ～ 720 ピクセルの場合の CSS の例:

@media screen and (min-width:400px) and (max-width:721px)

いくつかの擬似コード:

if (this.offsetLeft < 200)   //if there's not enough room to display the tip
tip.offsetLeft += 200;
于 2014-08-05T17:41:24.620 に答える
-1

私はあなたが基本的にそれを持っていると思います、それは私にとってはうまくいっています。

最小幅検出を追加して、小さすぎないようにします。

if (/bottom|top/.test(placement)) {
  var delta = 0

  if (offset.left < 0) {
    delta       = offset.left * -2
    offset.left = 0

    $tip.offset(offset)

    actualWidth  = $tip[0].offsetWidth
    actualHeight = $tip[0].offsetHeight
  } 

  this.replaceArrow(delta - width + actualWidth, actualWidth, 'left');

} else {
    if (placement == 'left' && offset.left < 0) {
        var right = (  $(window).width() + 10) - ( offset.left + actualWidth ); 

        offset.left = 0;
        $tip.offset(offset);
        $tip.css({ 'right': right });
    }

    this.replaceArrow(actualHeight - height, actualHeight, 'top');    
}
于 2014-07-31T20:32:12.923 に答える