JQuery ile daha dinamik ve harika başlıklar oluşturabilmem için bir başlığın ilk ya da ikinci yarısında bir sınıfa sarılmaya çalışıyorum. Teoride teoride bütün boşlukları bulmak ve ikiye bölmek istiyorum. Başlık düzensiz sayıda kelime içeriyorsa, betik bunu algılamalı ve ayrıca sınıfı en yakın sözcüğe eklemelidir. http://images.homey.se/dynamic_headline.pngBir başlığın ilk yarısında jQuery ile nasıl ders yapılır?
Güzel bir @lashleigh.
http://jsfiddle.net/johnhunter/KRJdm/
@Tony, ben uyguladık Eğer bir jquery eklentisi olarak sonra ne: Burada bir çalışma örneğe göz olabilir. Sen biçimlendirilmiş istediğiniz başlığında diyoruz:
$(function() {
$('h1').splitWords();
});
... ve böyle html çıktı üretecektir: Sonra
<h1>This is a long headline</h1>
:
önce
<h1> <span class="wrap-1">This is </span> <span class="wrap-2">a long headline </span> </h1> GÜNCELLENMİŞ:
Özgün sorunun bir parçası değil, ancak, sarmanın hangi sözcükte oluştuğunu belirtebilmeniz için örneği güncelledim.Eğer bir indeks argümanı sağlarsanız, o ofset'i kelimeler listesinden kullanır (eksi değerler sondan geriye doğru sayılır). örneğin:
$('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
Bu ilginç bir sorundur:
daha net bir açıklama için bu görüntüye bakın. Kullanışlı javascript splice yöntemiyle yaklaşırdım. Ekleme, bir dizinin öğelerini eklemek ve silmek için kullanılabilir. Bir müfettiş açmanızı ve aşağıda yazdığım bazı örnekleri denemenizi tavsiye ederim.İlk önce, üstbilgiyi seçmek için jQuery'yi kullanacağız, ardından html içerik dizesini işlemek için kullanacağız. Sana işlemek istediğiniz belirli başlığı bir sınıf olacak varsayarak ve ben 'dinamik' ikame ettik: ek yeri orijinal diziyi değiştirir
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)
unutmayın, bu noktada çok:
first_half = ["Header", "with"]
header_as_array = ["some", "other", "stuff"]
Şimdi, tekrar bir araya onlara katılabilirsiniz ve şöyle açıklıklı onları sarın:
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;
Son olarak, jQuery ile başlığına geri bitmiş dize koyacağım:
$("h1.dynamic").html(finished);
Yazdığım gibi, tek bir kelime sayısı olan bir başlık her zaman ikinci yarının uzun yarısı kadar olacaktır. bunu bunu yapabilirsiniz tersi tercih ederseniz: olmayan bir tamsayı değeri kesilecek Varsayılan olarak
var splice_location = Math.ceil(test_as_array.length/2);
var first_half = header_as_array.splice(0, splice_location);
, ama burada biz aşağıya değil, toparlamalıyız tavan işlevini kullanıyor.
Vay, ne bir hizmet. 2 saat önce soruyu sordum ve bu harika yardımı aldım. Teşekkür ederim! –
Sorun değil, yardımcı olmasından gerçekten çok memnun oldum ve bu harika bir ilk soru oldu. Teşekkür etmenin en iyi yolu, bir cevabı 'kabul edildi' olarak işaretlemektir, bu yanıt verenlerin bonus puanlarını verir ve iyi bir karma oluşturur. Umarım SO topluluğu size iyi davranmaya devam eder. – lashleigh
Oh, burada çok eğlendim. Kabul ettim Johnhunter'ların cevabını aldım ama bir şeyleri açıklamanın yolunu gerçekten takdir ettim. 15p'ye ulaştığımda cevabınıza da döneceğime ve oy vereceğime söz veriyorum. Sanırım bunun için puan aldın mı? –
ancak, jQuery bu etkiyi elde etmek için teknolojinin en iyi seçim olduğunu önermeyi itiraz edeceğini, şu
<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>
Çocuk, bu bir çok kod. Dize manipülasyonları yaptığınızda ve bir 'u kolayca atabildiğinizde, createElement ve addClass öğelerinin kullanımı aşırı bir çeşit olduğunu düşünüyorum. – Benson
lashleigh cevabı harika deneyin. Aynı sunucu tarafını yapmayı önermek için eğilimliydim. İşaretlemeyi PHP, Python veya kullanmakta olduğunuz dil kullanarak ve sonra eklenen sınıfı kullanarak önbelleğe almak suretiyle ifade etmek. Sayfa ağırlığında kaydeder ve kullanıcının tarayıcısı her bir sayfa yüklendiğinde her şeyi hesaplamak zorunda olmadığı anlamına gelir. Mobil cihazlar gibi ışık istemcileri üzerinde önemli bir fayda.
İşte PHP'de bir örnek.
<?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;
?>
Kesinlikle! ... uygulamak için bir pozisyonda iseniz. – johnhunter
İlginç düşünceler, ancak bu, muhtemelen mobil cihazlarda bile bir milisaniyeden daha az sürecek olan önemsiz bir işlemdir. Argümanlarınız erken bir optimizasyon durumu gibi geliyor. Sunucuda bunu yapmak için görebilmemin tek nedeni, muhtemelen bir değişkendeki başlık metnine sahip olmanızdır - eğer durum buysa evet, orada yapmaya değecektir, çünkü bu, daha az kodun korunması anlamına gelir. – Benson
@Benson Kodun sürekliliğine ilişkin noktanızı beğeniyorum ve bunun erken görüneceğini kabul ediyorum. Bununla birlikte, bir işi başarmak için doğru teknolojiyi seçmesi gerektiğini iddia ediyorum. Sitenin statik HTML olmadığını varsayarsak, bu tür biçimlendirmeyi arka planda yerleştirmek önemsiz olur. Javascript'ten muhtemelen daha basit kod._See PHP, post_ – Prydie
Benim düşünceme göre, bir eklenti, aşırı geniş bir kitle, ama her biri için. :-) – Benson
@Benson onun adil bir nokta. Belki de jquery, bir parça işlevsellik için çok fazla. Eklentinin kendisi, zaten kullanacağınız kodu sarmalayan bir işlevden başka bir şey değildir, ancak yeniden kullanımını kolaylaştırır. İsterseniz onu sökebilirsiniz: – johnhunter
PS: eklenti 20 satır - boş olanlar da dahil olmak üzere: D – johnhunter