Mini porady JavaScript i jQuery II

Program control

Poziom średnio-zaawansowany

OK! Pora na kolejne szybkie porady JavaScript i jQuery. Dziś co nieco o Fancybox plugin, checkboxach i parsowaniu linków w tekście.

Porady JavaScript i jQuery

Do rzeczy.

1. Wysyłanie formularza warunkowo – tylko jeśli użytkownik zaznaczył checkbox (np. akceptuję regulamin).

Oczywiście chodzi o walidację w JS / jQ, bez użycia języka takiego jak PHP.

Mamy sobie nasz checkbox:

<div class="error">Please accept the TOS!</div>

<input type="checkbox" name="terms" id="terms" value="1" />
<label style="display: inline;" for="terms">I agree ... </label>

oraz formularz:


<form id="submit-form" action="index.php" method="post">
  <input type="hidden" name="hidden" value="1" />
  <input type="text" id="name" />

  ... other inputs ...

  <input type="submit" id="submit-button" value="Send" />

</form>

Walidacja jest bardzo prosta to zaimplementowania używając jQuery. Sprawdzamy czy interesujący nas checkbox został zaznaczony. Jeśli nie – zapobiegamy wysłaniu formularza (domyślnej akcji, e.preventDefault()) oraz pokazujemy komunikat błędu. Jeśli zaznaczono, chowamy komunikat błędu, oraz dodatkowo ustawiamy przycisk Submit na disabled, aby użytkownik nie wysłał tego formularza więcej niż 1 raz.

Kod JS:

$('#submit-form').bind('submit', function (e) {
  var terms = $('#terms').is(':checked');

  if (terms !== true) {
    e.preventDefault();
    $(".error").show();
  } else {
    $(".error").hide();
    $('#submit-button').attr("disabled", true);
  }
});

2. Jak zablokować możliwość zamknięcia Fancybox?

Za pewne od czasu do czasu w projekcie mamy do zrobienia dialog, na którym wyświetlamy informacje oraz być może wymagamy od użytkownika podania jakiejś informacji lub kliknięcia na jeden z przycisków, aby określić dalszą akcję do wykonania.

Czasami jest wymaganie, aby użytkownik nie mógł takiego dialogu zamknąć. Oto przykład jak to zrobić w użyciem Fancybox:

$.fancybox({
  // hide close Btn
  closeBtn : false,
  // prevents closing when clicking INSIDE fancybox
  closeClick  : false,
  helpers     : { 
    // prevents closing when clicking OUTSIDE fancybox
    overlay : { closeClick: false } 
  },
  keys : {
    close: null
  },

  'padding':  0,
  'width':    760,
  'height':   600,
  
  // show the content of element
  content: $('#our-div-with-content').show()
});
        

Co robi ten kod? Zapobiega zamknięciu Fancybox poprzez:

– brak przycisku „Close”

– brak zamknięcia dialogu po kliknięciu poza nim, gdzieś na stronie

– brak reakcji na przycisk Escape

Tym samym użytkownik nie będzie miał możliwości zamknięcia wyświetlonego Fancybox.

Wydawnictwo Strefa Kursów

3. JavaScript i klikalne linki w tekście

Jak przetworzyć tekst w JS, aby zamienić w nim wszystkie adresy na klikalne linki? Z pomocą przyjdą nam wyrażenia regularne.

Będąc przy temacie, zobaczmy jak to zrobić w PHP – przykładowo:

//'<a class="'.$class.'" href="//$3" target="'.$target.'">$1$3</a>', 
function make_links($string) {
  return preg_replace(
  '%(https?|ftp|mailto)://([-A-Z0-9./_*?&;=#]+)%i',
  '<p><a target="blank" rel="nofollow" href="$0"><u>$0</u></a></p><br>', $string);
}

Wróćmy jednak do JavaScript. Zdefiniujemy kilka wyrażeń regularnych, aby obsłużyć nie tylko Urle do stron, ale także ftp i mailto:


function processLinksInText(text) {

  // http://, https://, ftp://
  var urlPattern = /\b(?:https?|ftp):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*[a-z0-9-+&@#\/%=~_|]/gim;

  // www., http:// or https://
  var pseudoUrlPattern = /(^|[^\/])(www\.[\S]+(\b|$))/gim;

  // e-mail
  var emailAddressPattern = /(([a-zA-Z0-9_\-\.]+)@[a-zA-Z_]+?(?:\.[a-zA-Z]{2,6}))+/gim;

  return text
    .replace(urlPattern, '<a target="_blank" href="$&">$&</a>')
    .replace(pseudoUrlPattern, '$1<a target="_blank" href="http://$2">$2</a>')
    .replace(emailAddressPattern, '<a target="_blank" href="mailto:$1">$1</a>');
}

Po prostu trzeba zdefiniować poprawne wyrażenia regularne, następnie dla każdego wywołujemy metodę .replace().

Do poczytania także:

http://stackoverflow.com/questions/37684/how-to-replace-plain-urls-with-links


Podsumowanie

To tyle na dziś. Kolejne drobne porady dotyczące rozwiązań problemów które możemy spotkać w trakcie realizacji naszych projektów.

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook2Tweet about this on TwitterShare on Google+0Share on LinkedIn0Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.