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

ናይ Bootstrap ኣካላት ብሓደስቲን ብሕታዊን ፕላጊናት ምስ jQueryEnder ን ዝሰርሑ ህይወት ኣምጽእዎም ።

← ናብ ገዛ ቡትስትራፕ ተመለስ

እዚ ፕላግ-ኢን እዚ ነቲ scrollspy (auto updating nav) ዝብል መስተጋብር ኣብ bootstrap topbar ንምውሳኽ እዩ።

ምውራድ

bootstrap-scrollspy.js ምጥቃም

  1. $ ( '#topbar' ). ስክሮልስፓይ ()

ምልክት ምግባር

ብቐሊሉ scrollspy ባህሪ ኣብ nav ንምውሳኽ፡ በቃ ነቲ data-scrollspyባህሪ ኣብቲ .topbar.

  1. <div class = "topbar" ዳታ-ስክሮልስፒ = "ስክሮልስፒ" > ... </div>

ኣገባባት

$().ስክሮልስፓይ()

ኣውቶማቲክ ናይ ምድህሳስ መጠወቒታት ብተጠቀምቲ ስክሮል ኣቀማምጣ የነቓቕሕ።

  1. $ ( 'ኣካል > .topbar' ). ስክሮልስፓይ ()

መተሓሳሰቢ Topbar anchor tags ዝፍታሕ id ዕላማታት ክህልዎም ኣለዎ። ንኣብነት a <a href="#home">home</a>ምስቲ ኣብ ዶም ዘሎ ነገር ከም <div id="home"></div>.

.scrollSpy('ምሕዳስ')

እቲ ስክሮልስፒ ንኣፈጻጽማ ዝኸውን ናይ nav መጠወቒታትን ናይ ክፍሊ ምትሕብባራትን ይዕቅብ። ነዚ መኽዘን ከተመሓይሾ እንተድኣ ኣድልዩካ (ዳይናሚክ ትሕዝቶ እንተሃልዩካ ክኸውን ይኽእል እዩ) ነዚ ናይ ምሕዳስ ሜላ ጥራይ ጸውዖ። ነቲ ናይ ዳታ ባህሪ ተጠቒምካ ነቲ ስክሮልስፒኻ ንምግላጽ እንተድኣ ተጠቒምካሉ፡ ኣብቲ ኣካል ሪፍሬሽ ጥራይ ደውል።

  1. $ ( 'ኣካል' ). scrollSpy ( 'ምሕዳስ' ) ።

ዲሞ

ኣብዚ ገጽ ዘሎ the topbar navigation ርአ።

እዚ ፕላግ-ኢን ንኹነታት መጠወቒ ንምምሕዳር ተወሳኺ ተግባር የቕርብ።

ምውራድ

bootstrap-buttons.js ብምጥቃም

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

ኣገባባት

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

ንናይ ምድፋእ ኩነታት ይቕይር። btn ተነቒሉ ዝብል መልክዕ ይህቦ።

መተሓሳሰቢdata-toggle ነቲ ባህሪ ብምጥቃም ናይ ሓደ መጠወቒ auto toggling ከተኽእሎ ትኽእል ኢኻ ።

  1. <መጠወቒ ክፍሊ = "btn" ዳታ-ምቕያር = "ምቕያር" > ... </መጠወቒ>

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

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

  1. <button class = "btn" data-loading-text = "ነገራት ይጽዕን ኣሎ..." > ... </button>

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

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

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

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

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

ዲሞ

እዚ ፕላግ-ኢን ቅልጡፍን ዳይናሚክን ናይ ትብን ከኒናን ተግባር ይውስኽ።

ምውራድ

bootstrap-tabs.js ምጥቃም

  1. $ ( '.tabs' ) ዝብል ጽሑፍ ኣሎ። ትቦታት ()

ምልክት ምግባር

data-tabsዝኾነ ጃቫስክሪፕት ከይጸሓፍካ ንሓደ ወይ data-pillsባህሪ ብምሃብ ጥራይ ንሓደ ትብ ወይ ከኒና ምድህሳስ ከተነቓቕሖ ትኽእል ኢኻ ።

  1. <ul class = "ትቦታት" ዳታ-ትቦታት = "ትቦታት" > ... </ul>

ኣገባባት

$().tabs ወይ $().ከኒናታት

ንዝተዋህበ መትሓዚ ናይ ትብን ከኒናን ተግባር የነቓቕሕ። Tab links ኣብቲ ሰነድ ንዘለዉ id's ክውከሱ ይግባእ።

  1. <ul class = "ታብስ" > ዝብል ጽሑፍ ኣሎ።
  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 id = "ፕሮፋይል" > ... </div> ዝብል ጽሑፍ ኣሎ።
  11. <div id = "መልእኽትታት" > ... </div>
  12. <div id = "ቅጥዕታት" > ... </div>
  13. </div> ዝብል ጽሑፍ ኣሎ።
  14.  
  15. <ስክሪፕት> ዝብል ጽሑፍ ኣሎ።
  16. $ ( ተግባር () { .
  17. $ ( '.tabs' ) ዝብል ጽሑፍ ኣሎ። ትቦታት ()
  18. }) ።
  19. </script> ዝብል ጽሑፍ ኣሎ።

ፍጻሜታት

ዝግጅት መግለፂ
ለውጢ እዚ ፍጻመ ኣብ ምቕያር ትብ ይትኩስ። ንጡፍ ትብን ነቲ ዝሓለፈ ንጡፍ ትብን ብቕደም ተኸተል ዕላማ event.targetንምግባርን ተጠቐም ።event.relatedTarget
  1. $ ( '#.tabs' ). bind ( 'ለውጢ' , ተግባር ( e ) {
  2. . ዕላማ // ዝተንቀሳቐሰ ትብ
  3. . relatedTarget // ዝሓለፈ ትብ
  4. }) ።

ዲሞ

ጥረ ዲኒም ምናልባት ዘይሰማዕካዮም ጂን ሓጺር ኦስቲን። 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.

Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.

Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

ኣብቲ ብጄሰን ፍሬም ዝተጻሕፈ ብሉጽ jQuery.tipsy ፕላግ-ኢን ዝተመርኮሰ፤ twipsy ዝተመሓየሸ ስሪት እዩ፣ ኣብ ምስልታት ዘይምርኮስ፣ ንኣኒሜሽን css3፣ ንመኽዘን ኣርእስቲ ድማ data-attributes ዝጥቀም!

ምውራድ

bootstrap-twipsy.js ምጥቃም

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

ኣማራጺታት

ሽም ዓይነት ትሑዝ መግለፂ
ህያው ምግባር ቡልያን ዝብል እዩ። ሓቂ ኣብቲ tooltip css fade ዝብል ምስግጋር ተግባራዊ ግበር
delayIn ዝብል ቃል ንረክብ ቑጽሪ 0. ቅድሚ tooltip ምርኣይ ምድንጓይ (ms)
delayOut ዝብል ጽሑፍ ኣሎ። ቑጽሪ 0. ቅድሚ ምሕባእ ምድንጓይ ምኽሪ መሳርሒ (ms)
fallback ዝብል ቃል ንረክብ ገመድ '' ። ኣርእስቲ ምኽሪ መሳርሒ ኣብ ዘይብሉ እዋን ክትጥቀመሉ እትኽእል ጽሑፍ
ምምዳብ ገመድ 'ኣብ ልዕሊ' ከመይ ጌርና ነቲ ናይ መሳርሒ ምኽሪ ነቐምጦ - ኣብ ላዕሊ | ኣብ ታሕቲ | ጸጋም | ትኽክል
html ዝብል ጽሑፍ ኣሎ። ቡልያን ዝብል እዩ። ሓሶት ኣብ ውሽጢ tooltip html ትሕዝቶ የፍቅድ
ንበር ቡልያን ዝብል እዩ። ሓሶት ኣብ ክንዲ ውልቃዊ ኣተሓሕዛ ፍጻመታት ውክልና ፍጻመ ተጠቐም
ኦፍሴት ዝበሃል ምዃኑ’ዩ። ቑጽሪ 0. ፒክሰል ኦፍሴት ናይ መሳርሒ ምኽሪ ካብ ዕላማ ባእታ
ርእሲ ሕብረ ቃላት፣ ተግባር 'ርእሲ' ጽሑፍ ኣርእስቲ ንምውሳድ ዝሕግዝ ባህሪ ወይ ሜላ
ምልዕዓል ገመድ 'hover' ዝብል ጽሑፍ ኣሎ። ከመይ ጌሩ tooltip ይጅምር - hover | ትኹረት | ናይ ኢድ
ቅጥዒ ገመድ [ነባሪ ምልክት]። ንሓደ twipsy ንምቕራጽ ዝጥቀመሉ html template።

መተሓሳሰቢ ውልቃዊ twipsy instance ኣማራጺታት ብኣማራጺ ብመንገዲ ኣጠቓቕማ ዳታ ባህርያት ክግለጹ ይኽእሉ።

  1. <a href = "#" data-placement = "ኣብ ታሕቲ" rel = 'twipsy' title = 'ገለ ኣርእስቲ ጽሑፍ' > ጽሑፍ </a>

ኣገባባት

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

twipsy handler ምስ ሓደ ናይ ባእታ እኽብካብ የተሓሕዞ።

.twipsy('ኣርእዩ')

ሓደ ባእታታት ትዊፕሲ ይገልጽ።

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

.twipsy('ሕባእ')

ሓደ ባእታታት ትዊፕሲ ይሓብእ።

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

.twipsy(ሓቂ) .

ናይ elements twipsy class instance ይመልስ።

  1. $ ( '#ባእታ' ). twipsy ( ሓቂ ) ።

ኣስተውዕል ከም ኣማራጺ፡ እዚ ብ $().data('twipsy').

ዲሞ

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

እቲ popover plugin ኣብ መተግበሪኻ popovers ንምውሳኽ ቀሊል መተሓላለፊ ይህብ። ንሱ ን bootstrap-twipsy.js ፕላግ-ኢን የናውሖ፣ ስለዚ ኣብ ፕሮጀክትካ ፖፖቨርስ ከተካትት ከለኻ ነቲ ፋይል እውን ምሓዝካ ኣረጋግጽ!

መተሓሳሰቢ ቅድሚ bootstrap-popover.js bootstrap-twipsy.js ፋይል ከተካትት ኣለካ።

ምውራድ

bootstrap-popover.js ምጥቃም

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

ኣማራጺታት

ሽም ዓይነት ትሑዝ መግለፂ
ህያው ምግባር ቡልያን ዝብል እዩ። ሓቂ ኣብቲ tooltip css fade ዝብል ምስግጋር ተግባራዊ ግበር
delayIn ዝብል ቃል ንረክብ ቑጽሪ 0. ቅድሚ tooltip ምርኣይ ምድንጓይ (ms)
delayOut ዝብል ጽሑፍ ኣሎ። ቑጽሪ 0. ቅድሚ ምሕባእ ምድንጓይ ምኽሪ መሳርሒ (ms)
fallback ዝብል ቃል ንረክብ ገመድ '' ። ኣርእስቲ ምኽሪ መሳርሒ ኣብ ዘይብሉ እዋን ክትጥቀመሉ እትኽእል ጽሑፍ
ምምዳብ ገመድ 'ትኽክል' ከመይ ጌርና ነቲ ናይ መሳርሒ ምኽሪ ነቐምጦ - ኣብ ላዕሊ | ኣብ ታሕቲ | ጸጋም | ትኽክል
html ዝብል ጽሑፍ ኣሎ። ቡልያን ዝብል እዩ። ሓሶት ኣብ ውሽጢ tooltip html ትሕዝቶ የፍቅድ
ንበር ቡልያን ዝብል እዩ። ሓሶት ኣብ ክንዲ ውልቃዊ ኣተሓሕዛ ፍጻመታት ውክልና ፍጻመ ተጠቐም
ኦፍሴት ዝበሃል ምዃኑ’ዩ። ቑጽሪ 0. ፒክሰል ኦፍሴት ናይ መሳርሒ ምኽሪ ካብ ዕላማ ባእታ
ርእሲ ሕብረ ቃላት፣ ተግባር 'ርእሲ' ጽሑፍ ኣርእስቲ ንምውሳድ ዝሕግዝ ባህሪ ወይ ሜላ
ትሕዝቶ ሕብረ ቃላት፣ ተግባር 'ዳታ-ትሕዝቶ'። ትሕዝቶ ጽሑፍ ንምውሳድ ዝሕግዝ ሕብረ ቃላት ወይ ሜላ። ዝኾነ እንተዘይተዋሂቡ፡ ትሕዝቶ ካብ ዳታ-ትሕዝቶ ባህሪ ክመጽእ እዩ።
ምልዕዓል ገመድ 'hover' ዝብል ጽሑፍ ኣሎ። ከመይ ጌሩ tooltip ይጅምር - hover | ትኹረት | ናይ ኢድ
ቅጥዒ ገመድ [ነባሪ ምልክት]። ንፖፖቨር ንምቕራብ ዝጥቀመሉ ናይ html ቅጥዒ።

መተሓሳሰቢ ውልቃዊ popover instance ኣማራጺታት ብኣማራጺ ብመንገዲ ኣጠቓቕማ ዳታ ባህርያት ክግለጹ ይኽእሉ።

  1. <a data-placement = "ኣብ ታሕቲ" href = "#" ክፍሊ = "btn ሓደጋ" rel = "popover" > ጽሑፍ </a>

ኣገባባት

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

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

.popover('ኣርእዩ')

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

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

.popover('ሕባእ')

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

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

ዲሞ

ንፖፖቨር ዝኸውን ተንሳፈፍ

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

ምውራድ

bootstrap-alerts.js ምጥቃም

  1. $ ( ".መጠንቀቕታ-መልእኽቲ" ). መጠንቀቕታ ()

ምልክት ምግባር

በቃ ኣብ data-alertናይ መጠንቀቕታ መልእኽትታትካ ብኣውቶማቲክ ናይ ቀረባ ተግባር ንኽህልዎም ሓደ ባህሪ ወስኸሎም።

ኣማራጺታት

ሽም ዓይነት ትሑዝ መግለፂ
መምረጺ ገመድ '.ዕፁው' ንሓደ መጠንቀቕታ ንምዕጻው እንታይ ዓይነት መምረጺ ዕላማ ምግባር።

ኣገባባት

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

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

.alert('ዕጾ')

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

  1. $ ( ".መጠንቀቕታ-መልእኽቲ" ). alert ( 'ዕጾ' ) ።

ዲሞ

×

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

×

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