A якоря (anchors), гиперсвязи (hyperlinks), и т д


1 SaphuA [2011-03-30 16:05:00]

У меня есть простой TextBlock, подобный этому (он должен быть TextBlock):

То, что я хотел бы сделать, — это когда пользователь нажимает на HyperLink сверху, чтобы он прокручивал вниз якорь внизу. Возможно ли это в WPF?

hyperlink wpf anchor textblock

2 ответа

2 Решение Snowbear [2011-03-30 16:29:00]

Вы можете использовать метод BringIntoView, который должен прокручивать ваш scrollViewer до FrameworkElement , на который вы вызывали BringIntoView . Следующий шаг — сопоставить гиперссылку с гиперссылкой с целевой гиперссылкой. Самый простой подход — использовать Dictionary . И последним шагом было бы обработать событие Hyperlink.Click .

Это в основном реализация идеи H.B. из его комментария.

Другое решение, которое приходит мне в голову. Если вы хотите переместить больше кода в XAML, вы можете создать команду, которая будет перемещаться по элементу, переданному как параметр. Вот командный класс:

И вы можете использовать его в своем примере следующим образом:

Это позволит вам иметь все (кроме нового класса ICommand ) в XAML

0 H.B. [2011-03-30 16:13:00]

TargetName работает только для окон и фреймов в соответствии с MSDN, поэтому это невозможно.

Гиперссылка против якоря

Когда использовать HyperLink и когда использовать Anchor?

При использовании HyperLink для обработки кликов? com.google.gwt.user.client.ui.Hyperlink.addClickHandler(ClickHandler) устарел com.google.gwt.user.client.ui.Hyperlink.addClickListener(ClickListener) также устарел.

Doc предлагает использовать Anchor#addClickHandler , но как использовать Якорь #addClickHandler при использовании HyperLink

Означает ли это, что если мне нужно обрабатывать клики, я всегда должен использовать Anchor и никогда не использовать HyperLink ?

Отличный вопрос, потому что он настолько прост и все же открывает то, что может быть совершенно новой областью для многих программистов GWT. Я поднял вопрос только потому, что это может стать отличным руководством для людей, изучающих, что может сделать GWT.

Ссылки также используются для внутренней навигации. Скажем, у меня есть приложение GWT, которое требует от пользователя входа в систему, поэтому на моей первой панели я установил кнопку входа в систему. Когда пользователь нажмет на него, я бы отобразил новую панель с виджетами для сбора информации о пользователе, кода для ее проверки, а затем, если она была успешно проверена, восстановите эту первую панель, на которой был включен пользователь.


Кнопки приятные, но это браузер, и я хочу, чтобы мой пользовательский интерфейс больше напоминал веб-страницу, а не настольное приложение, поэтому я хочу использовать ссылки вместо кнопок. Гиперссылка делает это. Документация для гиперссылки описывает это хорошо:

Виджет, который служит «внутренней» гиперссылкой. То есть, это ссылка в другое состояние запущенного приложения. При щелчке создайте новый кадр истории, используя History.newItem(java.lang.String), но без перезагрузки страницы.

Будучи подлинной гиперссылкой, пользователь также может «щелкните правой кнопкой мыши, откройте ссылку в новом окне», что приведет к приложение, которое будет загружено в новом окне в состоянии, указанном гиперссылка.

Это второе предложение должно помочь прояснить это. Гиперссылка не изменяет страницу в смысле URL (как это делает привязка), хотя URL-адрес будет отображать состояние программы, отображая «токен», связанный с гиперссылкой, добавленной к базовому URL-адресу после косой черты. Вы определяете токен. Это было бы что-то описательное, как «login» или «help» или «about». Но это не новая страница. Например, нет дополнительного файла HTML, который вы должны были создать для отображения страницы справки. Это состояние текущего приложения GWT меняется. Даже если вы «открываете в новом окне», вы просто запускаете одно и то же приложение в определенном состоянии.

Похоже на ссылку, но это действительно виджет, который управляет кадром истории, что, в свою очередь, позволяет вам перемещать состояние вашего приложения GWT. Вы не пишете обработчик клика для виджета гиперссылки, а обработчик изменения стоимости для стека истории. Когда вы увидите, что в стек истории был помещен токен «help», ваш обработчик выполнит код GWT для присоединения к RootPanel FlowPanel со встроенным текстом HTML с помощью справки. Это воспринимается пользователем как «новая страница», чего он ожидает, когда он нажимает на гиперссылку. URL будет something.html/help. Теперь сделайте вид, что он вернется к этому URL-адресу через кнопку «Назад», а не вашу гиперссылку. Нет проблем. Вы не заботитесь об гиперссылке. Вам все равно, что, как-то, стек истории меняется. Ваш обработчик изменения значения снова загорается и делает то же самое, что и раньше, чтобы отобразить панель справки. Пользователь по-прежнему пользуется опытом навигации по веб-страницам, хотя вы и я знаем, что есть только одна веб-страница, и что вы прикрепляете и отделяете панели от RootPanel (или любую другую схему, которую вы используете для отображения ваших панелей GWT).

И это приводит к теме бонуса.

Этот бонус немного сложнее, но по иронии судьбы он может помочь лучше понять гиперссылки. Я говорю более сложным, но на самом деле, это помогает укрепить это представление о том, что приложение GWT составлено из серии состояний и что веб-страница на экране — это просто восприятие пользователями этих изменений состояния. И это Действия и места, Действия и места абстрагируют эту манипуляцию с историей, обрабатывая ее в фоновом режиме после того, как вы настроили сопоставитель с классом GWT-класса, предназначенным для этой цели, что позволяет вам разбивать ваше приложение на ряд действий, а пользователь взаимодействует через эти действия, он помещается в разные места, и у каждого места есть вид. Кроме того, пользователь может перемещаться с места на место с помощью элементов управления браузера, таких как адресная строка, закладки, история и кнопки «назад/вперед», предоставляя пользователю реальный веб-опыт. Если вы действительно хотите понять концептуальную разницу между гиперссылками и якорями, вы должны попытаться изучить эту тему GWT. Это действительно может заставить вас изменить то, как вы видите ваши приложения, и к лучшему.

HTML :: Гиперссылки

Определение гиперссылки в HTML

Для создания гиперссылок в HTML используется элемент ‘a’ , который формируется парным тегом (от англ. anchor – якорь). Все, что находится внутри элемента ‘a’ является гиперссылкой.

(от англ. hyperlink – гиперссылка) – это часть гипертекстового документа, которая ссылается на другие элементы в самом документе (текст, изображение и т.д.) или другие объекты вне данного документа (другой документ, видеофайл и т.д.).

Атрибут href гиперссылки

Чтобы указать адрес объекта, на который будет совершен переход по ссылке, используется атрибут href . В качестве значения он принимает абсолютный или относительный адрес документа. Примером абсолютного адреса может служить http://www.yandex.ru . Абсолютные адреса действительны в любом месте, независимо от сайта, на котором расположена ссылка. А вот относительные адреса формируются относительно текущей папки документа, в котором прописана данная ссылка, или корня сайта. Примеры относительных адресов мы рассмотрим в конце пункта.

Напомним, что в случае использования сборки Xampp для размещения создаваемых в ходе изучения веб-страниц на локальном сервере, их нужно помещать в папку /xampp/htdocs . А еще лучше создать в htdocs отдельную рабочую папку, например, test , и уже в ней сохранять тестируемые страницы. Тогда абсолютный адрес, например, для страницы page_1.html будет иметь вид http://localhost/test/page_1.html . Указывать нужно именно http://localhost/. , а не фактическое расположение файла на компьютере, иначе могут возникнуть проблемы с отображением страницы.

Атрибут target гиперссылки

По умолчанию, при переходе по ссылке браузер открывает документ в текущем окне или фрейме. Чтобы изменить такое поведение браузера, используется атрибут target , который в качестве значения принимает одно из зарезервированных значений «_self | _blank | _parent | _top» или имя целевого окна или фрейма, которое устанавливается их атрибутом name . Если указать несуществующее имя окна или фрейма, то браузер откроет документ в новом окне. Значение «_self» установлено по умолчанию. Если использовать значение «_blank» , то браузер откроет документ в новом окне или фрейме; если «_parent» – в родительском фрейме, а в случае отсутствия такового, в текущем окне; если «_top» – в главном (текущем) окне, в котором находится данный фрейм, содержащий ссылку, а в случае отсутствия фреймов в окне, данное значение сработает, как «_self» .

Атрибут download гиперссылки

В HTML 5 был введен еще один полезный атрибут download, который не принимает значений, а служит индикатором того, что браузер не совершит переход по ссылке, а предложит закачать файл, указанный в атрибуте href в качестве значения.

Также в элементе ‘a’ могут использоваться атрибуты rel , hreflang и type . Мы их использовать скорее всего не будем. Однако, если информация о них все таки понадобится, то можно обратиться к нашему справочнику здесь.

Рассмотрим применение гиперссылок на примере №1.

Пример №1. Использование гиперссылок


Использование гиперссылок для создания якорей на странице

Элемент ‘a’ может использоваться и в качестве гиперссылки для перехода внутри страницы. Для этого в нужном месте документа необходимо создать (от англ. anchor), т.е. закладку, и указать ее в качестве цели в гиперссылке. Создается якорь при помощи пустого элемента ‘a’ , в открывающем теге которого указывается атрибут >href самой гиперссылки в качестве значения указывается символ решетки ‘#’ и значение атрибута id якоря. Чтобы стало понятнее, рассмотрим все на примере №2.

Пример №2. Использование внутренних гиперссылок

Обратите внимание на наличие якоря в абсолютном адресе, указанном в качестве значения атрибута href во втором абзаце примера. При использовании такой гиперссылки, браузер сначала перейдет по указанному адресу, а затем прокрутит страницу до места расположения указанного якоря. Если якоря на странице не окажется, страница будет показана с самого начала.

Относительные гиперссылки и построение относительной адресации

В заключение пункта рассмотрим принцип построения относительных адресов. Пусть наша гиперссылка находится в документе, расположенном на локальном сервере по адресу http://localhost/site/ doc_1/ doc_2/ . /doc_n/ web_page.html , где doc_n – папка n -го уровня вложенности. В этом случае папка doc_n , в которой находится наш документ с гиперссылкой, автоматически принимается за основу, относительно которой и строится вся адресация. Итак:

  • Если нужно, чтобы ссылка вела на целевой документ new_page.html , расположенный в той же папке doc_n , что и наш исходный документ с гиперссылкой, то в качестве значения атрибута href ссылки нужно просто задать имя целевого документа: href=»new_page.html» .
  • Для перехода к целевому документу new_page.html , расположенному в папке http://localhost/site/ doc_1/ doc_2/ . /doc_n/ doc_n_1/ . doc_n_k/ , значение атрибута href ссылки должно включать только папки, вложенные в doc_n , и, конечно же, имя целевого документа: href=»doc_n_1/ . doc_n_k/ new_page.html» . Таким образом, мы указываем браузеру, что он должен зайти в папку doc_n_1 , расположенную в папке doc_n с исходным документом, в котором прописана гиперссылка, затем в папку doc_n_2 и так далее, пока не попадет в папку doc_n_k с находящимся там целевым документом, который он и должен открыть.
  • Чтобы попасть в папку на уровень выше исходной, используется специальная комбинация символов ‘../’ . Для перехода на n уровней вверх нужно записать комбинацию ‘../’ n раз подряд. Так в нашем случае, чтобы перейти по ссылке к целевому документу http://localhost/site/ doc_1/ doc_2/ . /doc_n-3/ new_page.html атрибут href ссылки должен иметь значение «../../../new_page.html» . Тем самым мы сообщаем браузеру, что он должен подняться в папку doc_n-1 , затем doc_n-2 и doc_n-3 , после чего открыть находящийся там целевой документ new_page.html .
  • Если же необходимо не просто подняться на несколько уровней вверх, но и зайти там в папку (или несколько вложенных папок), для получения доступа к целевому документу, то в значении атрибута href ссылки сперва нужно прописать требуемое количество уровней поднятия вверх при помощи символов ‘../’ , а затем дописать путь из полученной папки к целевому документу. Например, если целевой документ расположен в папке new_doc и адресный путь к нему имеет вид http://localhost/site/ doc_1/ doc_2/ . /doc_n-3/new_doc/ new_page.html , то атрибут href ссылки должен иметь значение «../../../new_doc/new_page.html» . Т.е. мы указываем браузеру, что он должен подняться на три уровня вверх относительно исходной папки doc_n , в которой находится документ с гиперссылкой, а затем зайти в папку new_doc и открыть целевой документ new_page.html
Илон Маск рекомендует:  Comp - Тип Delphi

В качестве примера вы можете скачать учебный минисайт, построенный полностью на основе относительной адресации. После просмотра поэкспериментируйте, изменяя и создавая новые ссылки, папки и страницы.

Относительные гиперссылки очень удобны при разработке браузерных офф-лайн приложений, например, справочных руководств. Однако следует помнить, что при переносе документа из текущей папки в другую, все относительные ссылки в нем перестанут работать. Поэтому их придется переписывать. Если же относительные ссылки указывают на файлы, которые также находятся внутри текущей папки либо во вложенных папках, то после переноса данной папки в другое место все ссылки в документе останутся рабочими.

Если необходимо начать отсчет относительного пути от корня сайта, в начале пути следует прописать слэш ‘/’ . Например, ссылка ‘ Домой ‘ указывает на документ, который находится в корневой папке сайта (а не в текущей!). Следует иметь в виду, что отсчет от корня сайта работает только под управлением реального веб-сервера. На локальном сервере, например, Xampp , отсчет нужно начинать с имени корневой папки.

Редактирование гиперссылок и якорей в PDF с помощью ITextSharp

Я использую библиотеку iTextSharp и C # .Net для разделения моего файла PDF.

Рассмотрим файл PDF с именем sample.pdf, содержащий 72 страницы. Этот файл sample.pdf содержит страницы с гиперссылками, которые ведут на другую страницу. Например: на странице 4 есть три гиперссылки, которые при нажатии переходят к соответствующей 24-й, 27-й, 28-й странице. Как и на 4-й странице, есть почти 12 страниц, на которых есть эти гиперссылки.

Теперь, используя библиотеку iTextSharp, я разбил эти PDF-страницы на 72 отдельных файла и сохранил их с именем 1.pdf, 2.pdf . 72.pdf. Поэтому в 4.pdf при нажатии на эту гиперссылку мне нужно, чтобы PDF перешел на 24.pdf, 27.pdf, 28.pdf.

Пожалуйста, помогите мне здесь. Как я могу редактировать и устанавливать гиперссылки в 4.pdf, чтобы он перешел к соответствующим файлам PDF.

3 ответа

То, что вы хотите, вполне возможно. То, что вы хотите, потребует от вас работы с низкоуровневыми объектами PDF (PdfDictionary, PdfArray и т. Д.).

И когда кому-то нужно работать с этими объектами, я всегда отсылаю их к Справочнику в формате PDF . В вашем случае вы захотите изучить главу 7 (в частности, раздел 3) и главу 12, разделы 3 (навигация на уровне документа) и 5 (аннотации).

Предполагая, что вы прочитали это, вот что вам нужно сделать:

  1. Просмотрите массив аннотаций на каждой странице (в оригинальном документе, прежде чем разбивать его).
    1. Найти все ссылки аннотации и их направления.
    2. Создайте новое место назначения для этой ссылки, соответствующей новому файлу.
    3. запишите это новое назначение в аннотацию ссылки.


  2. Запишите эту страницу в новый PDF-файл с помощью PdfCopy (он будет копировать аннотации, а также содержимое страницы).

Шаг 1.1 не простой. Существует несколько различных форматов аннотаций «local goto». Вам необходимо определить, на какую страницу указывает данная ссылка. Некоторые ссылки могут содержать PDF-эквивалент «следующей страницы» или «предыдущей страницы», тогда как другие будут содержать ссылку на определенную страницу. Это будет «косвенная ссылка на объект», а не номер страницы.

Чтобы определить номер страницы из ссылки на страницу, вам нужно . ой. Хорошо. Наиболее эффективным способом было бы вызвать PdfReader.GetPageRef (int pageNum) для каждой страницы в исходном документе и кэшировать ее на карте (reference-> pageNum).

Затем вы можете создать ссылки «удаленного перехода», создав PdfAction удаленного перехода и записав его в запись «A» (действие) аннотации ссылки, удалив все, что было там раньше (возможно, «Dest»).

Я не очень хорошо говорю на C #, поэтому оставлю фактическую реализацию вам.

Я использую библиотеку iTextSharp и С#.Net для разделения моего файла PDF.

Рассмотрим файл PDF с именем sample.pdf, содержащий 72 страницы. Этот sample.pdf содержит страницы с гиперссылкой, которые переходят на другую страницу. Например: на странице 4 есть три гиперссылки, которые при нажатии перемещаются на соответствующую 24, 27, 28 страницу. Так же, как и на 4-й странице, имеется около 12 страниц с этими гиперссылками.

Теперь, используя библиотеку iTextSharp, я разделил эти страницы PDF на 72 отдельных файла и сохранил их с именем: 1.pdf, 2.pdf. 72.pdf. Поэтому в 4.pdf при нажатии на эти гиперссылки мне нужно сделать PDF файл для перехода к 24.pdf, 27.pdf, 28.pdf.

Пожалуйста, помогите мне здесь. Как редактировать и устанавливать гиперссылки в файле 4.pdf, чтобы он переместился в соответствующие файлы PDF.

    3 3
  • 29 мар 2020 2020-03-29 15:39:23
  • ashok kumar

3 ответа

Эта функция ниже использует iTextSharp для:

  • Откройте PDF
  • Страница через PDF
  • Осмотрите аннотации на каждой странице для тех, которые являются ANCHORS.


Шаг №4 заключается в том, чтобы вставить любую логику, которую вы хотите здесь. обновите ссылки, запишите их и т.д.

  • 29 мар 2020 2020-03-29 15:39:25
  • one.beat.consumer

Хорошо, основываясь на том, что у @Mark Storer есть код стартера. Первый метод создает образец PDF с 10 страницами и некоторые ссылки на первой странице, которые перескакивают в разные части PDF, поэтому у нас есть с чем работать. Второй метод открывает PDF файл, созданный в первом методе, и просматривает каждую аннотацию, пытаясь выяснить, к какой странице привязывается ссылка и выводит ее в окно TRACE. Код находится в VB, но его необходимо легко преобразовать в С#, если это необходимо. Его цель iTextSharp 5.1.1.0.

Если я получу шанс, я могу попытаться принять это дальше и фактически расколоть и пересоединить вещи, но у меня нет времени прямо сейчас.

  • 29 мар 2020 2020-03-29 15:39:24
  • Chris Haas

То, что вы хотите, вполне возможно. Вы хотите, чтобы вы работали с низкоуровневыми PDF-объектами (PdfDictionary, PdfArray и т.д.).

И всякий раз, когда кто-то должен работать с этими объектами, я всегда ссылаюсь на Справочник PDF. В вашем случае вы захотите изучить главу 7 (особенно раздел 3) и главу 12, разделы 3 (навигационная система уровня документа) и 5 ​​(аннотации).

Предполагая, что вы прочли это, вот что вам нужно сделать:

  • Пройдите через аннотационный массив каждой страницы (в исходном документе, прежде чем разбить его).
    • Найдите все аннотации ссылок и их адресатов.
    • Создайте новый пункт назначения для этой ссылки, соответствующий новому файлу.
    • напишите это новое назначение в аннотации ссылки.
  • Запишите эту страницу в новый PDF файл, используя PdfCopy (он скопирует аннотации, а также содержимое страницы).

Шаг 1.1 не прост. Существует несколько различных форматов аннотаций «local goto». Вам нужно определить, на какую страницу ссылается данная ссылка. В некоторых ссылках можно указать эквивалент в формате PDF «следующая страница» или «предыдущая страница», в то время как другие будут содержать ссылку на определенную страницу. Это будет «косвенная ссылка на объект», а не номер страницы.


Чтобы определить номер страницы из ссылки на страницу, вам нужно. ouch. Хорошо. Наиболее эффективным способом было бы вызвать PdfReader.GetPageRef(int pageNum) для каждой страницы исходного документа и кэшировать его на карте (reference- > pageNum).

Затем вы можете создать «удаленные удаленные» ссылки, создав удаленный файл PODAction и записав это в запись аннотации «A» (действие) ссылки, удалив все, что было там раньше (возможно, «Dest» ).

Я не очень хорошо говорю на С#, поэтому я оставлю фактическую реализацию вам.

EPiServer, как ссылку на якорь / хэштегом

Мне нужен способ, чтобы ссылаться на раздел в моей странице, (с помощью анкерного / хэштегом) .. свойство, которое предполагается обработать эту ссылку имеет тип LinkItemCollection, но тем не менее .. когда я добавить новую ссылку в коллекцию Я получаю запрос с новым «диалогового окна», где можно выбрать тип связи я хотел бы создать .. например, у меня есть выбор страницы, СМИ, внешняя ссылка и электронной почты ..

Моя первая мысль была использовать опцию «Внешняя ссылка», а затем просто введите / # услуги, но EPiServer швы на «правильный» меня и изменить это на «HTTP: slashslashslash # услуги» (слэш = /) . так. . есть в любом случае на самом деле использовать свойство LinkItemCollection и быть в состоянии создать внутренние ссылки / якоря и ссылки / хэштегом-ссылки?

Я сделал что-то подобное, когда мне нужно, чтобы создать сайт EPiServer параллакса. Вместо того чтобы использовать набор элементов ссылки я использовал область содержимого, а затем создал раздел блок.

На странице визуализации я петельный через все блоки в области содержимого и использовать дружественные URL и вручную делают ссылку в меню. Будет ли что работать для вас?

и это для зрения

У меня есть весь проект на моем GitHub , если вы хотите , чтобы загрузить это Parallax EPiServer Пример сайта

Marija Jemuovic имеет аа метко назвал пост в блоге , который охватывает это: Обходной путь для расширения LinkItemCollection для поддержки якорей .

К сожалению, это усложнится:

Вместо того, чтобы пытаться переопределить компоненты EPiServer, я создал блок, который содержит свойство Url и якорь на странице собственности, которые являются взаимозависимыми.

В основном, она создает блок, который имеет свойство Anchor, а затем использует этот формат ссылку внутри контроллера:

Вы должны быть в состоянии приспособить это, если вам необходимо установить якорь внутри самой страницы.

Гиперссылок против Anchor

December 2020

11.5k раз

Когда использовать гиперссылкой и когда использовать якорь?

При использовании гиперссылки как обрабатывать клики? com.google.gwt.user.client.ui.Hyperlink.addClickHandler (ClickHandler) является устаревшим com.google.gwt.user.client.ui.Hyperlink.addClickListener (ClickListener) является устаревшим, а также.


Doc предлагает использовать Anchor#addClickHandler , но , как использовать Якорь #addClickHandler при использовании гиперссылкой

Означает ли это , что если мне нужно обрабатывать кнопку Я всегда использовать Anchor и никогда не использовать HyperLink ?

2 ответы

Great question, because it is so simple, and yet opens up what might be a whole new area for a lot of GWT programmers. I’ve up-voted the question just because it can be a great lead-in for people exploring what GWT can do.

Links are also used for internal navigation. Let’s say I have a GWT app that requires the user to login, so on my first panel I put a login button. When the user clicks it, I would display a new panel with widgets to collect the user’s information, code to validate it, and then if validated successfully, reconstruct that first panel the user was on.

Кнопки хороши, но это браузер, и я хочу , опыт моего пользователя , чтобы больше походить на веб — странице, а не настольное приложение, так что я хочу использовать ссылки вместо кнопок. Гиперссылок делает это. Документация гиперссылкой описывает это хорошо:

Виджет, который служит в качестве «внутренней» гиперссылке. То есть, это ссылка на другое состояние запущенного приложения. При нажатии, она будет создавать новую историю кадра, используя History.newItem (java.lang.String), но без перезагрузки страницы.

Будучи истинным гиперссылке, также возможно для пользователя «щелкните правой кнопкой мыши, открыть ссылку в новом окне», что приведет к тому, приложение будет загружено в новом окне в состоянии, указанной гиперссылке.

Это второе предложение должно помочь очистить его. Гиперссылка не изменяя страницу в смысле URL (как якорь делает), хотя URL будет отражать состояние программы, отображая «маркер» , связанный с гиперссылкой , приложенном к базовому URL после косой черты. Вы определяете маркер. Было бы что — то описательный , как «вход» или «помощь» или «о». Но это не новая страница. Там нет дополнительной HTML файла , который вы должны были построить , чтобы отобразить страницу справки, например. Это состояние текущего приложения GWT , который изменяется. Даже если вы «открыть в новом окне» вы просто запустить приложение же в определенном состоянии.

Это выглядит как ссылка, но это действительно виджет, который манипулирует историю кадр, который, в свою очередь, позволяет перемещать состояние вашего приложения GWT. Вы не написать обработчик щелчка на гиперссылке виджета, но обработчик изменения значения для стека истории. Когда вы видите, что «помощь» маркер был помещен в стек истории, обработчик будет выполнять GWT код для присоединения к RootPanel в FlowPanel с вложенным HTML текст с вашей помощью информации. Это воспринимается пользователем как «новая страница», которая является то, что он ожидает, когда он нажимает на гиперссылка. URL будет something.html / помощь. Теперь вид, что он возвращается к этому URL с помощью кнопки возврата, а не ваша гиперссылки. Нет проблем. Вы не заботитесь о гиперссылке мыши. Вы только заботиться, что, так или иначе, изменения истории стека. Обработчик изменения значения срабатывает снова, и делает то же самое, как и раньше, чтобы отобразить панель справки. Пользователь по-прежнему имеет опыт навигации по веб-страницам, даже если вы и я знаю, что есть только один веб-страницы, и вы подключаете и отсоединении панели к RootPanel (или любой другой схемы вы используете для отображения панели GWT).

И это приводит к бонусной теме.

Этот бонус является немного более сложным, но по иронии судьбы, это может помочь лучше понять гиперссылка. Я говорю более сложным, но на самом деле, это помогает укрепить это понятие , что приложение GWT состоит из ряда государств, а также о том , что веб — страница на экране это просто восприятие пользователя этих изменений состояния. И это деятельность и место, Мероприятия и Место абстрагируют эту манипуляцию истории кадра, его обработки в фоновом режиме, как только вы создали картограф с GWT предоставленного классом, предназначенным для этой цели, что позволяете разбить приложение на ряд мероприятий, а также пользователь взаимодействует в рамках этих мероприятий он сданные в разные места, и каждое место имеет вид. Кроме того, пользователь может перемещаться с места на место с помощью элементов управления браузера, как в адресной строке, закладки, история, и назад / вперед кнопок, предоставляя пользователю реальный веб-подобный опыт. Если вы действительно хотите, чтобы получить контроль над концептуальной разницы между гиперссылок и якорей, вы должны попытаться изучить эту GWT тему. Это действительно может заставить вас изменить так, как вы видите ваши приложения, и к лучшему.

Hyperlink (или InlineHyperlink ) в основном не более чем своего рода Anchor с , ClickHandler который вызывает History.newItem и preventDefault() событие (так что ссылка на самом деле не следует).
На самом деле, Hyperlink не будет делать, если он думает , что (и да, это только предположение) , вы сразу же щелкнули или среднего щелкнули (или Ctrl-клике) на ссылку ( в зависимости от браузера), чтобы открыть ссылку в новой окна или вкладки.

Если вам нужно любое другое поведение, то не следует использовать Hyperlink и использовать Anchor вместо этого. И если вы хотите добавить поведения к Hyperlink , а затем использовать Anchor и имитировать то , что Hyperlink делает. И вы можете повторно использовать , HyperlinkImpl чтобы иметь щелкните правой кнопкой мыши / обработки Ctrl-клик (см ссылки ниже).

Но на самом деле, если вам нужно что — то , что выглядит как ссылку и сделать что — то по щелчку, но не имеет «целевой URL» (т.е. она не должна быть правой кнопкой мыши / Ctrl щелчок , чтобы открыть в новом окне / вкладке или это ничего не значило бы сделать это), то не следует использовать либо ANchor OR Hyperlink , использовать Label в любой вместо этого, и сделать его похожим на ссылку (а также, возможно , вы должны использовать Button и он выглядит как кнопка , то ; Google имел обыкновение иметь ссылку Двойник кнопки -such как / кнопку «обновить» ссылку в GMail- и изменили их , чтобы выглядеть как кнопки , когда они на самом деле не ссылки).

Ссылки, якоря и тег BASE

С гиперссылками проблем верстки и кроссбраузерности практически не возникает, если не брать во внимание желание Internet Explorer делать их синими при любом удобном случае. Тут я изложу известные мне технические аспекты, связанные с гиперссылками, чтобы расширить ваш арсенал возможных решений при верстке сайта.

Вся информация о переходе указывается в атрибутах:

Таким образом создаётся связь между двумя якорями — источником и целью. Говоря образно — путь из пункта А в пункт B. Следует пояснить следующие строки спецификации, посвящённые гиперссылкам:

Каждый элемент A определяет якорь:

  1. Содержимое элемента A определяет местонахождение якоря.
  2. Атрибут name именует якорь так, что он может быть якорем назначения нескольких ссылок.
  3. Атрибут href делает этот якорь источником одной конкретной гиперссылки.


Авторы могут также создать элемент A, который не специфицирует никаких якорей, т.е. не специфицирует href, name или >Спцификация HTML 4.01 в переводе Пирамидина А..

Про скрипты я писать не буду, так как статья не об этом. А вот про атрибуты href, name и id поговорим предметно. Для наглядности приведу пример с авиа-перелётами. Из Минска можно попасть в Москву на самолёте. Но стоит учитывать, что в Москве 3 аэропорта и самолёт может прилететь в какой-то один из них.

Самолёт 100% прилетит в Москву, но 100%-ной гарантии попадания в аэропорт Домодедово нет. Всё зависит от авиа-перевозчика, купленного билета и других факторов. Вероятных маршрутов три:

  1. Аэропорт Минск » Москва » Аэропорт Шереметьево
  2. Аэропорт Минск » Москва » Аэропорт Домодедово
  3. Аэропорт Минск » Москва » Аэропорт Внуково

При помощи такой конструкции вы сможете сослаться с одной страницы на другую. Сама страница может быть большой и в её содержании могут быть различные тематические части, разделённые подзаголовками. Чтобы сделать ссылку максимально точной и не заставлять перешедшего искать нужную информацию на странице, в состав атрибута href включают также и якорь (anchor).

Можно встретить разговорный вариант: Поставь анкер . Правильнее употреблять именно определение якорь , так как обозначаются данные элементы ссылок именно значком якоря.

Московские аэропорты — это те самые якоря (анкеры). Якорей может быть любое количество. В HTML 4 якорь указывается через атрибут name тега и ставится в текст следующей конструкцией:

В HTML5 данный вариант является устаревшим и не рекомендуется для использования. Вместо атрибута name рекомендуют использовать атрибут ># и указать имя якоря:

Итак, вернёмся от перелётов к html. Атрибут href указывает путь к файлу. Указатель может быть абсолютным или относительным. Абсолютный указывает точное местонахождение объекта ссылки, а относительный — положение объекта относительно документа, содержащего ссылку на объект (якорь-источник).

Ещё один простой пример: Вася Пупкин проживает по адресу: г.Бобруйск, ул.Пушкина, д.359, кв.193. Это абсолютная ссылка на Васю Пупкина. Допустим, я проживаю в том же доме и подъезде, но этажом ниже. Я, являясь источником ссылки, могу сделать ее относительной:

Вася Пупкин живет в моём подъезде, в 193 квартире.

Если вы не знаете, где живу (нахожусь) я, вы не сможете определить местонахождение гражданина Пупкина. Поэтому относительные ссылки при некотором стечении обстоятельств могут оказаться письмом на деревню дедушке . Допустим,

Тем не менее относительные ссылки применяются при верстке сайта достаточно часто и мной в том числе. Почему? Потому что указать

намного быстрее, проще и короче чем

Пример выше будет указывать относительный путь от документа, в котором встретилась такая ссылка. Можно указывать ссылки от корня сайта, не указывая сам его адрес. Для этого нужно начинать адрес ссылки со слеша:

Не забывайте про полезный атрибут – title. C помощью него можно сделать всплывающую подсказку для гиперссылки. При наведении курсора на ссылку появляется подсказка со значением атрибута:

тег BASE

Теперь о том, как избежать некоторых стечений обстоятельств . Есть на этот случай один хороший тег контейнера — . C помощью этого тега указывается базовый url страницы (источника ссылки) и все относительные пути приплюсовываются к базовому, в результате чего всегда получаем абсолютный путь.

Однако, при этом якоря относительных ссылок работать перестанут, потому что получится следующее:


Так что тег base — это не панацея, а средство для решения конкретных задач. Так что старайтесь не использовать теги, если на то нет необходимости.

Относительная межуровневая адресация

Выше я привёл пример как с помощью слеша / указать ссылку на корень сайта:

Допустим, есть файл, расположенный по адресу: site.com/images/fon.jpg

Статья, из которой нужно на него сослаться, находится по адресу: site.com/article/my_text.html

Если просто сослаться относительно, то относительная ссылка должна иметь вид:

Корень сайта – корневая папка, в которой находятся все его файлы, включая подпапки. Папки второго уровня – это все папки, которые можно видеть, открыв корневую. И так далее. Часто при описании файловой структуры сайта употребляют термины дерево и ветви .

Деревом называют совокупность путей от корня сайта (из одной точки) до всех файлов сайта. Структура и впрямь очень похожа на дерево с той лишь разницей, что корень файловой системы обычно указывается вверху и все его ветви располагаются ниже.

Ветвь – это папка внутри корня сайта. она может иметь вложенные папки, а те в свою очередь тоже. Таким образом структура ветвится.

И если сослаться из одной корневой ветви (из файла novosti.html) в другую (на файл logo.jpg) можно только из корня сайта

то внутри ветви зачастую это можно сделать проще и короче, так как ветвь может содержать очень много подпапок

для адресации на один подкаталог выше используют такой указатель ../ , на два подкаталога ../../ и так далее.

Относительная ссылка со страницы victory_day.html на страницу new_year.html будет выглядеть так:

Таким образом ссылка поднимается из каталога may в каталог 2013 и указывает в этом каталоге на файл new_year.html

Читать далее:

Если материалы сайта оказались для вас полезными, можете поддержать дальнейшее развитие ресурса, оказав ему (и мне ) моральную и материальную поддержку.

Гиперссылка против якоря

Когда использовать HyperLink и когда использовать Anchor?

При использовании HyperLink для обработки кликов? com.google.gwt.user.client.ui.Hyperlink.addClickHandler(ClickHandler) устарел com.google.gwt.user.client.ui.Hyperlink.addClickListener(ClickListener) также устарел.

Doc предлагает использовать Anchor#addClickHandler , но как использовать Якорь #addClickHandler при использовании HyperLink

Означает ли это, что если мне нужно обрабатывать клики, я всегда должен использовать Anchor и никогда не использовать HyperLink ?


Отличный вопрос, потому что он настолько прост и все же открывает то, что может быть совершенно новой областью для многих программистов GWT. Я поднял вопрос только потому, что это может стать отличным руководством для людей, изучающих, что может сделать GWT.

Ссылки также используются для внутренней навигации. Скажем, у меня есть приложение GWT, которое требует от пользователя входа в систему, поэтому на моей первой панели я установил кнопку входа в систему. Когда пользователь нажмет на него, я бы отобразил новую панель с виджетами для сбора информации о пользователе, кода для ее проверки, а затем, если она была успешно проверена, восстановите эту первую панель, на которой был включен пользователь.

Виджет, который служит «внутренней» гиперссылкой. То есть, это ссылка в другое состояние запущенного приложения. При щелчке создайте новый кадр истории, используя History.newItem(java.lang.String), но без перезагрузки страницы.

Будучи подлинной гиперссылкой, пользователь также может «щелкните правой кнопкой мыши, откройте ссылку в новом окне», что приведет к приложение, которое будет загружено в новом окне в состоянии, указанном гиперссылка.

Это второе предложение должно помочь прояснить это. Гиперссылка не изменяет страницу в смысле URL (как это делает привязка), хотя URL-адрес будет отображать состояние программы, отображая «токен», связанный с гиперссылкой, добавленной к базовому URL-адресу после косой черты. Вы определяете токен. Это было бы что-то описательное, как «login» или «help» или «about». Но это не новая страница. Например, нет дополнительного файла HTML, который вы должны были создать для отображения страницы справки. Это состояние текущего приложения GWT меняется. Даже если вы «открываете в новом окне», вы просто запускаете одно и то же приложение в определенном состоянии.

Похоже на ссылку, но это действительно виджет, который управляет кадром истории, что, в свою очередь, позволяет вам перемещать состояние вашего приложения GWT. Вы не пишете обработчик клика для виджета гиперссылки, а обработчик изменения стоимости для стека истории. Когда вы увидите, что в стек истории был помещен токен «help», ваш обработчик выполнит код GWT для присоединения к RootPanel FlowPanel со встроенным текстом HTML с помощью справки. Это воспринимается пользователем как «новая страница», чего он ожидает, когда он нажимает на гиперссылку. URL будет something.html/help. Теперь сделайте вид, что он вернется к этому URL-адресу через кнопку «Назад», а не вашу гиперссылку. Нет проблем. Вы не заботитесь об гиперссылке. Вам все равно, что, как-то, стек истории меняется. Ваш обработчик изменения значения снова загорается и делает то же самое, что и раньше, чтобы отобразить панель справки. Пользователь по-прежнему пользуется опытом навигации по веб-страницам, хотя вы и я знаем, что есть только одна веб-страница, и что вы прикрепляете и отделяете панели от RootPanel (или любую другую схему, которую вы используете для отображения ваших панелей GWT).

И это приводит к теме бонуса.

Этот бонус немного сложнее, но по иронии судьбы он может помочь лучше понять гиперссылки. Я говорю более сложным, но на самом деле, это помогает укрепить это представление о том, что приложение GWT составлено из серии состояний и что веб-страница на экране — это просто восприятие пользователями этих изменений состояния. И это Действия и места, Действия и места абстрагируют эту манипуляцию с историей, обрабатывая ее в фоновом режиме после того, как вы настроили сопоставитель с классом GWT-класса, предназначенным для этой цели, что позволяет вам разбивать ваше приложение на ряд действий, а пользователь взаимодействует через эти действия, он помещается в разные места, и у каждого места есть вид. Кроме того, пользователь может перемещаться с места на место с помощью элементов управления браузера, таких как адресная строка, закладки, история и кнопки «назад/вперед», предоставляя пользователю реальный веб-опыт. Если вы действительно хотите понять концептуальную разницу между гиперссылками и якорями, вы должны попытаться изучить эту тему GWT. Это действительно может заставить вас изменить то, как вы видите ваши приложения, и к лучшему.

Гиперссылки в HTML

Главной отличительной особенностью HTML-документов является создание специальных активных ссылок на другие документы, которые именуются гиперссылками.

При наведении мыши на них курсор принимает форму руки, а при клике в окне браузера открывается другая веб-страница или определённый документ. Гиперссылки могут представлять собой как текст, так и изображение.

Как сделать гиперссылку в HTML? Гиперссылка задаётся при помощи парного тега (от английского слова Anchor — якорь). Параметр href тега содержит адрес документа.

В HTML теги гиперссылки представлены в виде и , а ссылкой считается вся информация, которую и содержат:

Перед тем, как создать гиперссылку в HTML, следует знать, что её адрес может быть относительным и абсолютным. Относительный указывает расположение документа относительно текущей страницы.

Сработает он в том случае, если конечный документ располагается в той же директории, что и текущий. Также, вы можете указать путь к файлу относительно корневой директории веб-сайта с помощью символа « / ».

Абсолютный адрес представляет собой ссылку в полном виде на документ, расположенный в сети интернет.

Создание гиперссылок в HTML — процесс несложный. По умолчанию они подчёркиваются и выделяются синим цветом, а посещённые — фиолетовым.

Изменить цвет гиперссылки в HTML можно в параметрах тега :

  • link – цвет ссылок веб-страницы;
  • vlink – цвет посещённых гиперссылок веб-страницы;
  • alink – цвет активных ссылок веб-страницы.

Указанные атрибуты определяют цвета ссылок всего HTML-документа. Если вставить такой код в тег , каждый раз задавать цвет шрифту не придётся.

Перед тем, как делать гиперссылки в HTML, имейте в виду, что их цвета должны гармонично вписываться в общий дизайн и оформление вашего веб-сайта и в то же время важно сделать их заметными для пользователя.

Основные атрибуты гиперссылок

В рамках HTML гиперссылки могут иметь следующие параметры:

1. title – позволяет создать текст подсказки, которая всплывает при наведении курсора мыши на гиперссылку.

2. target – указывает браузеру в каком окне следует открыть ссылку.

Он может принимать следующие значения:

  • _blank – ссылку необходимо открыть в новой вкладке;
  • _self – гиперссылка в HTML должна быть открыта в текущей вкладке. Значение по умолчанию;
  • _parent – браузер должен загрузить ссылку в родительском окне;
  • _top – гиперссылка загружается по всему пространству окна браузера (разбиение на фреймы в данном случае исчезает).

Таким образом, ответ на часто задаваемый начинающими веб-мастерами вопрос « как вставить гиперссылку в HTML » получен.

Желаем успехов в изучении веб-программирования!

Илон Маск рекомендует:  Что такое код cyrus_authenticate
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL