Perşembe, Aralık 4, 2008
Yorum yok

jQuery: Bir onay penceresi

Biz pratik kullanımları jQuery tabi olacaktır. Bugün yönetim paneline bir operasyon doğrulayan bir pencere yazmak gerekiyordu. Durumunda basit gibi görünüyor ve JavaScript (Tekrar) veya PHP unutarak, konu ile çözülebilir, ancak eğlenceli bir gerçekten iyi bir sonuç olsa bile bu şekilde yol açmamak için nasıl yatıyor, ve?
Sanırım istediğiniz eleman kullanıcı tarafından onay eşlik olduğunu varsayarak, sorunu için örnek bir çözüm sunmaya çalışacağız, bir bağlantıdır.

Ilk Örnek HTML Dosyası

Bizler aşağılık testleri hangi bir dosya ile başlar: 

  <DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title> onay iletişim </ title>
 </ Merkez>
 <body>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Quisque ultrices Orci nisl quis.  Dolor de Aliquam.  Quam consequat ac leo sed.  Curabitur Fringilla sodales sem.  Eleifend Mauris ac ante aliquet özdeyişi Praesent.  Sapien Etiam null, consequat Eget, consequat vitae, molestie id, Lectus.  HAC habitasse Platea dictumst içinde.  Aliquam feugiat odio ac Lectus.  Suspendisse egestas nisl varius.  Morbi null.  Pellentesque aliquet interdum felis.  Vestibulum libero luctus euismod.  Suspendisse interdum Enimem sodales.  Orcia Pellentesque.  Nulla massa Nunc, eleifend aka, eleifend varius, Cong Eget, leo.  Vestibulum ante ipsum primis yılında faucibus Orci ve ultrices posuere luctus cubilia Curae; <br/>
 Aliquet Cras, quis ligula rutrum accumsan, lorem lorem Velit dignissim, ligula az fermentum dignissim quam ligula.  Nulla özdeyişi interdum Purus.  Aenean odio.  Vestibulum pretium.  Phasellus Enimem Enimem, sempre aliquet, tempus ac, rutrum gravida, libero.  Etiam neque odio, blandit NEC, suscipit aka, Pellentesque scelerisque, leo.  Metus kimliği içinde.  Vivamus rutrum.  Nulla yerde sınıflandırılmamış Velit.  Nisi ut Purus, porta de tincidunt sit amet, scelerisque pulvinar, sem.  Adipiscing Risus sed.  Nisi içinde.  Augustin ve ark.  Phasellus ullamcorper quis urn tempus dapibus Lacus.  Sed Eget tahmini  Etiam TELLUS Erat, adipiscing NEC, Iğdır'da sed, bir, Orci ultricies.  Cras ac Lectus.  Curabitur yerde sınıflandırılmamış lorem NIBH mattis.  <a href="http://poslinski.net" class="confirm"> Maecenas </ a> aliquet iaculis turpis.
 </ P>
 <div id="confirm"> </ div>
 </ Body>
 </ Html>

Örnek metin jeneratör Lorem ipsum , bir p içeri girdi. Kısa bir süre kapanış gövde etiketi önce, div #, onaylamak, içinde onaylamak için bizim penceresinden bir kod olacak koydu.

Ikinci Sunum katmanı

Bize pencere odaklanmak istiyorum. Şöyle Benim durumumda, tüm pencereyi sorumlu olacaktır html kodu, bakacağız: 

  <div id="confirm">
 <div>
 <div>
 <h1> Bu öğeyi silmek istediğinizden emin misiniz? </ h1>
 <p> <Button onClick="location.href='TUTAJ arasında LINKU'"> VAR </ button> <button> DEĞİL </ button> </ p> HREF içeriğini vurdu OLACAKTIR
 </ Div> <! - End # div div onaylayın ->
 </ Div> <! - End # div onaylayın ->
 </ Div> <! - End # onayla ->

# Teyit içindeki kodu, JavaScript tarafından üretilir. Ama görünüyor neden dikkate değer sadece ve neden sayfa kodu altındaki ister mi?

Sonunda kodu dahil nedenleri ile başlayalım. Mutlak, için # z-index parametresi, pozisyon nesnelerin sırası olmadan, onaylayın: konumunu belirlerken mutlak, bunların tarayıcı tarafından oluşturulan sırayı maç olacak. Son derlenmiş, pozisyon ile katmanları bir yığın daha olacak: örneğin, aynı boyutta olacak eğer mutlak, bu nedenle, daha önceki kod çıktı katmanı, maskelemek.

Içinde onaylamak Neden, biz iki kez bir div yerleştirilir? Bu noktayı açıklığa kavuşturmak için sadece kafa bölümü içinde yerleştirdiğiniz css kodu bölümünü okuyun, şudur: 

  <style type="text/css">
 <! -
 * {Margin: 0px, padding: 0px;}
 body {margin: 10px;}
 p {width: 600px; margin: 0 auto; line-height: 25px;}

 / * CONFIRM * /
 # {:;: Absolute; height: 100%; width: 100%; background: # 000; top: 0; left: 0; pozisyon hiçbiri ekran} onaylayın
 # {Onayla yüksekliği: ifade (((&& window.Enumerable window.Enumerable.max) [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight] Max ().: document.documentElement.scrollHeight) + 'px'); genişliği: ifade (((&& window.Enumerable window.Enumerable.max) [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, belge. . documentElement.clientHeight] max (): document.documentElement.scrollWidth) + 'px');}
 # [Id] Onayla {position: fixed;}
 # Div {:; margin-top 10px: dolgu 200px;} onaylayın
 # Onayla div div {background: # 900c0c; width: 500px; margin: 0 auto; border: 1px solid # CCC; overflow: hidden;}
 # Div div h1 onaylayın: {; renk 18px: font-size # FFF;}
 # Div div p {: 20px doldurma;} onaylayın
 ->
 </ Style>

# Tüm sayfa "kapak" olacak arka onaylamak burada tanımlar. İkinci satırda, (garip bir yükseklik ve genişlikte bir), Internet Explorer durumunda gereklidir. # [Id] Onayla zaman boyunca yalnızca modern tarayıcılarda anlaşılır, ve bu% 100% 100 boyutu bizim pencerenin arka planı idi ve çalışır site ile (IE için geçerli pencerenin genişlik ve yükseklik dayalı her durumda hesaplanır).

İlk p merkezi ve 2-üst kenarı üst penceresinden bir mesafe almak gereklidir. % 100 (ekran ile bir eleman için standart değeri: - bir div blok) ikinci div zaten bir genişliğe sahip bir blok elemanı içinde olduğu gibi, ortalanmış olabilir onaylamak için bizim pencere açıyor

Üçüncü JQuery Zaman

Bizi lorem ipsum'a koymak blok P, sonunda görünür linke tıklamaları tepki için bu kalır: 

  <a href="http://poslinski.net" class="confirm"> Maecenas </ a>

Bizim durumumuzda, sınıf doğrulatabilirsiniz tüm bağlantılar, script tepki olacaktır. Bu veritabanı bir değer kaldırılması için, tüm bağlantılar bizim onay uygulanabilir.

Bu sayfanın alt kısmında yer alır ve bu JavaScript kodu gerektirir: 

  src = "jquery.js" <script type="text/javascript"> </ script>
 <script type="text/javascript">
 $ (Belge). Hazır (function () {
 $ (". Onayla"). (Function () {tıklayın
 $ ("# Onayla")
 . Css ({opacity: 0.95})
 . FadeIn ()
 . Html ('<div> <h1> Redirect </ h1> <p <düğmesine onClick = \ "location.href = \'' + $ (this). Attr (" href ") +' \ '\ "> Evet </ button> <button> DEĞİL </ button> </ p> </ div> </ div>');
 return false;
 });
 . $ ("# Onayla") tıklayın (function () {$ (this) FadeOut ();.});
 });
 </ Script>

İlk satır yük jQuery.

Sonra, bizim kod $ (document) ana dalı. Hazır, Bir sayfa yüklendikten sonra, kodunuzu etkinleştirin.

Biz bu durumda id = doğrulatabilirsiniz eleman yöntemleri bir dizi neden sınıfı doğrulatabilirsiniz eleman tıklayarak yanıt. Başlamak için, (ama hala bir öğesi olarak ayarlanır: none) bir saydamlık eklemek fadeIn yöntemi kullanarak, daha sonra, jQuery sorunsuz ekrandan taşır: matlık yok: 0.95 (bizim durumumuzda). Son olarak, # onaylamak unsuru içinde, h1 başlık düğmesi ve iki düğme içine yerleştirilir bizim iki divami, bir html kodu yükleyin. Muhtemelen bunlardan biri fark etmiş, artı onlar pozitif bir kullanıcı onayı tepki vereceği onClick olay, beyan edildiği gibi, bağlantıya tıklandığında gösterdiği yere onu przekierowywując.

Neden bu kod bloğunun sonunda return false? Tarayıcı için, bağlantıya tıklayarak, otomatik yönlendirme değil, bizim fonksiyon return false gerekir, aksi takdirde yönlendirir ve pencereler konuları teyit edilecektir.

Eğer başka bir yerde "EVET", olay FadeOut () Kullanım düğmesini daha tıklarsanız, blok ("# onaylamak") $ anlar bizim onay, sorunsuz bir şekilde kaybolur. Tıklayın (...).

Bütün yazılı kod şöyle görünmelidir: 

  <DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title> onay iletişim </ title>
 <style type="text/css">
 <! -
 * {Margin: 0px, padding: 0px;}
 body {margin: 10px;}
 p {width: 600px; margin: 0 auto; line-height: 25px;}

 / * CONFIRM * /
 # {:;: Absolute; height: 100%; width: 100%; background: # 000; top: 0; left: 0; pozisyon hiçbiri ekran} onaylayın
 # {Onayla yüksekliği: ifade (((&& window.Enumerable window.Enumerable.max) [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight] Max ().: document.documentElement.scrollHeight) + 'px'); genişliği: ifade (((&& window.Enumerable window.Enumerable.max) [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, belge. . documentElement.clientHeight] max (): document.documentElement.scrollWidth) + 'px');}
 # [Id] Onayla {position: fixed;}
 # Div {:; margin-top 10px: dolgu 200px;} onaylayın
 # Onayla div div {background: # 900c0c; width: 500px; margin: 0 auto; border: 1px solid # CCC; overflow: hidden;}
 # Div div h1 onaylayın: {; renk 18px: font-size # FFF;}
 # Div div p {: 20px doldurma;} onaylayın
 ->
 </ Style>
 </ Merkez>
 <body>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Quisque ultrices Orci nisl quis.  Dolor de Aliquam.  Quam consequat ac leo sed.  Curabitur Fringilla sodales sem.  Eleifend Mauris ac ante aliquet özdeyişi Praesent.  Sapien Etiam null, consequat Eget, consequat vitae, molestie id, Lectus.  HAC habitasse Platea dictumst içinde.  Aliquam feugiat odio ac Lectus.  Suspendisse egestas nisl varius.  Morbi null.  Pellentesque aliquet interdum felis.  Vestibulum libero luctus euismod.  Suspendisse interdum Enimem sodales.  Orcia Pellentesque.  Nulla massa Nunc, eleifend aka, eleifend varius, Cong Eget, leo.  Vestibulum ante ipsum primis yılında faucibus Orci ve ultrices posuere luctus cubilia Curae; <br/>
 Aliquet Cras, quis ligula rutrum accumsan, lorem lorem Velit dignissim, ligula az fermentum dignissim quam ligula.  Nulla özdeyişi interdum Purus.  Aenean odio.  Vestibulum pretium.  Phasellus Enimem Enimem, sempre aliquet, tempus ac, rutrum gravida, libero.  Etiam neque odio, blandit NEC, suscipit aka, Pellentesque scelerisque, leo.  Metus kimliği içinde.  Vivamus rutrum.  Nulla yerde sınıflandırılmamış Velit.  Nisi ut Purus, porta de tincidunt sit amet, scelerisque pulvinar, sem.  Adipiscing Risus sed.  Nisi içinde.  Augustin ve ark.  Phasellus ullamcorper quis urn tempus dapibus Lacus.  Sed Eget tahmini  Etiam TELLUS Erat, adipiscing NEC, Iğdır'da sed, bir, Orci ultricies.  Cras ac Lectus.  Curabitur yerde sınıflandırılmamış lorem NIBH mattis.  <a href="http://poslinski.net" class="confirm"> Maecenas </ a> aliquet iaculis turpis.
 </ P>
 <div id="confirm"> </ div>
 src = "jquery.js" <script type="text/javascript"> </ script>
 <script type="text/javascript">
 $ (Belge). Hazır (function () {
 $ (". Onayla"). (Function () {tıklayın
 $ ("# Onayla")
 . Css ({opacity: 0.95})
 . FadeIn ()
 . Html ('<div> <h1> Redirect </ h1> <p <düğmesine onClick = \ "location.href = \'' + $ (this). Attr (" href ") +' \ '\ "> Evet </ button> <button> DEĞİL </ button> </ p> </ div> </ div>');
 return false;
 });
 . $ ("# Onayla") tıklayın (function () {$ (this) FadeOut ();.});
 });
 </ Script>
 </ Body>
 </ Html>

Özet

Örneğin Çalışma, görebilirsiniz burada .

Bu örnek çözümü tüm olanakları gerektirmez. Onay formu etkileyecek şekilde Biz kodu uzatabilir, daha sonra da jQuery içinde yapılabilir form denetimi, göndermek istiyorsunuz. Şunları yapabilirsiniz Ayrıca, jQuery için bir eklenti oluşturmak için yukarıdaki kodu bazında. Bu yazılan yorumların içinde tartışmak için çekinmeyin.

Arkadaşça, Share olun!

İlgili girişleri

Kategoriler: jQuery
Etiketler: , , , ,
«
»
Sen beslemesi ile bu giriş için herhangi bir yanıt takip edebilirsiniz RSS 2.0 . Ayrıca yazabilirsiniz kendi yorumlarınızı veya bağlamak için sayfanızda bu yazı için.
    • Obraz CAPTCHY
    Resmi Yenile
    *

    Spam Koruması WP-SpamFree tarafından