Как указать на конкретный HTML-якорь в Shiny - PullRequest
Новая
       12

Как указать на конкретный HTML-якорь в Shiny

0 голосов
/ 01 декабря 2018

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

library(shiny)

ui <- fluidPage(
  htmlOutput("formattedText")
)

server <- function(input, output) {

  output$formattedText <- renderText({
    "<hr><br>Some text bla bla <br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br><a id='anchorid'></a>Point to this anchor<br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>"
  })

}

shinyApp(ui, server)

Этот код отображает верхнюю часть HTML-отчета.Как отобразить отчет HTML на привязке: id = anchorid?

Ответы [ 3 ]

0 голосов
/ 05 декабря 2018

Чтобы проиллюстрировать ответ @ elbrant, я собрал его в ShinyApp со ссылками на 3 якоря и обратно наверх. 

library(shiny)

ui <- fluidPage(
  htmlOutput("links"),
  htmlOutput("formattedText")
)

server <- function(input, output) {
  output$links <- renderText({
    "<hr><br><span id='top' style='color: red;'>
      <a href='#anchorid0'>Go to anchor0</a><br>
      <a href='#anchorid1'>Go to anchor1</a><br>
      <a href='#anchorid2'>Go to anchor2</a><br>
    </span><br>
    "
  })

  output$formattedText <- renderText({
    "<hr><br><span id='anchorid0' style='color: red;'>Anchor0</span><br>
    <a href='#top'>Go to Top</a><br>
    <hr><br>Some text bla bla <br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>

    <hr><br><span id='anchorid1' style='color: red;'>Anchor1</span><br>
    <a href='#top'>Go to Top</a><br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>

    <hr><br><span id='anchorid2' style='color: red;'>Anchor2</span><br>
    <a href='#top'>Go to Top</a><br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>
    <hr><br>Some text bla bla<br>Some text bla bla <br>"
  })
}

shinyApp(ui, server)
0 голосов
/ 11 декабря 2018

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

    Лично я всегда создаю пустой тег, содержащий пробел ().Это позволяет мне позиционировать его независимо от окружающего контента.Обеспечение содержания и макета остаются отдельными и незатронутыми, если вам нужно изменить расположение места привязки.Пример:

<div id="anchor-id">&nbsp;</div>

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

<a href="#anchor-id">go to this place in the page</a>

примечание: свойство href должно содержать '#'.

Пожалуйста, смотрите мой пример кода какЯ попытался отразить предоставленный вами пример кода.

0 голосов
/ 04 декабря 2018

Вам необходимо разместить соответствующую ссылку в своем HTML-коде.

В настоящее время ваш вывод ShinyApp производит: 

<hr><br><a id='anchorid'></a>Point to this anchor<br>

Это не сработает, потому что вы поместили ссылку в ту точку, где вы хотите, чтобы ссылка брала посетителей вашего сайта.Итак, измените эту строку на: 

<hr><br><span id="anchorid">Point to this anchor</span><br>

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

<a href="#anchorid">Go to this anchor</a>

Если ссылка находится на другой странице, используйте: 

<a href="thispage.html#anchorid">Go to this anchor</a>

Спецификации W3C вдаваться в подробности.

...