Déardaoin 4 Nollaig, 2008
No comments

jQuery: A fuinneog dearbhú

Táimid fós ina ábhar jQuery úsáidí praiticiúla. Inniu is gá dom a scríobh fhuinneog ag dearbhú oibríocht sa phainéal riaracháin. Dealraíonn sé an cás a bheith simplí agus is féidir a réiteach ag an ábhar, forgetting faoi JavaScript (Dearbhaigh) nó PHP, ach luíonn an spraoi i conas é seo a dhéanamh ionas nach a chur faoi deara, agus fiú go raibh toradh i ndáiríre réasúnta?
Déanfaidh mé iarracht a dhéanamh teacht ar réiteach sampla a chur i láthair ar an bhfadhb, ag glacadh leis go bhfuil an ghné sin ba mhaith linn ag gabháil leis ndaingnithe ag an úsáideoir, tá nasc.

An Chéad Sampla HTML Comhad

Tús a chur againn le comhad a dhéanamh ar ár tástálacha vile: 

  <DOCTYPE html POIBLÍ! "- / / W3C / / DTD XHTML 1.0 Transitional / / GA" "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> deimhniú dialóg </ teideal>
 </ Ceann>
 <body>
 <p>
 Lorem ipsum dolor den amet, consectetur adipiscing mionlach.  Quisque ultrices Orci quis nisl.  Aliquam ag dolor.  Sed quam consequat ac leo.  Curabitur Fringilla sodales SEM.  Praesent eleifend mauris ac ante aliquet dictum.  Sapien Etiam null, consequat eget, consequat curriculum, molestie id, Lectus.  I HAC habitasse platea dictumst.  Aliquam feugiat odio ac Lectus.  Suspendisse egestas nisl varius.  Morbi null.  Pellentesque aliquet interdum felis.  Vestibulum libero luctus euismod.  Suspendisse sodales interdum Enimem.  Pellentesque Orcia.  Nulla Massa nunc, aka eleifend, eleifend varius, Conga eget, leo.  Vestibulum ante ipsum primis i faucibus Orci et ultrices posuere luctus cubilia Curae; <br/>
 Aliquet GRCanna, quis ligula rutrum accumsan, lorem lorem velit dignissim, fermentum dignissim quam ligula ag ligula.  Purus Nulla interdum dictum.  Aenean odio.  Vestibulum pretium.  Phasellus Enimem Enimem, Semper aliquet, Tempus ac, rutrum gravida, libero.  Etiam neque odio, blandit NEC, suscipit aka, scelerisque Pellentesque, leo.  I Metus id.  Vivamus rutrum.  Nulla gae velit.  Nisi UT purus, ag Porta, tincidunt den amet, scelerisque pulvinar, MLA.  Sed Risus adipiscing.  I nisi.  Augustin et al.  Phasellus ullamcorper quis urn Tempus dapibus Lacus.  Meastachán eget sed  Etiam Tellus erat, adipiscing NEC, placerat sed, ultricies a Orci,.  GRCanna ac Lectus.  Curabitur gae lorem NIBH Mattis.  <a href="http://poslinski.net" class="confirm"> Maecenas </ a> aliquet iaculis turpis.
 </ P>
 <div id="confirm"> </ div>
 </ Comhlacht>
 </ Html>

Sampla téacs gineadóir Lorem ipsum , chuaigh taobh istigh de lch. Go gairid roimh an chlib comhlacht deiridh ó, cuir na div # dhaingniú, ar laistigh di a mbeidh cód as ár fhuinneog a dhaingniú.

Dara An ciseal i láthair

Lig dúinn díriú ar ár fhuinneog. I mo chás féin, an cód html a bheidh freagrach as an fhuinneog ar fad a bheidh, breathnú mar a leanas: 

  <div id="confirm">
 <DIV>
 <DIV>
 <h1> An bhfuil tú cinnte gur mian leat a scriosadh an mhír seo? </ h1>
 BEIDH <p> <button onClick="location.href='TUTAJ bhuail an ábhar ar an HREF de LINKU'"> TÁ </ cnaipe> <button> NACH </ cnaipe> </ p>
 </ Rannán> <-! Deireadh dhearbhú # div div ->
 </ Rannán> <-! Deireadh dhearbhú # div ->
 </ Rannán> <-! Deireadh Deimhnigh # ->

Tá an cód taobh istigh den dhaingniú #, ginte ag JavaScript. Ach is fiú smaoineamh ar cén fáth tá sé díreach cosúil go bhfuil agus é sin an fáth ag bun an cód leathanach seo?

Let tús leis na cúiseanna atá lena n-áirítear an cód ag an deireadh. Ag cinneadh an seasamh: absalóideach, a dhearbhú le haghaidh #, gan z-innéacs paraiméadar, an t-ord de rudaí ó phost: absalóideach, beidh sé comhoiriúnach leis an ord ina bhfuil siad a ghineann an bhrabhsálaí. Last thiomsú, a bheith ann níos mó ná Stack de sraitheanna le seasamh: absalóideach, mar sin má shampla beidh, tá na gnéithe céanna, masc an ciseal, a bhí le feiceáil sa chód níos luaithe.

Cén fáth a dhaingniú ar an taobh istigh, chuireamar dhá uair sa div? Soiléiriú a dhéanamh ar an bpointe seo, is é ach léamh an alt seo i do chód CSS gur áit tú taobh istigh den alt ceann: 

  <style type="text/css">
 <! -
 * {Imeall: 0px, stuáil: 0px;}
 comhlacht {margin: 10px;}
 p {width: 600px; margin: 0 uathoibríoch; líne-airde: 25px;}

 / * DHAINGNIÚ * /
 Deimhnigh # {thaispeáint: none; phost: glan; airde: 100%; width: 100%; chúlra: # 000; barr: 0; chlé: 0;}
 Deimhnigh # {airde: abairt (((&& window.Enumerable.max window.Enumerable) [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight] Max ().: document.documentElement.scrollHeight) + 'px'); leithead: abairt (((&& window.Enumerable.max window.Enumerable) [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, doiciméad. . documentElement.clientHeight] max (): document.documentElement.scrollWidth) + 'px');}
 # Deimhnigh [id] {phost: seasta;}
 # Deimhnigh div {stuála: 10px; margin-top: 200px;}
 Div div # Dearbhaigh {chúlra: # 900c0c; width: 500px; margin: 0 uathoibríoch; teorann: 1px # soladach CCC; thar maoil: bhfolach;}
 # Deimhnigh div div {font-H1 size: 18px; dath: # fff;}
 # Deimhnigh div div p {stuála: 20px;}
 ->
 </ Stíl>

# Sainmhíníonn sé anseo a dhearbhú an cúlra a bheidh "a chlúdach" an leathanach seo ar fad. An dara líne, (an ceann a bhfuil ar airde aisteach agus leithead), tá sé riachtanach i gcás Internet Explorer. # Deimhnigh [id] Is intuigthe ach amháin maidir le brabhsálaithe nua-aimseartha, agus bhí sé seo an plean chun an cúlra ar ár bhfuinneog a bhí an méid de 100% go 100% ritheann agus ar fud an t-am leis an suíomh (do IE a ríomh i ngach cás atá bunaithe ar an leithead reatha agus airde an fhuinneog).

Is é an chéad div gá chun ionad an 2ú agus a ghlacadh fad as an fhuinneog barr ar an mbarr margin-. An dara div Soláthraíonn cheana féin ar ár bhfuinneog a dheimhniú gur féidir a dírithe, mar go bhfuil sé taobh istigh de ghné bloc le leithead: 100% (luach caighdeánach do ghné le taispeáint: block - rud atá ina div)

Tríú Am ar jQuery

Tá sé fós ann dúinn chun freagairt do cad a tharlaíonn nuair ar an nasc go léir ag deireadh an bloc P, a chur lorem ipsum'a: 

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

In ár gcás, gach naisc leis an rang go mbeidh dhaingniú, freagairt an script. D'fhéadfaí tú ár admháil maidir le gach naisc, chun deireadh a chur luach as an mbunachar sonraí.

Éilíonn sé JavaScript cód a chuirtear ar bun an leathanaigh: 

  src = "jquery.js" <script type="text/javascript"> </ script>
 <script type="text/javascript">
 $ (Document). Ready (fheidhm () {
 $ (". Dearbhaigh"). Cliceáil (fheidhm () {
 $ ("# Confirm")
 . CSS ({teimhneacht: 0.95})
 . FadeIn ()
 . Html ('<DIV> <DIV> <h1> Redirect </ h1> <p <cnaipe onClick = \ "location.href = \'' + $ (seo). Attr (" href ") +' \ '\ "> Sea </ cnaipe> <button> NACH </ cnaipe> </ p> </ div> </ div>');
 ar ais go bréagach;
 });
 . $ ("# Confirm") Click (fheidhm () {$ (seo) FadeOut ();.});
 });
 </ Script>

An jQuery ualach an chéad líne.

Ansin, a ghníomhachtú an brainse is mó d'ár gcód $ (doiciméad). Ready, do chód, tar éis ualaí leathanach.

Againn freagra a thabhairt ach cliceáil ar an ghné leis an rang dhaingniú, sa chás seo is cúis le sraith de mhodhanna ar an eilimint le id = dhaingniú. Chun tús a chur, add a trédhearcacht (ach fós tá gné a leagtar a thaispeáint: none), ansin ag baint úsáide as an modh fadeIn, bogann jQuery seamlessly ó taispeáint: none le teimhneacht: 0.95 (in ár gcás). Ar deireadh, taobh istigh den eilimint de # dhaingniú, a luchtú ar an gcód html ar ár dhá divami, a chur taobh istigh an cnaipe header h1 agus dhá cnaipí. Mar tú is dócha, faoi deara ar cheann acu, chomh maith le iad a dhearbhú onClick imeacht, a imoibríonn le daingniú úsáideora dearfach, dó przekierowywując go dtí an áit a léirigh nasc chliceáil.

Cén fáth ar ais bréagach ag deireadh an bloc de chód? Chun an brabhsálaí, ní féidir linn a atreorú go huathoibríoch, trí chliceáil ar an nasc, ní mór ár bhfeidhm ar ais bréagach, beidh sé ar shlí eile atreorú agus fuinneoga a dhearbhaíonn an snáitheanna.

Má chliceálann tú in aon áit eile seachas an cnaipe ar "TÁ", a úsáid FadeOut imeacht (), beidh an bloc imíonn seamlessly lenár deimhniú, a realizes $ ("# dhaingniú"). Cliceáil (...).

Ba chóir an cód iomlán scríofa breathnú ar rud éigin mar seo: 

  <DOCTYPE html POIBLÍ! "- / / W3C / / DTD XHTML 1.0 Transitional / / GA" "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> deimhniú dialóg </ teideal>
 <style type="text/css">
 <! -
 * {Imeall: 0px, stuáil: 0px;}
 comhlacht {margin: 10px;}
 p {width: 600px; margin: 0 uathoibríoch; líne-airde: 25px;}

 / * DHAINGNIÚ * /
 Deimhnigh # {thaispeáint: none; phost: glan; airde: 100%; width: 100%; chúlra: # 000; barr: 0; chlé: 0;}
 Deimhnigh # {airde: abairt (((&& window.Enumerable.max window.Enumerable) [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight] Max ().: document.documentElement.scrollHeight) + 'px'); leithead: abairt (((&& window.Enumerable.max window.Enumerable) [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, doiciméad. . documentElement.clientHeight] max (): document.documentElement.scrollWidth) + 'px');}
 # Deimhnigh [id] {phost: seasta;}
 # Deimhnigh div {stuála: 10px; margin-top: 200px;}
 Div div # Dearbhaigh {chúlra: # 900c0c; width: 500px; margin: 0 uathoibríoch; teorann: 1px # soladach CCC; thar maoil: bhfolach;}
 # Deimhnigh div div {font-H1 size: 18px; dath: # fff;}
 # Deimhnigh div div p {stuála: 20px;}
 ->
 </ Stíl>
 </ Ceann>
 <body>
 <p>
 Lorem ipsum dolor den amet, consectetur adipiscing mionlach.  Quisque ultrices Orci quis nisl.  Aliquam ag dolor.  Sed quam consequat ac leo.  Curabitur Fringilla sodales SEM.  Praesent eleifend mauris ac ante aliquet dictum.  Sapien Etiam null, consequat eget, consequat curriculum, molestie id, Lectus.  I HAC habitasse platea dictumst.  Aliquam feugiat odio ac Lectus.  Suspendisse egestas nisl varius.  Morbi null.  Pellentesque aliquet interdum felis.  Vestibulum libero luctus euismod.  Suspendisse sodales interdum Enimem.  Pellentesque Orcia.  Nulla Massa nunc, aka eleifend, eleifend varius, Conga eget, leo.  Vestibulum ante ipsum primis i faucibus Orci et ultrices posuere luctus cubilia Curae; <br/>
 Aliquet GRCanna, quis ligula rutrum accumsan, lorem lorem velit dignissim, fermentum dignissim quam ligula ag ligula.  Purus Nulla interdum dictum.  Aenean odio.  Vestibulum pretium.  Phasellus Enimem Enimem, Semper aliquet, Tempus ac, rutrum gravida, libero.  Etiam neque odio, blandit NEC, suscipit aka, scelerisque Pellentesque, leo.  I Metus id.  Vivamus rutrum.  Nulla gae velit.  Nisi UT purus, ag Porta, tincidunt den amet, scelerisque pulvinar, MLA.  Sed Risus adipiscing.  I nisi.  Augustin et al.  Phasellus ullamcorper quis urn Tempus dapibus Lacus.  Meastachán eget sed  Etiam Tellus erat, adipiscing NEC, placerat sed, ultricies a Orci,.  GRCanna ac Lectus.  Curabitur gae 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">
 $ (Document). Ready (fheidhm () {
 $ (". Dearbhaigh"). Cliceáil (fheidhm () {
 $ ("# Confirm")
 . CSS ({teimhneacht: 0.95})
 . FadeIn ()
 . Html ('<DIV> <DIV> <h1> Redirect </ h1> <p <cnaipe onClick = \ "location.href = \'' + $ (seo). Attr (" href ") +' \ '\ "> Sea </ cnaipe> <button> NACH </ cnaipe> </ p> </ div> </ div>');
 ar ais go bréagach;
 });
 . $ ("# Confirm") Click (fheidhm () {$ (seo) FadeOut ();.});
 });
 </ Script>
 </ Comhlacht>
 </ Html>

Achoimre

Ag obair mar shampla, is féidir leat a fheiceáil anseo .

Ní dhéanann an réiteach seo sampla de cheangal ar gach na féidearthachtaí. Is féidir linn a leathnú an cód ionas go mbeadh tionchar acu ar an bhfoirm deimhniú, ba mhaith leat a sheoladh ansin an fhoirm a rialú, ar féidir a dhéanamh freisin ó laistigh jQuery. Is féidir leat freisin, ar bhonn an cód thuas a chruthú plugin for jQuery. Thig leat a phlé sa tuairimí a ghabhann leis an bpost.

Bí sociable, Comhroinn!

Hiontrálacha a bhaineann

Catagóirí: jQuery
Tags: , , , ,
«
»
Is féidir leat aon freagraí a leanúint chun an iontráil seo tríd an fotha RSS 2.0 . Is féidir leat scríobh freisin do chuid tuairimí féin , nó a nascadh leis an bpost seo ar do leathanach.
    • Obraz CAPTCHY
    Athnuaigh Íomhá
    *

    Cosaint spam ag WP-SpamFree