IMHO.WS

IMHO.WS (https://www.imho.ws/index.php)
-   Веб-программирование (https://www.imho.ws/forumdisplay.php?f=29)
-   -   Быстрый переход на контент (https://www.imho.ws/showthread.php?t=99122)

crawler 27.01.2006 01:14

Быстрый переход на контент
 
Я попытаюсь об'яснить что мне надо - я знаю что, но не знаю как именно. Допустим есть длинный ХТМЛ (локальный файл), на 150-200 страниц (экранов). Он содержит 100-150 логических единиц (1-2 экрана каждая). У каждой такой единицы есть логическое имя ( допустим А1, А2, Б3 и т.д. ) Мне интересно как сделать быстрый переход с одного места на другое. Первое что пришло в голову - поставить слева фрейм с шорткатами. Но может быть сегодняшнии веб-технологии предлагают более продвинутые способы - какая-нибудь плавающая кнопка, при нажатии на которую открывается список переходов или что-то в таком роде. Спасибо.

П.С. Понятно, что файл я сам генерю.

Hatifnatt 27.01.2006 02:41

Плавающая кнопка? Да не вопрос!
Вверху страницы пишешь примерно так
Код:

<div style="position:fixed; left:10px; right:0px;">
тут размещаешь свои ссылки
</div>

И все что находится внутри <div>...</div> будет висет вверху

Trotil 27.01.2006 03:02

1) Якоря никто не отменял:
<a href="#a1">Логическая единшица A1</a>
<a href="#a2">Логическая единшица A2</a>
...
<a name="a1"></a>
<!-- текст логической единицы A1 -->
...
<a name="a2"></a>
<!-- текст логической единицы A2 -->
...

Вот как это предствить удобства перемещения? Я так понял, что задача состоит в том, в каком месте html-документа мы не находились, было бы доступно меню перехода.

Подходов много на самом деле.
Первая группа подходов состоит в том, что сделать одну часть страницы неподвижной, а вторую часть - подвижной. Это или фреймы, которые вы упомянули, или, например, <div> фиксированного размера, в который помещаются все логические единицы.
Грубый пример:
Код:

<div style="width: 200px; height: 250px; border: 1px solid #666;        overflow: scroll;  ">
<a name="1"></a>1<br><br><br><br><br><br><a name="2"></a>2<br><br><br><br><br><br><a name="3"></a>3<br><br><br><br><br><br><a name="4"></a>4<br><br><br><br><br><br></div>
<a href="#1">1</a>&nbsp;<a href="#2">2</a>&nbsp;<a href="#3">3</a>&nbsp;<a href="#4">4</a>

Вторая группа состоит в примении z-index`а, то есть в позиционировании одной части web-документа над другой. Этот поход более современный, главное им не злоупотреблять. Пример таких меню можете посмотреть тут:
1) http://www.dynamicdrive.com/dynamici...taticmenu3.htm
2) http://www.dynamicdrive.com/dynamicindex1/popit.htm - можно сделать такое после каждого блока или закрепить в верхнем углу
3) http://www.dynamicdrive.com/dynamici...ontextmenu.htm - только в опере не работает... :(

Hatifnatt
Единственная бяка, что Internet Explorer не поддерживает данный аргумент...

Hatifnatt 27.01.2006 03:22

Цитата:

Trotil:
Единственная бяка, что Internet Explorer не поддерживает данный аргумент...
Да, а ведь точно! Давно не занимался этим делом и этот момент упустил.
Вобщем хотел как проще, а получилось как всегда. :(
Приношу извинения за дезинформацию :молись: в следующий раз буду проверять лучше.
К сожалению в случае с IE без скрипта не обойтись (зато своих объектов наворотили целую кучу).

СТРЕЛЕЦ 27.01.2006 04:56

Цитата:

Hatifnatt:
Единственная бяка, что Internet Explorer не поддерживает данный аргумент...
К сожалению в случае с IE без скрипта не обойтись
В случае с IE можно использовать элемент <IFRAME> (плавающий фрейм). Эффект такой же как с помощью <DIV>
Плавающие кадры не требуют использования элемента <FRAMESET>.

crawler 27.01.2006 12:42

Больше всего понравилось решение с контекстным меню (3 ссылка от Trotil). Таблица ссылок сделаная так не занимает место на экране и видима лишь когда необходима. Большое спасибо всем.


Часовой пояс GMT +4, время: 19:16.

Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2026, Jelsoft Enterprises Ltd.