ጃቫስክሪፕት ን ቡትስትራፕ

ናይ Bootstrap ኣካላት ህይወት ኣምጽእዎም-ሕጂ ምስ 12 ብሕታዊ jQuery ፕላጊናት።

ሞዳላት

ስሉጥ፡ ግን ከኣ ተዓጻጻፊ፡ ነቲ ባህላዊ ጃቫስክሪፕት ሞዳል ፕላግ-ኢን ብውሑድ ዘድሊ ተግባርን በሊሕ ነባሪታትን ጥራይ ምውሳድ።

ድሮፕዳውንድስ

ዳርጋ ኣብ ዝኾነ ነገር ኣብ ቡትስትራፕ በዚ ቀሊል ፕላግ-ኢን ንቑልቁል ዝወርድ ምልክታታት ምውሳኽ። ቡትስትራፕ ምሉእ ንቑልቁል ዝወርድ ዝርዝር ደገፍ ኣብ navbar, tabs, ከምኡውን ከኒናታት ኣለዎ።

ስክሮልስፒ

ኣብ ናቭባርካ ዝርከቡ መላግቦታት ብኣውቶማቲክ ንምዕራፍ scrollspy ተጠቐም እሞ ኣብ ቦታ ስክሮል ተመርኲስካ ነቲ ናይ ሕጂ ንጡፍ መላግቦ ንምርኣይ።

ዝቕየሩ ትቦታት

ነዚ ፕላግ-ኢን ተጠቐመሉ፡ ትቦታትን ከኒናታትን ብመንገዲ ጣብያታት ናይ ከባብያዊ ትሕዝቶታት ክቕይሩ ብምፍቃድ ዝያዳ ጠቐምቲ ንምግባር።

ምኽሪ መሳርሒታት

ሓድሽ ምውሳድ ኣብ jQuery Tipsy ፕላግ-ኢን፣ Tooltips ኣብ ምስልታት ኣይምርኮሱን እዮም-ንኣኒሜሽን CSS3 ከምኡውን ንከባብያዊ ኣርእስቲ መኽዘን ዳታ-ባህርያት ይጥቀሙ።

ፖፖቨርስ *

ንኣሽቱ ምድብላቕ ትሕዝቶታት፡ ከምቲ ኣብ iPad ዘሎ፡ ኣብ ዝኾነ ባእታ ካልኣዊ ሓበሬታ ንምቕማጥ ወስኸሉ።

* Tooltips ክካተት ይጠልብ

ናይ መጠንቀቕታ መልእኽትታት

እቲ ናይ መጠንቀቕታ ፕላግ-ኢን ኣብ መጠንቀቕታታት ናይ ቀረባ ተግባር ንምውሳኽ ዝሕግዝ ንእሽቶ ክፍሊ እዩ።

መጠወቒታት

ብመጠወቒታት ዝያዳ ግበር። ቁጽጽር መጠወቒ ይገልጽ ወይ ጉጅለታት መጠወቒታት ንዝያዳ ኣካላት ከም መሳርሒታት ባር ይፈጥር።

ፈረሰ

መሰረታዊ ቅዲታትን ተዓጻጻፊ ደገፍን ንዝተዓጻጸፉ ኣካላት ከም ኣኮርድዮንን ናቪጌሽንን ርኸብ።

ካሮሰል

ናይ ዝኾነ ትሕዝቶ መስተጋብራዊ ስላይድ ሾው ትሕዝቶ ክትህብ እትደልዮ መዘናግዒ ፍጠረ።

ንቕድሚት ጽሓፍ

መሰረታዊ ዝኾነ ብቐሊሉ ዝዝርጋሕ ፕላግ-ኢን ብቕልጡፍ ውቁብ typeaheads ምስ ዝኾነ ቅጥዒ ጽሑፍ ምእታው ንምፍጣር።

መሰጋገሪታት * .

ንቐሊል ናይ ምስግጋር ውጽኢታት፡ bootstrap-transition.js ሓንሳብ ኣካትት ኣብ ሞዳላት ክትስሕብ ወይ መጠንቀቕታታት ክትሃስስ።

* ኣብ ፕላጊናት ንዝግበር ኣኒሜሽን የድሊ

ርእሲ ንላዕሊ! ኩሎም ናይ ጃቫስክሪፕት ፕላጊናት ናይ jQuery ናይ መወዳእታ ስሪት የድልዮም።

ብዛዕባ ሞዳላት

ስሉጥ፡ ግን ከኣ ተዓጻጻፊ፡ ነቲ ባህላዊ ጃቫስክሪፕት ሞዳል ፕላግ-ኢን ብውሑድ ዘድሊ ተግባርን በሊሕ ነባሪታትን ጥራይ ምውሳድ።

ፋይል ኣውርድ

ስታትቲካዊ ኣብነት

ኣብ ታሕቲ ብስታቲካዊ ኣገባብ ዝተሰርሐ ሞዳል ኣሎ።

ቀጥታዊ ዲሞ

ኣብ ታሕቲ ዘሎ ቁልፊ ብምጥዋቕ ብመንገዲ javascript ንሓደ ሞዳል ምቕያር። ንታሕቲ ተንሳፊፉ ካብ ላዕሊ ገጽ ክሃስስ እዩ።

ዲሞ ሞዳል ምጅማር

ቡትስትራፕ-ሞዳል ብምጥቃም

ብመንገዲ ጃቫስክሪፕት ናብቲ ሞዳል ደውሉ፤

  1. $ ( '#ሞዳለይ' ). ሞዳል ( ኣማራጺታት ) .

ኣማራጺታት

ሽም ዓይነት ትሑዝ መግለፂ
ድሕረ ባይታ ቡልያን ዝብል እዩ። ሓቂ ሞዳል-ባክድሮፕ ባእታ ዘጠቓልል እዩ። ከም ኣማራጺ static፡ ነቲ ሞዳል ኣብ ጠውቂ ዘይዓጽዎ ድሕረ ባይታ ግለጽ።
ቁልፊ ሰሌዳ ቡልያን ዝብል እዩ። ሓቂ መፍትሕ ምህዳም ምስ ዝጽቀጥ ነቲ ሞዳል ይዓጽዎ።
አርኢ ቡልያን ዝብል እዩ። ሓቂ ሞዳል ኣብ ዝጅምረሉ እዋን የርኢ።

ምልክት ምግባር

ኣብ ገጽካ ሞዳላት ብቐሊሉ ከተነቓቕሖ ትኽእል ኢኻ፡ ሓንቲ መስመር ጃቫስክሪፕት ከይጸሓፍካ። በቃ data-toggle="modal"ኣብ ሓደ ተቖጻጻሪ ባእታ ምስ a data-target="#foo"ወይ href="#foo"ምስ ሞዳል ባእታ id ዝሰማማዕ ኣቐምጥ፣ ምስ ጠወቕካ ድማ ሞዳልካ ክጅምር እዩ።

ከምኡ’ውን፡ ኣማራጺታት ኣብ ሞዳል ምሳሌኻ ንምውሳኽ፡ ከም ተወሳኺ ባህርያት ዳታ ኣብቲ ናይ ምቁጽጻር ባእታ ወይ ኣብቲ ሞዳል ምልክት ባዕሉ ጥራይ ኣካትቶም።

  1. <a class = "btn" data-toggle = "ሞዳል" href = "#myModal" > ሞዳል ምጅማር </a>
  1. <div class = "ሞዳል ምሕባእ" id = "myModal" >
  2. <div class = "ሞዳል-ርእሲ" >
  3. < ዓይነት መጠወቒ = "መጠወቒ" ክፍሊ = "ዕጾ" data-dismiss = "ሞዳል" > × </መጠወቒ>
  4. <h3> ሞዳል ርእሲ </h3>
  5. </div> ዝብል ጽሑፍ ኣሎ።
  6. <div class = "ሞዳል-ኣካል" >
  7. <p> ሓደ ረቂቕ ኣካል... </p>
  8. </div> ዝብል ጽሑፍ ኣሎ።
  9. <div class = "ሞዳል-እግሪ" >
  10. <a href = "#" class = "btn" data-dismiss = "ሞዳል" > ምዕጻው </a>
  11. <a href = "#" class = "btn btn-primary" > ለውጢ ምዕቃብ </a>
  12. </div> ዝብል ጽሑፍ ኣሎ።
  13. </div> ዝብል ጽሑፍ ኣሎ።
ርእሲ ንላዕሊ! ሞዳልካ ንውሽጥን ደገን ህያው ክኸውን እንተደሊኻ .fade፡ ኣብቲ ባእታ ሓደ ክፍሊ ጥራይ ወስኸሉ .modal(ነዚ ብተግባር ንምርኣይ ኣብቲ ዲሞ ተወከስ) እሞ bootstrap-transition.js ኣካትት።

ኣገባባት

.modal(ኣማራጺታት) .

ትሕዝቶኻ ከም ሞዳል የነቓቕሖ። ሓደ ኣማራጺ ኣማራጺታት ይቕበል object.

  1. $ ( '#ሞዳለይ' ). ሞዳል ({
  2. keyboard : ሓሶት እዩ።
  3. }) ።

.modal('ምቕያር')

ብኢድ ንሓደ ሞዳል ይቕይሮ።

  1. $ ( '#ሞዳለይ' ). ሞዳል ( 'ምቕያር' ) ።

.modal('ኣርእዩ')

ብኢድ ሞዳል ይኸፍት።

  1. $ ( '#ሞዳለይ' ). modal ( 'ምርኣይ' ) ።

.modal('ሕባእ')

ብኢድ ንሓደ ሞዳል ይሓብኦ።

  1. $ ( '#ሞዳለይ' ). ሞዳል ( 'ሕባእ' ) ።

ፍጻሜታት

ቡትስትራፕ ሞዳል ክላስ ንገለ ውሑዳት ፍጻመታት ናብ ሞዳል ተግባር ምትእስሳር የቃልዕ።

ዝግጅት መግለፂ
አርኢ showእዚ ፍጻመ እዚ እቲ ናይ ምሳሌ ሜላ ምስ ዝጽዋዕ ብቕጽበት ይትኩስ ።
ተራእዩ እዩ። እዚ ክስተት ዝትኮስ እቲ ሞዳል ንተጠቃሚ ርኡይ ምስ ዝኸውን እዩ (css ምስግጋራት ክሳብ ዝዛዘም ክጽበ እዩ)።
ተሓባእ እዚ ፍጻመ እዚ እቲ ናይ hideምሳሌ ሜላ ምስ ተጸውዐ ብቕጽበት ይትኮስ።
ሕቡእ እዚ ክስተት ዝትኮስ እቲ ሞዳል ካብ ተጠቃሚ ምሕባእ ምስ ወድአ እዩ (css ምስግጋራት ክሳብ ዝዛዘም ክጽበ እዩ)።
  1. $ ( '#ሞዳለይ' ). on ( 'ሕቡእ' , ተግባር () {
  2. // ገለ ግበር...
  3. }) ።

እቲ ScrollSpy ዝበሃል ፕላግ-ኢን ኣብ ስክሮል ኣቀማምጣ ተመርኲስካ ንኣውቶማቲክ ዕላማታት nav ንምዕራፍ ዝዓለመ እዩ።

ፋይል ኣውርድ

ኣብነት navbar ምስ scrollspy

ኣብ ታሕቲ ዘሎ ቦታ ስክሮል ብምግባር ነቲ ናይ ምድህሳስ ምዕባለ ርኣዩ። እቶም ንቑልቁል ዝወርድ ንኡሳን ነገራት እውን ክጎልሑ እዮም። ፈትኖ!

@ረጒድ

ኣድ ሌጊንስ keytar, ብርንች id ስነ ጥበብ ፓርቲ dolor labore. ፒችፎርክ yr enim lo-fi ቅድሚ ምሻጦም qui. Tumblr ካብ ሕርሻ ናብ ጠረጴዛ መሰል ብሽክለታ ዝኾነ ይኹን። ኣኒም ከፊየህ ካርለስ ካርዲጋን። Velit seitan mcsweeney ናይ ስእሊ ዳስ 3 ዝብኢ ወርሒ irure. ኮስቢ ስዊተር ሎሞ ጂን ሓጺር ስረ፡ ዊልያምስበርግ ሁዲ ሚኒክ ኪ ምናልባት ብዛዕባኦም ኣይሰማዕኩምን ኢኹም et cardigan trust fund culpa biodiesel wes anderson aesthetic. ኒሂል ንቕሳት accusamus, cred ኢሮኒ ባዮዲዘል keffiyeh ስነ ጥበባዊ ኡላምኮ consequat.

@mdo ዝብል ጽሑፍ ኣሎ።

ቬንያም ማርፋ ጭሕሚ ስኬትቦርድ፣ adipisicing ፉጂያት ቬሊት ፒችፎርክ ጭሕሚ። ፍሪጋን ጭሕሚ ኣሊክዋ ኩፒዳታት mcsweeney's vero. ኩፒዳታት ኣርባዕተ ሎኮ ኒሲ፡ ኢኣ ሄልቨቲካ ኑላ ካርለስ። ንቕሳት ዘለዋ ኮስቢ ስዊተር ናይ መግቢ ናይ ጽዕነት መኪና፣ mcsweeney's quis non freegan vinyl. ሎ-ፋይ ዌስ ኣንደርሰን +1 ሳርቶርያል። ካርለስ ዘይ ስነ-ጽባቐ ምውስዋስ ኣካላት quis gentrify. ብሩክሊን adipisicing ኢደ ጥበብ ቢራ ምክትል keytar deserunt.

ሓደ

ኦካኤካት ኮሞዶ ኣሊክዋ ዲሌክቱስ. ፋፕ ኢደ ጥበብ ቢራ deserunt ስኬትቦርድ ea. ሎሞ ብሽክለታ መሰል adipisicing banh mi, velit ea sunt ቀጻሊ ደረጃ locavore ንጽል-መበቆል ቡን ኣብ ማግና ቬኒያም. ልዑል ህይወት id ቪኒል, መቓልሕ ፓርክ consequat quis aliquip banh mi ፒችፎርክ. ቨሮ ቪኤችኤስ ኤስት ኣዲፒሲሲንግ። Consectetur nisi DIY ዝተሓተ መልእኽተኛ ቦርሳ። Cred ex ኣብ, ዘላቒ delectus consectetur ፋኒ ፓክ iphone.

ክልተ

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa መልእኽተኛ ቦርሳ ማርፋ ዝኾነ ይኹን ዲሌክቱስ መግቢ ናይ ጽዕነት መኪና. ሳፒየንተ ሲንት id ኣሱመንዳ። Locavore sed helvetica cliche irony, ነጎዳታት ምናልባት ዘይሰማዕካዮም consequat hoodie ካብ ግሉተን ነጻ ዝኾነ lo-fi fap aliquip. Labore elit placeat ቅድሚ ምሻጦም ምውዳኦም፣ ቴሪ ሪቻርድሰን proident ብርንች nesciunt quis cosby ስዊተር pariatur keffiyeh ut helvetica ስነ ጥበባዊ. ካርዲጋን ኢደ ጥበብ ቢራ seitan ድሉው velit. ቪኤችኤስ ቻምብራይ ላቦሪስ ቴምፖር ቬኒያም። ኣኒም ሞሊት ሚኒም ኮሞዶ ኡላምኮ ነጎዳታት።


bootstrap-scrollspy.js ምጥቃም

ብመንገዲ ጃቫስክሪፕት ናብ ስክሮልስፒ ደውሉ፤

  1. $ ( '#ናቭባር' ). ስክሮልስፒ ()

ምልክት ምግባር

ብቐሊሉ ስክሮልስፒ ባህሪ ኣብ ላዕለዋይ ባር ምድህሳስካ ንምውሳኽ፡ በቃ ኣብቲ ክትስልዮ data-spy="scroll"እትደሊ ባእታ ወስኸሉ (ብብዝሒ እዚ ኣካል ምኾነ)።

  1. <body data-spy = "ስክሮል" > ... </body> ዝብል ጽሑፍ ኣሎ።
ርእሲ ንላዕሊ! ናቭባር ሊንክታት ዝፍታሕ id ዕላማታት ክህልዎም ኣለዎ። ንኣብነት a <a href="#home">home</a>ምስቲ ኣብ ዶም ዘሎ ነገር ከም <div id="home"></div>.

ኣገባባት

.scrollspy('ምሕዳስ')

scrollspy ምስ ምውሳኽ ወይ ምእላይ ባእታታት ካብ DOM ተተሓሒዙ ክትጥቀመሉ ከለኻ፡ ነቲ ናይ ምሕዳስ ሜላ ከምዚ ጌርካ ክትጽውዖ ከድልየካ እዩ፤

  1. $ ( '[ዳታ-ስላይ="ስክሮል"]' ). ነፍሲ ወከፍ ( ተግባር () { .
  2. var $spy = $ ( እዚ ) ዝብል ጽሑፍ ኣሎ። scrollspy ( 'ምሕዳስ' ) ።
  3. });

ኣማራጺታት

ሽም ዓይነት ትሑዝ መግለፂ
ኦፍሴት ዝበሃል ምዃኑ’ዩ። ቑጽሪ 10. ኣቀማምጣ ስክሮል ኣብ እትሕሰብሉ እዋን ካብ ላዕሊ ክትቅይሩ እትኽእሉ ፒክሰላት።

ፍጻሜታት

ዝግጅት መግለፂ
activate ምግባር እዚ ፍጻመ እዚ ሓድሽ ኣቕሓ ብስክሮልስፒ ኣብ ዝንቀሳቐሰሉ እዋን ይትኩስ።

እዚ ፕላግ-ኢን ብመንገዲ ውሽጣዊ ትሕዝቶ ንምስግጋር ቅልጡፍን ዳይናሚክን ትብን ከኒናን ተግባር ይውስኽ።

ፋይል ኣውርድ

ኣብነት ትቦታት

ኣብ መንጎ ሕቡኣት ሸነኻት ንምቕያር ኣብ ታሕቲ ዘለዉ ትቦታት ጠውቕ፣ ዋላ ብመንገዲ ንቑልቁል ዝወርድ ምልክታታት።

ጥረ ዲኒም ምናልባት ዘይሰማዕካዮም ጂን ሓጺር ኦስቲን። Nesciunt ቶፉ stumptown aliqua, ሬትሮ ሲንት ማስተር ጽሬት. ጭሕሚ ክሊሸ ግዝያዊ፡ ዊልያምስበርግ ካርለስ ቪጋን ሄልቨቲካ። Reprehenderit ስጋ ሬትሮ ኬፊየህ ሕልሚ ዝሕዝ ሲንት. ኮስቢ ስዊተር eu banh mi, qui irure ቴሪ ሪቻርድሰን ኤክስ ስኩዊድ. Aliquip placeat ሳልቭያ ሲሉም ኣይፎን. Seitan aliquip quis ካርዲጋን ኣሜሪካዊ ኣልባሳት፣ ስጋ ዝሸይጥ voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


bootstrap-tab.js ብምጥቃም

ብመንገዲ ጃቫስክሪፕት ንዝተፈላለዩ ትቦታት ኣንቅሑ (ነፍሲ ወከፍ ትብ ብውልቂ ክነጥፍ ኣለዎ)፤

  1. $ ( '#ናይ ታብ ኣ' ). ጠውቕ ( ተግባር ( e ) { .
  2. . ምክልኻልነባሪ ();
  3. $ ( እዚ ). tab ( 'ኣርእይ' );
  4. }) ።

ንውልቀ ትብታት ብዝተፈላለየ መንገዲ ከተነቓቕሖም ትኽእል ኢኻ፤

  1. $ ( '#myTab ሓደ[href="#ፕሮፋይል"]' ). tab ( 'ኣርእይ' ); // ትብ ብስም ምረጽ
  2. $ ( '#myTab a:ቀዳማይ' ). tab ( 'ኣርእይ' ); // ቀዳማይ ትብ ምረጽ
  3. $ ( '#myTab a:ናይ መወዳእታ' ). tab ( 'ኣርእይ' ); // ናይ መወዳእታ ትብ ምረጽ
  4. $ ( '#myTab li:eq(2) a' ). tab ( 'ኣርእይ' ); // ሳልሳይ ትብ ምረጽ (0-indexed)

ምልክት ምግባር

ዝኾነ ጃቫስክሪፕት ከይጸሓፍካ ንሓደ ባእታ ብምግላጽ data-toggle="tab"ወይ data-toggle="pill"ኣብ ልዕሊ ሓደ ባእታ ጥራይ ብምግላጽ ንሓደ ትብ ወይ ከኒና ምድህሳስ ከተነቓቕሖ ትኽእል ኢኻ። navነቲ and nav-tabsclasses ኣብቲ ትብ ምውሳኽ ነቲ ulbootstrap tab styling ክትግብሮ እዩ።

  1. <ul class = "nav nav-tabs" > ዝብል ጽሑፍ ኣሎ።
  2. <li><a href = "#ገዛ" data-toggle = "ትብ" > ገዛ </a></li>
  3. <li><a href = "#ፕሮፋይል" data-toggle = "ትብ" > ፕሮፋይል </a></li>
  4. <li><a href = "#messages" data-toggle = "ትብ" > መልእኽትታት </a></li>
  5. <li><a href = "#settings" data-toggle = "ትብ" > ቅጥዕታት </a></li>
  6. </ul> ዝብል ጽሑፍ ኣሎ።

ኣገባባት

$().tab ዝብል ጽሑፍ ኣሎ።

ንሓደ ናይ ትብ ባእታን ትሕዝቶ መትሓዚን የነቓቕሕ። Tab ኣብ DOM ወይ a data-targetወይ ንሓደ hrefመትሓዚ መስመር ዕላማ ዝገበረ ክህልዎ ኣለዎ።

  1. <ul class = "nav nav-tabs" id = "ናይ ናተይ ትብ" >
  2. <li class = "ንጡፍ" ><a href = "#ገዛ" > ገዛ </a></li>
  3. <li><a href = "#ፕሮፋይል" > ፕሮፋይል </a></li>
  4. <li><a href = "#messages" > መልእኽትታት </a></li>
  5. <li><a href = "#settings" > ቅጥዕታት </a></li>
  6. </ul> ዝብል ጽሑፍ ኣሎ።
  7.  
  8. <div class = "ትሕዝቶ-ትብ" >
  9. <div class = "ታብ-ፓን ንጡፍ" id = "ገዛ" > ... </div>
  10. <div class = "tab-pane" id = "ፕሮፋይል" > ... </div> ዝብል ጽሑፍ ኣሎ።
  11. <div class = "tab-pane" id = "መልእኽትታት" > ... </div>
  12. <div class = "tab-pane" id = "ቅጥዕታት" > ... </div>
  13. </div> ዝብል ጽሑፍ ኣሎ።
  14.  
  15. <ስክሪፕት> ዝብል ጽሑፍ ኣሎ።
  16. $ ( ተግባር () { .
  17. $ ( '#myTab a:ናይ መወዳእታ' ). tab ( 'ኣርእይ' );
  18. }) ።
  19. </script> ዝብል ጽሑፍ ኣሎ።

ፍጻሜታት

ዝግጅት መግለፂ
አርኢ እዚ ፍጻመ ኣብ tab show ይትኩስ፣ ግን ቅድሚ እቲ ሓድሽ tab ምርኣይ። ንጡፍ ትብን ነቲ ዝሓለፈ ንጡፍ ትብን (እንተሃልዩ) ብቕደም ተኸተል ዕላማ event.targetንምግባርን ተጠቐም ።event.relatedTarget
ተራእዩ እዩ። እዚ ፍጻመ ድሕሪ ሓደ ትብ ምርኣይ ኣብ tab show ይትኩስ። ንጡፍ ትብን ነቲ ዝሓለፈ ንጡፍ ትብን (እንተሃልዩ) ብቕደም ተኸተል ዕላማ event.targetንምግባርን ተጠቐም ።event.relatedTarget
  1. $ ( 'a[ዳታ-ምቕያር="ትብ"]' ). on ( 'ተራእዩ' , function ( e ) { .
  2. . ዕላማ // ዝተንቀሳቐሰ ትብ
  3. . relatedTarget // ዝሓለፈ ትብ
  4. }) ።

ብዛዕባ ምኽሪ መሳርሒታት

ብጄሰን ፍሬም ዝተጻሕፈ ብሉጽ jQuery.tipsy ፕላግ-ኢን ዝተደፋፍአ፤ ምኽሪ መሳርሒታት ዝተመሓየሸ ስሪት እዩ፣ ኣብ ምስልታት ዘይምርኮስ፣ ንኣኒሜሽን css3 ዝጥቀም፣ ንመኽዘን ከባብያዊ ኣርእስቲ ድማ ዳታ-ባህርያት ይጥቀሙ።

ፋይል ኣውርድ

ኣብነት ኣጠቓቕማ Tooltips

ምኽሪ መሳርሒታት ንምርኣይ ኣብዞም ኣብ ታሕቲ ዘለዉ ሊንክታት ምልክት ግበር፤

ስጡም ካምቻ next level keffiyeh ምናልባት ኣይሰማዕኩምን ትኾኑ። ፎቶ ዳስ ጭሕሚ ጥረ ዲኒም ሌተርፕረስ ቪጋን መልእኽተኛ ቦርሳ stumptown. ካብ ሕርሻ ናብ ጠረጴዛ seitan, mcsweeney's fixie ዘላቒ quinoa 8-bit ኣሜሪካዊ ኣልባሳት ቴሪ ሪቻርድሰን ቪኒል chambray ኣለዎም ። ጭሕሚ ስቱምፕታውን፣ ካርዲጋን ባንህ ሚ ሎሞ ነጎዳታት። ቶፉ ባዮዲዘል ዊልያምስበርግ ማርፋ፣ ኣርባዕተ ሎኮ ማክስዊኒ ናይ ምጽራይ ቪጋን ቻምብሬይ። A really ironic artisan whatever keytar , scenester ሕርሻ-ናብ-መኣዲ banksy ኦስቲን ትዊተር መትሓዚ freegan cred ጥረ ዲኒም ንጽል-መበቆል ቡን ቫይራል.


bootstrap-tooltip.js ብምጥቃም

ነቲ ናይ መሳርሒ ምኽሪ ብመንገዲ ጃቫስክሪፕት ኣበግሶ፤

  1. $ ( '#ኣብነት' ). tooltip ( ኣማራጺታት ) .

ኣማራጺታት

ሽም ዓይነት ትሑዝ መግለፂ
ኣኒሜሽን ምግባር ቡልያን ዝብል እዩ። ሓቂ ኣብቲ tooltip css fade ዝብል ምስግጋር ተግባራዊ ግበር
ምምዳብ string|ተግባር 'ላዕለዋይ' ከመይ ጌርና ንመሳርሒ ምኽሪ ነቐምጦ - top | ታሕተዋይ ክፋል | ጸጋም | ትኽክል
መምረጺ ገመድ ሓሶት ሓደ መምረጺ እንተተዋሂቡ፡ ናይ መሳርሒ ምኽሪ ነገራት ናብቶም ዝተገልጹ ዕላማታት ክውከሉ እዮም።
ርእሲ ሕብረ ቃላት | ተግባር '' ። `title` መለለዪ እንተዘይሃልዩ ነባሪ ዋጋ ኣርእስቲ
ምልዕዓል ገመድ 'hover' ዝብል ጽሑፍ ኣሎ። ከመይ ጌሩ tooltip ይጅምር - hover | ትኹረት | ናይ ኢድ
ምዝንጋዕ ቁጽሪ | ግኡዝ ነገር 0.

ምድንጓይ ምርኣይን ምሕባእን ናይ መሳርሒ ምኽሪ (ms) - ንዓይነት ማንዋል ትሪግር ኣይምልከትን እዩ።

ቁጽሪ እንተተቐሪቡ፡ ምድንጓይ ኣብ ክልቲኡ ምሕባእ/ምርኣይ ይትግበር

ኣቃውማ ኣቕሓ፤delay: { show: 500, hide: 100 }

ርእሲ ንላዕሊ! ኣማራጺታት ንውልቃዊ ምኽርታት መሳርሒታት ብኣማራጺ ብመንገዲ ኣጠቓቕማ ባህርያት ዳታ ክግለጹ ይኽእሉ።

ምልክት ምግባር

ብሰንኪ ኣፈጻጽማ ምኽንያት፡ እቶም Tooltipን Popover data-apisን opt in እዮም።ክትጥቀሙሎም እንተደሊኹም ናይ መምረጺ ኣማራጺ ጥራይ ግለጹ።

  1. <a href = "#" rel = "መሳርሒ ምኽሪ" title = "ቀዳማይ ምኽሪ መሳርሒ" > ኣብ ልዕለይ ምሕንባስ </a>

ኣገባባት

$().tooltip(ኣማራጺታት)

ንሓደ ናይ መሳርሒ ምኽሪ መትሓዚ ምስ ሓደ ናይ ባእታ እኽብካብ የተሓሕዞ።

.tooltip('ኣርእይ')

ናይ ሓደ ባእታ መሳርሒ ምኽሪ ይገልጽ።

  1. $ ( '#ባእታ' ). tooltip ( 'ኣርእዩ' )

.tooltip('ሕባእ')

ናይ ሓደ ባእታ መሳርሒ ምኽሪ ይሓብእ።

  1. $ ( '#ባእታ' ). tooltip ( 'ሕባእ' ) ።

.tooltip('ምቕያር')

ናይ ሓደ ባእታ መሳርሒ ምኽሪ ይቕይሮ።

  1. $ ( '#ባእታ' ). tooltip ( 'ምቕያር' )

ብዛዕባ ፖፖቨርስ

ንኣሽቱ ምድብላቕ ትሕዝቶታት፡ ከምቲ ኣብ iPad ዘሎ፡ ኣብ ዝኾነ ባእታ ካልኣዊ ሓበሬታ ንምቕማጥ ወስኸሉ።

* Tooltip ክሕወስ ይጠልብ

ፋይል ኣውርድ

ኣብነት ሆቨር ፖፖቨር

ነቲ ፖፖቨር ንምብጋስ ኣብ ልዕሊ እቲ መጠወቒ ምትእስሳር።


bootstrap-popover.js ምጥቃም

ብመንገዲ ጃቫስክሪፕት ፖፖቨርስ ኣንቅሕ፤

  1. $ ( '#ኣብነት' ). popover ( ኣማራጺታት ) .

ኣማራጺታት

ሽም ዓይነት ትሑዝ መግለፂ
ኣኒሜሽን ምግባር ቡልያን ዝብል እዩ። ሓቂ ኣብቲ tooltip css fade ዝብል ምስግጋር ተግባራዊ ግበር
ምምዳብ string|ተግባር 'ትኽክል' ከመይ ጌርና ነቲ ፖፖቨር ኣቐምጦ - ላዕለዋይ | ታሕተዋይ ክፋል | ጸጋም | ትኽክል
መምረጺ ገመድ ሓሶት ሓደ መምረጺ እንተተዋሂቡ፡ ናይ መሳርሒ ምኽሪ ነገራት ናብቶም ዝተገልጹ ዕላማታት ክውከሉ እዮም።
ምልዕዓል ገመድ 'hover' ዝብል ጽሑፍ ኣሎ። ከመይ ጌሩ tooltip ይጅምር - hover | ትኹረት | ናይ ኢድ
ርእሲ ሕብረ ቃላት | ተግባር '' ። `title` ባህሪ እንተዘይሃልዩ ነባሪ ዋጋ ኣርእስቲ
ትሕዝቶ ሕብረ ቃላት | ተግባር '' ። `data-content` ባህሪ እንተዘይሃልዩ ነባሪ ትሕዝቶ ዋጋ
ምዝንጋዕ ቁጽሪ | ግኡዝ ነገር 0.

ምድንጓይ ምርኣይን ምሕባእን ፖፖቨር (ms) - ንዓይነት ማንዋል ትሪግር ኣይምልከትን እዩ።

ቁጽሪ እንተተቐሪቡ፡ ምድንጓይ ኣብ ክልቲኡ ምሕባእ/ምርኣይ ይትግበር

ኣቃውማ ኣቕሓ፤delay: { show: 500, hide: 100 }

ርእሲ ንላዕሊ! ኣማራጺታት ንውልቀ ፖፖቨርስ ብኣማራጺ ብመንገዲ ኣጠቓቕማ ዳታ ባህርያት ክግለጹ ይኽእሉ።

ምልክት ምግባር

ብሰንኪ ኣፈጻጽማ ምኽንያት፡ እቶም Tooltipን Popover data-apisን opt in እዮም።ክትጥቀሙሎም እንተደሊኹም ናይ መምረጺ ኣማራጺ ጥራይ ግለጹ።

ኣገባባት

$().popover(ኣማራጺታት)

ንሓደ ባእታ ምትእኽኻብ ፖፖቨርስ የበግስ።

.popover('ኣርእዩ')

ሓደ ባእታታት ���ፖቨር ይገልጽ።

  1. $ ( '#ባእታ' ). popover ( 'ምርኣይ' ) ።

.popover('ሕባእ')

ሓደ ባእታታት ፖፖቨር ይሓብእ።

  1. $ ( '#ባእታ' ). popover ( 'ሕባእ' ) ።

.popover('ምቕያር')

ንሓደ ባእታታት ፖፖቨር ይቕይሮ።

  1. $ ( '#ባእታ' ). popover ( 'ምቕያር' ) ።

ብዛዕባ መጠንቀቕታታት

እቲ ናይ መጠንቀቕታ ፕላግ-ኢን ኣብ መጠንቀቕታታት ናይ ቀረባ ተግባር ንምውሳኽ ዝሕግዝ ንእሽቶ ክፍሊ እዩ።

ምውራድ

ኣብነት መጠንቀቕታታት

እቲ ናይ መጠንቀቕታታት ፕላግ-ኢን ኣብ ስሩዕ ናይ መጠንቀቕታ መልእኽትታት ይሰርሕ፣ ከምኡውን መልእኽትታት ይዓግት።

ቅዱስ ጓካሞል! Best check yo self, ብዙሕ ጽቡቕ ኣይትመስልን ኢኻ።

ኣየ ስናፕ! ጌጋ ረኺብካ!

እዚን እቲን ቀይርካ እንደገና ፈትን። ዱይስ ሞሊስ፡ ኤስት ኖን ኮሞዶ ሉክቱስ፡ ኒሲ ኤራት ፖርቲቶር ሊጉላ፡ ኤጌት ላሲንያ ኦዲዮ ሴም ኔክ ኤሊት። ክራስ ማቲስ ኮንሰክተተር ፑሩስ ኮፍ ኣሜት ፈርመንተም።

እዚ ስጉምቲ እዚ ውሰድ ወይ ድማ ከምዚ ግበሩ


bootstrap-alert.js ብምጥቃም

ብመንገዲ ጃቫስክሪፕት ንሓደ መጠንቀቕታ ምብራር ኣንቅሕ፤

  1. $ ( ".መጠንቀቕታ" ). መጠንቀቕታ ()

ምልክት ምግባር

በቃ ኣብቲ ናይ ምዕጻው መጠወቒኻ ወስኸሉ data-dismiss="alert"ብኣውቶማቲክ ናይ መጠንቀቕታ ምዕጻው ተግባር ክትህብ።

  1. <a class = "ዕጾ" data-dismiss = "መጠንቀቕታ" href = "#" > × </a>

ኣገባባት

$().መጠንቀቕታ()

ንኹሉ መጠንቀቕታታት ብቐረባ ተግባር ይጠቕልሎ። .fadeናትካ መጠንቀቕታታት ምስ ተዓጽዉ ህያው ንኽኾኑ፡ ድሮ እቲ and .inclass ከም ዝተተግበረሎም ኣረጋግጽ ።

.alert('ዕጾ')

ንሓደ መጠንቀቕታ ይዓጽዎ።

  1. $ ( ".መጠንቀቕታ" ). alert ( 'ዕጾ' ) ።

ፍጻሜታት

ናይ Bootstrap ናይ መጠንቀቕታ ክፍሊ ንውሑዳት ፍጻመታት ናብ ናይ መጠንቀቕታ ተግባር ምትእስሳር የቃልዕ።

ዝግጅት መግለፂ
ዕፁው closeእዚ ፍጻመ እዚ እቲ ናይ ምሳሌ ሜላ ምስ ዝጽዋዕ ብቕጽበት ይትኩስ ።
ተዓጽዩ። እዚ ፍጻመ እዚ እቲ መጠንቀቕታ ምስ ተዓጽወ እዩ ዝትኮስ (css ምስግጋራት ክሳብ ዝዛዘም ክጽበ እዩ)።
  1. $ ( '#ናተይ-መጠንቀቕታ' ). bind ( 'ዕጹው' , ተግባር () {
  2. // ገለ ግበር...
  3. }) ።

ብዝዕባ

ብመጠወቒታት ዝያዳ ግበር። ቁጽጽር መጠወቒ ይገልጽ ወይ ጉጅለታት መጠወቒታት ንዝያዳ ኣካላት ከም መሳርሒታት ባር ይፈጥር።

ፋይል ኣውርድ

ኣብነት ይጥቀም

ንሃገራትን ንመቐያየሪታትን ዝኸውን ናይ መጠወቒታት ፕላግ-ኢን ተጠቐም።

መንግስታዊ ዝኾነ
ንጽል ምቕያር
ሳጹን ምልክት
ሬድዮ

bootstrap-button.js ብምጥቃም

ብመንገዲ ጃቫስክሪፕት መጠወቒታት ኣንቅሑ፤

  1. $ ( '.nav-tabs' ) ዝብል ጽሑፍ ኣሎ። መጠወቒ ()

ምልክት ምግባር

ናይ ዳታ ባህርያት ናይቲ መጠወቒ ፕላግ-ኢን ዘይነጻጸል እዩ። ዝተፈላለዩ ዓይነታት ምልክት ኣብ ታሕቲ ዘሎ ኣብነት ኮድ ርአ።

  1. <!-- ኣብ ሓደ መጠወቒ ምቕያር ንምንቅስቓስ data-toggle="button" ወስኹ -->
  2. <button class = "btn" data-toggle = "መጠወቒ" > ንጽል ምቕያር </button>
  3.  
  4. <!-- ኣብ btn-group --> ንዝግበር ምቕያር ቅዲ ሳጹን ምልክት data-toggle="buttons-checkbox" ወስኸሉ።
  5. <div class = "btn-ጉጅለ" ዳታ-መቐያየሪ = "መጠወቒታት-መፈተሺ ሳጹን" >
  6. <button class = "btn" > ጸጋማይ </button> ዝብል ጽሑፍ ኣሎ።
  7. <button class = "btn" > ማእከላይ </button>
  8. <button class = "btn" > የማናይ </button>
  9. </div> ዝብል ጽሑፍ ኣሎ።
  10.  
  11. <!-- ኣብ btn-group --> ንዝግበር ምቕያር ቅዲ ሬድዮ data-toggle="buttons-radio" ምውሳኽ
  12. <div class = "btn-ጉጅለ" ዳታ-ምቕያር = "መጠወቒታት-ሬድዮ" >
  13. <button class = "btn" > ጸጋማይ </button> ዝብል ጽሑፍ ኣሎ።
  14. <button class = "btn" > ማእከላይ </button>
  15. <button class = "btn" > የማናይ </button>
  16. </div> ዝብል ጽሑፍ ኣሎ።

ኣገባባት

$().መጠወቒ('ምቕያር')

ንናይ ምድፋእ ኩነታት ይቕይር። ነቲ መጠወቒ ከም ዝተንቀሳቐሰ መልክዕ ይህቦ።

ርእሲ ንላዕሊ! data-toggleነቲ ባህሪ ብምጥቃም ናይ ሓደ መጠወቒ auto toggling ከተኽእሎ ትኽእል ኢኻ ።
  1. <መጠወቒ ክፍሊ = "btn" data-toggle = "መጠወቒ" > ... </መጠወቒ>

$().button('ምጽዓን')

ኩነታት መጠወቒ ናብ ምጽዓን የቐምጦ - መጠወቒ የሰናኽልን ጽሑፍ ናብ ምጽዓን ጽሑፍ ይቕይሮን። ጽሑፍ ምጽዓን ኣብቲ ናይ መጠወቒ ባእታ ነቲ ናይ ዳታ ባህሪ ተጠቒምካ ክግለጽ ኣለዎ data-loading-text

  1. <button class = "btn" data-loading-text = "ነገራት ይጽዕን ኣሎ..." > ... </button>
ርእሲ ንላዕሊ! ፋየርፎክስ ነቲ ዝተሰናኸለ ኩነታት ኣብ መላእ ጽዕነት ገጽ ይቕጽል ። ነዚ ዝኸውን መፍትሒ ምጥቃም ’ ዩ autocomplete="off"

$().መጠወቒ('ዳግመ ምትዕርራይ')

ኩነታት መጠወቒ ዳግማይ ይቕይሮ - ጽሑፍ ናብ መበቆላዊ ጽሑፍ ይቕይሮ።

$().መጠወቒ(ሕብረ ቃላት)

ንኹነታት መጠወቒ ዳግማይ ይቕይሮ - ጽሑፍ ናብ ዝኾነ ዳታ ዝተገልጸ ኩነታት ጽሑፍ ይቕይሮ።

  1. <button class = "btn" ዳታ-ምሉእ-ጽሑፍ = "ተዛዚሙ!" > ... </መጠወቒ>
  2. <ስክሪፕት> ዝብል ጽሑፍ ኣሎ።
  3. $ ( '.btn' ) ዝብል ጽሑፍ ኣሎ። መጠወቒ ( 'ምሉእ' )
  4. </script> ዝብል ጽሑፍ ኣሎ።

ብዝዕባ

መሰረታዊ ቅዲታትን ተዓጻጻፊ ደገፍን ንዝተዓጻጸፉ ኣካላት ከም ኣኮርድዮንን ናቪጌሽንን ርኸብ።

ፋይል ኣውርድ

* ናይ መሰጋገሪታት ፕላግ-ኢን ክሕወስ የድሊ።

ኣብነት ኣኮርድዮን

ነቲ collapse plugin ብምጥቃም፡ ቀሊል ኣኮርድዮን ቅዲ ዊጀት ሰሪሕና፤

Anim pariatur cliche reprehenderit, enim eiusmod ልዑል ህይወት accusamus ቴሪ ሪቻርድሰን ኣድ ስኩዊድ. 3 ዝብኢ ወርሒ officia aute, ዘይ cupidat ስኬትቦርድ dolor ብርንች. ናይ መግቢ ናይ ጽዕነት መኪና quinoa nesciunt laborum eiusmod. ብርንች 3 ዝብኢ ወርሒ tempor, sunt aliqua ዑፍ ኣብ ልዕሊኡ ኣቐሚጡ ስኩዊድ ንጽል-መበቆል ቡን nulla assumenda shoreditch et. ኒሂል ኣኒም ኬፊየህ ሄልቨቲካ፡ ኢደ ጥበብ ቢራ ላቦረ ዌስ ኣንደርሰን ክሬድ ነስቺውንት ሳፒየንተ ኢኣ ፕሮይደንት። ኣድ ቪጋን ብዘይካ ስጋ ምክትል ሎሞ። ሌጊንስ occaecat ኢደ ጥበብ ቢራ ሕርሻ-ናብ-ጠረጴዛ, ጥረ ዲኒም ስነ-ጽባቐ synth nesciunt ምናልባት ብዛዕባኦም accusamus labore ዘላቒ VHS ዘይሰማዕካዮም።
Anim pariatur cliche reprehenderit, enim eiusmod ልዑል ህይወት accusamus ቴሪ ሪቻርድሰን ኣድ ስኩዊድ. 3 ዝብኢ ወርሒ officia aute, ዘይ cupidat ስኬትቦርድ dolor ብርንች. ናይ መግቢ ናይ ጽዕነት መኪና quinoa nesciunt laborum eiusmod. ብርንች 3 ዝብኢ ወርሒ tempor, sunt aliqua ዑፍ ኣብ ልዕሊኡ ኣቐሚጡ ስኩዊድ ንጽል-መበቆል ቡን nulla assumenda shoreditch et. ኒሂል ኣኒም ኬፊየህ ሄልቨቲካ፡ ኢደ ጥበብ ቢራ ላቦረ ዌስ ኣንደርሰን ክሬድ ነስቺውንት ሳፒየንተ ኢኣ ፕሮይደንት። ኣድ ቪጋን ብዘይካ ስጋ ምክትል ሎሞ። ሌጊንስ occaecat ኢደ ጥበብ ቢራ ሕርሻ-ናብ-ጠረጴዛ, ጥረ ዲኒም ስነ-ጽባቐ synth nesciunt ምናልባት ብዛዕባኦም accusamus labore ዘላቒ VHS ዘይሰማዕካዮም።
Anim pariatur cliche reprehenderit, enim eiusmod ልዑል ህይወት accusamus ቴሪ ሪቻርድሰን ኣድ ስኩዊድ. 3 ዝብኢ ወርሒ officia aute, ዘይ cupidat ስኬትቦርድ dolor ብርንች. ናይ መግቢ ናይ ጽዕነት መኪና quinoa nesciunt laborum eiusmod. ብርንች 3 ዝብኢ ወርሒ tempor, sunt aliqua ዑፍ ኣብ ልዕሊኡ ኣቐሚጡ ስኩዊድ ንጽል-መበቆል ቡን nulla assumenda shoreditch et. ኒሂል ኣኒም ኬፊየህ ሄልቨቲካ፡ ኢደ ጥበብ ቢራ ላቦረ ዌስ ኣንደርሰን ክሬድ ነስቺውንት ሳፒየንተ ኢኣ ፕሮይደንት። ኣድ ቪጋን ብዘይካ ስጋ ምክትል ሎሞ። ሌጊንስ occaecat ኢደ ጥበብ ቢራ ሕርሻ-ናብ-ጠረጴዛ, ጥረ ዲኒም ስነ-ጽባቐ synth nesciunt ምናልባት ብዛዕባኦም accusamus labore ዘላቒ VHS ዘይሰማዕካዮም።

bootstrap-collapse.js ምጥቃም

ብመንገዲ ጃቫስክሪፕት ኣንቅሕ፤

  1. $ ( ".ምፍራስ" ). ምፍራስ () ።

ኣማራጺታት

ሽም ዓይነት ትሑዝ መግለፂ
ወላዲ መምረጺ ሓሶት እንተ መምረጺ ሽዑ ኩሎም ኣብ ትሕቲ እቲ ዝተወሰነ ወላዲ ዝዕጸፉ ባእታታት እዚ ዝዕጸፍ ኣቕሓ ምስ ዝረአ ክዕጸዉ እዮም። (ምስ ባህላዊ ባህሪ ኣኮርድዮን ዝመሳሰል)
toggle ምግባር ቡልያን ዝብል እዩ። ሓቂ ኣብ ምጽዋዕ ነቲ ዝዕጾ ባእታ ይቕይሮ

ምልክት ምግባር

በቃ add data-toggle="collapse"and a data-targetto element ብኣውቶማቲክ ቁጽጽር ናይ ሓደ ዝዕጾ ባእታ ንምምዳብ። እቲ data-targetባህሪ ነቲ ምዕጻፍ ንምትግባር ዝሕግዝ css መምረጺ ይቕበል። collapseነቲ ክፍሊ ኣብቲ ዝዕጾ ባእታ ምውሳኽካ ኣረጋግጽ ። ብነባሪ ክኽፈት እንተደሊኻ፡ ነቲ ተወሳኺ ክፍሊ ወስኸሉ in

  1. <button class = "btn btn-ሓደጋ" ዳታ-ምቕያር = "ምፍራስ" ዳታ-ዕላማ = "#ዲሞ" >
  2. ቀሊል ዝዕጸፍ
  3. </መጠወቒ>
  4.  
  5. <div id = "demo" class = "ኣብ ውሽጢ ምፍራስ" > ... </div>
ርእሲ ንላዕሊ! ኣኮርድዮን ዝመስል ምሕደራ ጉጅለ ናብ ዝዕጾ ቁጽጽር ንምውሳኽ፡ ነቲ ናይ ዳታ ባህሪ ወስኸሉ data-parent="#selector"። ነዚ ብተግባር ንምርኣይ ኣብቲ ዲሞ ተወከሱ።

ኣገባባት

.collapse(ኣማራጺታት) .

ትሕዝቶኻ ከም ዝዕጾ ባእታ ይንቀሳቐስ። ሓደ ኣማራጺ ኣማራጺታት ይቕበል object.

  1. $ ( '#ናተይ ዝዕጾ' ). ምፍራስ ({
  2. toggle : ሓሶት እዩ።
  3. }) ።

.collapse('ምቕያር')

ንሓደ ዝዕጾ ባእታ ናብ ዝተራእየ ወይ ዝተሓብአ ይቕይሮ።

.collapse('ኣርእይ')

ዝዕጾ ባእታ የርኢ።

.collapse('ሕባእ')

ዝዕጾ ባእታ ይሓብእ።

ፍጻሜታት

ናይ ቡትስትራፕ ናይ ምፍራስ ክፍሊ ንውሑዳት ፍጻመታት ንናይ ምፍራስ ተግባር ምትእስሳር የቃልዕ።

ዝግጅት መግለፂ
አርኢ showእዚ ፍጻመ እዚ እቲ ናይ ምሳሌ ሜላ ምስ ዝጽዋዕ ብቕጽበት ይትኩስ ።
ተራእዩ እዩ። እዚ ክስተት ዝትኮስ ሓደ ናይ ምፍራስ ባእታ ንተጠቃሚ ርኡይ ምስ ዝኸውን እዩ (css ምስግጋራት ክሳብ ዝዛዘም ክጽበ እዩ)።
ተሓባእ እዚ ፍጻመ እዚ እቲ hideሜላ ምስ ተጸውዐ ብቕጽበት ይትኮስ።
ሕቡእ እዚ ክስተት ዝትኮስ ሓደ ናይ ምፍራስ ባእታ ካብ ተጠቃሚ ምስ ተሓብአ እዩ (css ምስግጋራት ክሳብ ዝዛዘም ክጽበ እዩ)።
  1. $ ( '#ናተይ ዝዕጾ' ). on ( 'ሕቡእ' , ተግባር () {
  2. // ገለ ግበር...
  3. }) ።

ብዝዕባ

መሰረታዊ ዝኾነ ብቐሊሉ ዝዝርጋሕ ፕላግ-ኢን ብቕልጡፍ ውቁብ typeaheads ምስ ዝኾነ ቅጥዒ ጽሑፍ ምእታው ንምፍጣር።

ፋይል ኣውርድ

ኣብነት

ውጽኢት typeahead ንምርኣይ ኣብዚ ኣብ ታሕቲ ዘሎ ቦታ ምጽሓፍ ጀምር።


bootstrap-typeahead.js ብምጥቃም

ብመንገዲ javascript ናብ typeahead ደውሉ፤

  1. $ ( '.ቅድሚት ምጽሓፍ' ). typeahead () ዝብል ጽሑፍ ኣሎ።

ኣማራጺታት

ሽም ዓይነት ትሑዝ መግለፂ
ፍልፍል ስርርዕ [ ] ። እቲ ኣንጻሩ ክትሓትት ዘለካ ምንጪ ዳታ።
ኣቕሑ ቑጽሪ 8. ኣብቲ ንቑልቁል ዝወርድ ንርእዮ ዘለና max ቁጽሪ ነገራት።
መተሓላለፊ ተግባር ንዓቢ ፊደል ዘይተሃዋሲ ሓደ ሕቶ ምስ ሓደ ኣቕሓ ዝሰማማዕ እንተኾይኑ ንምፍላጥ ዝጥቀመሉ ሜላ። ሓደ ሞጎተ ይቕበል፣ እቲ itemኣንጻሩ ነቲ ሕቶ ዝፍትኖ። ነቲ ናይ ሕጂ ሕቶ ብ this.query. trueሕቶ ምትእስሳር እንተኾይኑ ቡልያን ምምላስ ።
መፍለዪ ተግባር ልክዕ ምትእስሳር፣ ንዓቢ ፊደል ዝምልከት፣ ንዓቢ
ንንእሽቶን ዝምልከት
ውጽኢት ኣውቶኮምፕሊት ንምስራዕ ዝጥቀመሉ ሜላ። ሓደ ሞጎተ ይቕበልን itemsስፍሓት ናይቲ typeahead instance ኣለዎ። ነቲ ናይ ሕጂ ሕቶ ብ this.query.
ድምቀት ዝህብ ተግባር ንኹሎም ነባሪ ምትእስሳራት የጉልሕ ውጽኢት ኣውቶኮምፕሊት ንምጉላሕ ዝጥቀመሉ ሜላ። ሓደ ሞጎተ ይቕበልን itemስፍሓት ናይቲ typeahead instance ኣለዎ። html ክመልስ ይግባእ።

ምልክት ምግባር

ንሓደ ባእታ ምስ typeahead ተግባር ንምምዝጋብ ናይ ዳታ ባህርያት ምውሳኽ።

  1. < ዓይነት ምእታው = "ጽሑፍ" data-provide = "typeahead" >

ኣገባባት

.typeahead(ኣማራጺታት) .

ንሓደ እታው ብ typeahead የበግሶ።