2010-10-15 18 views
5

Başlığın belirttiği gibi, kullanıcı giriş metin dizesini belirlenen bir kabın genişliğine ve yüksekliğine göre kırpmak istiyorum. Benim şartım dizgiyi kırpmak, sonunda Read More gibi bir mesaj görüntülemek ve kullanıcı tıkladığında, metin aşağı kayar.Uzun metin dizesini kapsayıcı genişliğine/uzunluğuna kırpmak için jquery eklentileri

UPDATE: Ah! Bir şeyi unuttun. Çok baytlı karakterleri de işlemelidir.

Birisi hangi seçeneklere sahip olabilir? jQuery eklentileri veya bazı şık jquery snippet'i?

Teşekkürler ve Saygılar

cevap

4

jQuery Genişletici Eklentisi:

HTML:

<div class="expandable"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. 
    </p> 
    <p>Reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 
    officia deserunt mollit anim id est laborum. 
    </p> 
    </div> 

JavaScript:

<script src="jquery.js" type="text/javascript"></script> 
<script src="jquery.expander.js" type="text/javascript"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 

    // simple example, using all default options 
    $('div.expandable p').expander(); 

    // *** OR *** 

    // override some default options 
    $('div.expandable p').expander({ 
    slicePoint:  80, // default is 100 
    expandText:   '[...]', // default is 'read more...' 
    collapseTimer: 5000, // re-collapses after 5 seconds; default is 0, so no re-collapsing 
    userCollapseText: '[^]' // default is '[collapse expanded text]' 
    }); 

}); 
</script> 

Kaynak:

http://plugins.learningjquery.com/expander/index.html

demo buraya bakınız: Eğer açıklamalar gerekiyorsa

http://plugins.learningjquery.com/expander/demo/index.html

İyi şanslar bana sor!

+0

@Trufa - +1 Teşekkürler. – vikmalhotra

+0

Sorun değil! uygulamak için herhangi bir yardıma ihtiyacınız varsa sorun! – Trufa

+0

@Trufa - Bununla ilgili bir soru var. Genişletilebilir metin dizgemi bir listede görüntülüyorum. Yani, birden fazla genişletilebilir metin satırı var. 'Expander()' yöntemini bu satırların tümüne eklerseniz, bu 'expandText' tıklatıldığında tüm dizeleri genişletir mi? – vikmalhotra