Autosizing prototip kullanarak button

SORU

11 AĞUSTOS 2008, PAZARTESİ

Autosizing prototip kullanarak button

Şu anda çalıştığım şirket için iç satış bir uygulama üzerinde çalışıyorum, ve kullanıcının teslimat adresini değiştirmek için izin veren bir form var.

Bence bir göz çok daha güzel, eğer button kullanıyorum ana Adres detayları sadece ele alan metin, ve otomatik olarak yeniden boyutlandırmak metin değiştirildi.

Burada bir görüntü var şu anda.

ISO Address

Herhangi bir fikir?

@Chris

İyi bir nokta, ama yeniden boyutlandırmak istiyorum nedeni vardır, up bilgileri yer alan sürer alanı istiyorum. Ekran görüntüsünde gördüğünüz gibi, Eğer sabit bir button var, Dikey Boşluk adil bir wack alır.

Yazı tipi azaltabilir, ama Adres büyük ve okunabilir olması gerekiyor. Şimdi metin alanının boyutunu azaltmak olabilir, ama 3 ya da 4 (5) sürer çizgiler gereken bir adres satırı olan insanlar ile ilgili sorunlar var. Kullanıcı kaydırma çubuğunu kullanmak için ihtiyaç duyan bir büyük hayır-hayır.

Biraz daha açık olmam gerekiyor sanırım, dikey yeniden boyutlandırma sonra ben, genişlik pek önemli değil. Tek sorun şu olur, ISO numarası (büyük "1") alır itti altında adresi zaman penceresi genişliği çok küçük (gördüğünüz gibi üzerinde ekran görüntüsü).

Bir gimick olması, gereksiz yer kaplar olmayacak, ama tüm metin gösterecektir kullanıcı düzenleyebilir metin alanına sahip olduğuyla ilgili değil.

Eğer birisi bu sorunu yaklaşım için başka bir yol ile gelirse ama açık da değilim.

@Orion

Teşekkürler!

Biraz garip davranıyor, çünkü kodu biraz modifiye ettim, dikkate sadece yazılan karakter kabul etmedi çünkü keyup üzerinde etkinleştirmek için değiştirdim.

resizeIt = function( ) {
  var str = $( 'iso_address' ).value;
  var cols = $( 'iso_address' ).cols;
  var linecount = 0;
  $A( str.split( "\n" ) ).each( function( l ) {
    linecount  = 1   Math.floor( l.length / cols ); // take into account long lines
  } )
  $( 'iso_address' ).rows = linecount;
};

CEVAP

11 AĞUSTOS 2008, PAZARTESİ

Facebook, insanların duvarlarına yazmak, ama sadece dikey olarak yeniden boyutlandırır.

Yatay boyutlandırma sözcük kaydırma, uzun hatları ve Benzerleri nedeniyle bir karmaşa olarak beni vurur, ama dikey olarak yeniden boyutlandırmak oldukça güvenli ve güzel görünüyor

Facebook-kullanan-biliyorum, hiçbiri hiç bahsetmemişti ya da kafası karıştı. Söylemek anekdot kanıt olarak kullanmak istiyorum 'gidin ve uygulamak'

Bazı javascript, prototype.js kullanarak bunu biliyorum çünkü ()

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://www.google.com/jsapi"></script>
  <script language="javascript">
  google.load('prototype', '1.6.0.2');
  </script>
</head>
<body>
  <textarea id="text-area" rows="1" cols="50"></textarea>

  <script type="text/javascript" language="javascript">
  resizeIt = function() {
    var str = $('text-area').value;
    var cols = $('text-area').cols;

    var linecount = 0;
    $A(str.split("\n")).each( function(l) {
      linecount  = Math.ceil( l.length / cols ); // take into account long lines
    } )
    $('text-area').rows = linecount   1;
  };

  Event.observe('text-area', 'keydown', resizeIt ); // you could attach to keyUp, etc if keydown doesn't work
  resizeIt(); //initial on load
  </script>
</body>
</html>

PS: Açıkçası bu javascript çok saf ve iyi test değil, ve muhtemelen onları Roman ile metin kutularının üzerinde kullanmak istemiyorum, ama genel bir fikir olsun

Bunu Paylaş: