Разрешить пользователю выбирать одну из 5 различных версий Библии для просмотра ссылок. Каков наилучший способ сделать это? Скрытие классов CSS? AJAX?

Question

Я буду ссылаться на стихи из Библии на веб-сайте, который я создаю.Когда пользователь щелкает стих из Библии, он раскрывается, чтобы показать стих.

Поэтому Genesis 1:1 при нажатии превращается в Genesis 1:1 In the beginning God created the heavens and the earth etc.

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

Какой лучший способ сделать это?Я думал о том, чтобы иметь 5 разных SPAN для каждой ссылки, но я мог сделать до 10 или более ссылок на странице, это было бы 40 дополнительных скрытых промежутков ... Будет ли Ajax лучше?Какой метод вы бы предложили для чего-то подобного?

Answer 1

Вы можете сохранить стихи в XML-файле и использовать Ajax для возврата конкретного стиха на основе заголовка.Ваш код может выглядеть примерно так ...

HTML ...

<ul>
    <li class="verse"><a href="#">Deuteronomy 31:6</a></li>
    <li class="verse"><a href="#">Joshua 1:9</a></li>
</ul>

jQuery ...

        $(".verse a").click(function (event) {
            event.preventDefault();
            $link = $(this).parent();
            $title = $(this).text();
            $.ajax({
                type: "GET",
                url: "verses.xml",
                dataType: "xml",
                success: function (xml) {
                    $(xml).find('verse').each(function () {
                        var title = $(this).find('title').text();
                        // match titles
                        if ($title == title) {
                            var text = $(this).find('text').text();
                            $link.empty().text(title + ': ' + text);
                        }
                    });
                }
            });
        }); // end

XML-файл ...

<?xml version="1.0" encoding="utf-8"?>
<verses>
  <verse>
    <title>Deuteronomy 31:6</title>
    <text>Be strong and courageous. Do not be afraid or terrified because of them, for the LORD your God goes with you; he will never leave you nor forsake you.</text>
  </verse>
  <verse>
    <title>Joshua 1:9</title>
    <text>The LORD gave this command to Joshua son of Nun: "Be strong and courageous, for you will bring the Israelites into the land I promised them on oath, and I myself will be with you.</text>
  </verse>
</verses>

Answer 2

Я бы использовал подход типа JSONP. Создайте обработчик запросов, который пишет JavaScript, содержащий стихи, необходимые для данной версии. Если переменная была записана в глобальную область видимости, вам даже не понадобится обратный вызов & ndash; скрипт должен быть загружен к тому времени, когда пользователь щелкнет, чтобы развернуть стих.

Ваш обработчик напишет что-то вроде:

verses = {
    Genesis: {
        1: { 
            1: "In the beginning God created ...",
            5: "And God called the light Day ..."
        },
        6: { 19: "And of every living thing of all flesh, two of every sort ..." }
    },
    John: {
        1: { 1: "In the beginning was the Word ..." }
    }
};

Затем вы загружаете стихи, вставляя скрипт после выбора версии.

function loadBibleVerses(references, version)
{
    var script = document.body.appendChild(document.createElement("script"));
    script.src = "/bibleVerses.ashx?version=" + version + "&references=" + references;
}
loadBibleVerses("Genesis:1:1,Genesis:1:5,Genesis:6:19,John:1:1", "KJV");

Answer 3

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

Лично длина любого стиха в Библии недостаточно велика, чтобы беспокоиться о дополнительном размере, добавляемом к ответу, поэтому я бы использовал какой-нибудь простой скрипт, чтобы скрыть и показать контент с помощью CSS, и просто всегда отправлять всю версию клиенту.

Answer 4

Из-за размера Библии, я не знаю, хочу ли я загружать весь текст сразу, а затем скрывать их с помощью CSS / jQuery. Я бы, наверное, использовал какой-нибудь AJAX. Например:

index.php:

<h2><a href="genesis.php" class="loadlink">Genesis 1:1</a></h2>
<p class="genesis"></div>

loader.js:

$(".loadlink").click(function(){
   var href = $(this).attr("href");
   $("p.genesis").load(href);
   return false;
});

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

Конечно, у AJAX есть много минусов, но если у вас огромное количество текста и, возможно, изображений на странице - я считаю, что нет необходимости загружать все сразу.

Answer 5

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