Одна из новых возможностей IE 8 — это web slices, фрагменты веб-страниц, которые можно просматривать браузером не открывая всю страницу целиком.И все бы хорошо, вот только одна неприятная мелочь — в preview окне для web slice нет автоматической прокрутки (scrolling). Если один и тот же html просто открыть в браузере и он там не помещается — полоса прокрутки появится, если в preview окне для web slices — прокрутки нет.
Для некоторых web slices это не играет никакой роли. Например, для лотов с eBuy, которые так любят приводить в пример. Один лот можно комфортно разместить в окошке размером 320 x 240 (размер preview окна по умолчанию). Однако часто web slices представляют собой какие-нибудь списки — последние новости, анонсы, комментарии, да мало ли. Попробуйте открыть страницу valuta.online.ua и добавьте web slice с курсами валют. А теперь откройте его в preview окне. Что, тоже пробуете крутить колесико мышки чтобы просмотреть содержимое, как и я?
В принципе, пользователь может растянуть окно до какого-то предела. Но не факт, что все поместится даже в этом случае да и управлять размерами окна сами вы никак не сможете. А изначально оно открывается размером 320 x 240 и никак не подстраивается под размер отображаемого html.
Конечно, что-то можно сделать и в этом случае. Например, ограничить количество элементов списка (первые 5) и выводить не более 100 символов в каждом элементе. Но тогда web slice может потерять свое главное преимущество и вместо информации, которую можно быстро просмотреть, превращается в обычный баннер типа «Эй, посмотри, что у нас есть! Хочешь посмотреть — заходи на сайт!».
Так что можно попробовать добавить прокрутку самому. Это будет выглядеть примерно так:
<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>
В результате мы получим web slice, окруженный 10px отступами от краев preview окна. Если содержимое html не будет помещаться — появиться вертикальная прокрутка. Аттрибуты «overflow-x» и «overflow-y» уникальны для IE, но и сами web slices тоже уникальны для IE, так что проблему это не создаст.
Как будет выглядеть такая прокрутка можно посмотреть на примере online результатов футбольных матчей.
Есть еще один момент, на который нужно обратить внимание. Так как мы должны отдавать специально сформированный html для preview окна, простейший способ создания web slices при помощи 2-3 аттрибутов нас не устроит. Мы будем использовать «alternative display source» — возможность указать url, возвращающий html для preview. Для этого:
Создаем страницу, которая будет формировать нужный нам html. Допустим, это будет /webslices.php (/webslices.aspx — для .NET-чиков и просто /webslices для SEO оптимизаторов :)
Добавляем к коду web slice указатель на этот html:
<div class="hslice" id="slice">
<span class="entry-title">Заголовок web slice</span>
<a rel="entry-content" href="/webslice.php" style="display:none;"></a>
</div>
Более длинное описание вы сможете найти в моем посте "Web Slices для IE 8". Ну и конечно никакая статья не заменит документации по Web Slice в MSDN. Удачи вам в разработке!
