Как обернуть урок вокруг первой половины заголовка? - PullRequest
Новая
       7

Как обернуть урок вокруг первой половины заголовка?

5 голосов
/ 01 марта 2011

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

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

Ответы [ 4 ]

4 голосов
/ 01 марта 2011

Это интересная проблема. Я бы подошел с удобным методом javascript splice . Splice может использоваться для вставки и удаления элементов массива. Я бы порекомендовал открыть инспектора и опробовать некоторые примеры, которые я написал ниже.

Сначала мы будем использовать jQuery для выбора заголовка, а затем манипулировать строкой содержимого html. Я предполагаю, что определенный заголовок, которым вы хотите манипулировать, будет иметь класс, и я заменил «динамический»: 

var header = $("h1.dynamic").text();
    => "Header with some other stuff"
var header_as_array = header.split(" ")
    => ["Header", "with", "some", "other", "stuff"]
var first_half = header_as_array.splice(0, header_as_array.length/2)

Имейте в виду, что splice изменяет исходный массив, поэтому на этом этапе: 

first_half = ["Header", "with"]
header_as_array = ["some", "other", "stuff"]

Теперь вы можете объединить их вместе и обернуть их интервалами примерно так: 

var first = '<span class="first_half">'+first_half.join(" ")+'</span>';
var second = '<span class="second_half">'+header_as_array.join(" ")+'</span>';

var finished =  first+" "+second;

Наконец, мы поместим нашу законченную строку обратно в заголовок с помощью jQuery: 

$("h1.dynamic").html(finished);

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

var splice_location = Math.ceil(test_as_array.length/2);
var first_half = header_as_array.splice(0, splice_location);

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

3 голосов
/ 01 марта 2011

Хороший @lashleigh.Вы можете взглянуть на рабочий пример здесь:

http://jsfiddle.net/johnhunter/KRJdm/

@ Тони, я реализовал то, что вы после, как плагин jquery.Вы вызываете его в заголовке, который вы хотите отформатировать: 

$(function() {
    $('h1').splitWords();
});

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

До: 

<h1>This is a long headline</h1>

После: 

<h1>
    <span class="wrap-1">This is </span>
    <span class="wrap-2">a long headline </span>
</h1>

ОБНОВЛЕНО:

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

$('h1.a').splitWords();   // Split these words equally
$('h1.b').splitWords(1);  // Split these after the first word
$('h1.c').splitWords(-2); // Split these after the second last word

http://jsfiddle.net/johnhunter/KRJdm/

0 голосов
/ 01 марта 2011

Ответ Лэшли великолепен, однако я бы оспорил предположение, что jQuery - лучший выбор технологии для достижения этого эффекта.Я был бы склонен предложить то же самое на стороне сервера.Фразировка разметки с использованием PHP, Python или любого другого языка, который вы используете, а затем кэширование вывода с помощью вставленного класса.Экономит на весе страницы и означает, что браузер пользователя не должен вычислять все, когда каждая страница загружена.Значительное преимущество для легких клиентов, таких как мобильные устройства.

Вот пример на PHP. 

<?php 
        $headline = "This is a headline  of epic proportions";
        $split = explode(' ', $headline);
        $a = array_slice($split, 0, (count($split)/2));
        $b = array_slice($split, (count($split)/2));
        $headline = '<span class="whatever">'. join(' ', $a) . '</span>' . join(' ', $b);
        print $headline;
?>
0 голосов
/ 01 марта 2011

Попробуйте следующее 

<html>
<head>
    <title>Test</title>
    <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var headlineText = $('h1.mainHeader').text();
            var headlineWords = headlineText.split(' ');
            var headlineLength = headlineWords.length;
            var headlineMidPoint = (headlineLength / 2) + 1;

            var headlineFirstHalfText = headlineWords.slice(0, headlineMidPoint).join(' ') + ' ';
            var headlineSecondHalfText = headlineWords.slice(headlineMidPoint).join(' ');

            var d = document;
            var headlineFirstHalf = $(d.createElement('span')).addClass('headlineHead').text(headlineFirstHalfText);
            var headlineSecondHalf = $(d.createElement('span')).addClass('headlineTail').text(headlineSecondHalfText);
            var headline = $(d.createElement('h1')).addClass('mainHeader').append(headlineFirstHalf).append(headlineSecondHalf);

            $('h1.mainheader').replaceWith(headline);
        });
    </script>
    <style type="text/css">
        h1 { font-size:18px;}
        span.headlineTail {font-size:1.2em;}
    </style>
</head>
<body>
<h1 class="mainHeader">This is a dynamic headline</h1>
<p>Lorem ipsum dolor sit amet, consectetur...</p>
</body>
</html>
...