Webスライスのスクロールまたは無敵の詰め込み方

画像 IE 8の新機能の1つは、ページ全体を開かずにブラウザで表示できるWebスライスのWebスライスです。



そして、すべてがうまくいくでしょう、ここに1つの不快な些細なことだけがあります-Webスライスのプレビューウィンドウに自動スクロールはありません。 同じHTMLがブラウザで単に開かれ、そこに収まらない場合、Webスライスのプレビューウィンドウにスクロールがない場合、スクロールバーが表示されます。



一部のWebスライスでは、これは何の役割も果たしません。 たとえば、 eBuyのあるロットの場合、例として引用するのがとても好きです。 1つのロットを320 x 240ウィンドウ(デフォルトのプレビューウィンドウサイズ)に快適に配置できます。 ただし、多くの場合、Webスライスは何らかの種類のリストです。最新のニュース、お知らせ、コメントがありますが、あなたは決して知りません。 valuta.online.uaページを開いて、為替レートでWebスライスを追加してみてください。 プレビューウィンドウで開きます。 私のように、マウスホイールを回転させてコンテンツを表示しようとしていますか?



画像



原則として、ユーザーはウィンドウを特定の制限まで拡大できます。 しかし、この場合でもすべてが適合するという事実ではなく、ウィンドウサイズを自分で管理することはできません。 また、最初は320 x 240のサイズで開き、表示されるhtmlのサイズに適応しません。



もちろん、この場合は何かを行うことができます。 たとえば、リストアイテムの数(最初の5つ)を制限し、各アイテムに100文字以内で表示します。 しかし、Webスライスはその主な利点を失う可能性があり、すぐに表示できる情報の代わりに、「おい、私たちが持っているものを見てください!」のような通常のバナーに変わります。 ご覧になりたい場合は、サイトにアクセスしてください!”



そのため、自分でスクロールを追加してみてください。 次のようになります。



<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title> web slice</title>

<style type="text/css">

html { height: 100% }

body { padding: 0px; margin: 0px; height: 100% !important; overflow: hidden; }

#outer { overflow-x: hidden; overflow-y: auto; height: 100% }

#inner { padding: 10px; }

</style>

</head>

<body>

<div id="outer">

<div id="inner">

<!-- html web slice -->

</div>

</div>

</body>

</html>







その結果、プレビューウィンドウの端から10pxのパディングで囲まれたWebスライスを取得します。 htmlコンテンツが収まらない場合、垂直スクロールが表示されます。 「overflow-x」および「overflow-y」属性はIEに固有ですが、Webスライス自体もIEに固有であるため、問題は発生しません。



そのような巻物がどのように見えるかは、 オンラインサッカーの結果の例で見ることができます。



画像



もう1つ注意が必要な点があります。 プレビューウィンドウ用に特別に形成されたhtmlを提供する必要があるため、2〜3個の属性を使用してWebスライスを作成する最も簡単な方法は適していません。 「代替表示ソース」-プレビュー用にhtmlを返すURLを指定する機能を使用します。 これを行うには:



必要なhtmlを形成するページを作成します。 /webslices.php(.NETユーザーの場合は/webslices.aspx、SEOオプティマイザーの場合は/ webslicesのみ)としましょう。



このHTMLへのポインターをWebスライスコードに追加します。



<div class="hslice" id="slice">

<span class="entry-title"> web slice</span>

<a rel="entry-content" href="/webslice.php" style="display:none;"></a>

</div>







より長い説明は、私の記事「 IE 8のWebスライス 」にあります。 そしてもちろん、MSDNのWeb Sliceドキュメントを置き換える記事はありません。 開発を頑張ってください!



All Articles