ናትና ሞዳል ፕላግ-ኢን ልዕሊ ቀጢን ምውሳድ ኣብቲ ባህላዊ ሞዳል js ፕላግ-ኢን እዩ፣ ፍሉይ ጥንቃቐ ብምግባር ኣብዚ ኣብ ትዊተር እንጠልቦ ዕርቃን ተግባር ጥራይ ንምሕዋስ።

ምውራድ

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

$ ( '#ናተይ-ሞዳል' ). ሞዳል ( ኣማራጺታት ) .

ኣማራጺታት

ሽም	ዓይነት	ትሑዝ	መግለፂ
ድሕረ ባይታ	ቡልያን ዝብል እዩ።	ሓሶት	ሞዳል-ባክድሮፕ ባእታ ዘጠቓልል እዩ።
ቁልፊ ሰሌዳ	ቡልያን ዝብል እዩ።	ሓሶት	escape key ምስ ዝጽቀጥ ነቲ ሞዳል ይዓጽዎ።
አርኢ	ቡልያን ዝብል እዩ።	ሓሶት	ኣብ ምጅማር ክፍሊ ሞዳል ይኸፍት

ምልክት ምግባር

ኣብ ገጽካ ሞዳላት ብቐሊሉ ከተነቓቕሖ ትኽእል ኢኻ፡ ሓንቲ መስመር ጃቫስክሪፕት ከይጸሓፍካ። በቃ ንሓደ ባእታ data-controls-modalምስ ሞዳል ባእታ id ዝሰማማዕ ባህሪ ሃቦ፣ ምስ ጠወቕካ ድማ ሞዳልካ ክጅምር እዩ። ሞዳል ኣማራጺታት ንምውሳኽ፡ ከም ዳታ ባህርያት እውን ጥራይ ኣካትትዎም።

<a class = "btn" data-controls-modal = "my-modal" ዳታ-ድሕረ ባይታ = "ሓቂ" > ሞዳል ምጅማር </a>    

መተሓሳሰቢ ሞዳልካ ንውሽጥን ንደገን ኣኒሜሽን ክገብር እንተደሊኻ፡ ኣብቲ ባእታኻ ሓደ .fadeክላስ ጥራይ ወስኸሉ .modal(ነዚ ብተግባር ንምርኣይ ኣብቲ ዲሞ ተወከስ)።

ኣገባባት

.modal(ኣማራጺታት) .

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

$ ( '#ናተይ-ሞዳል' ). ሞዳል ({
  closeOnEscape : ሓቂ እዩ ። 
}) ።

.modal('ምቕያር')

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

$ ( '#ናተይ-ሞዳል' ). ሞዳል ( 'ምቕያር' ) ።

.modal('ኣርእዩ')

ብኢድ ሞዳል ይኸፍት።

$ ( '#ናተይ-ሞዳል' ). modal ( 'ምርኣይ' ) ።

.modal('ሕባእ')

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

$ ( '#ናተይ-ሞዳል' ). ሞዳል ( 'ሕባእ' ) ።

.ሞዳል(ሓቂ)

ናይ ባእታታት ሞዳል ክፍሊ ምሳሌ ይመልስ።

$ ( '#ናተይ-ሞዳል' ). ሞዳል ( ሓቂ ) ።

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

ፍጻሜታት

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

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

$ ( '#ናተይ-ሞዳል' ). bind ( 'ሕቡእ' , ተግባር () {   
  // ገለ ግበር ...
}) ።

ዲሞ

ሞዳል ምጅማር

እዚ ፕላግ-ኢን ኣብ bootstrap topbar ወይ tabbed navigations ንቑልቁል ዝወርድ ምትእስሳር ንምውሳኽ እዩ።

ምውራድ

boostrap-dropdown.js ምጥቃም

$ ( '#topbar' ). ንቑልቁል ዝወርድ ()

ምልክት ምግባር

ኣብ ዝኾነ nav ባእታ ብቕልጡፍ ንቑልቁል ዝወርድ ተግባር ንምውሳኽ፡ ነቲ data-dropdownባህሪ ተጠቐም። ዝኾነ ቅኑዕ ቡትስትራፕ ድሮፕዳውን ብኣውቶማቲክ ይንቀሳቐስ።

<ul class = "ታብስ" > ዝብል ጽሑፍ ኣሎ። 
  <li class = "ንጡፍ" ><a href = "#" > ገዛ </a></li>  
  <li class = "ንቑልቁል ዝወርድ" data-dropdown = "ንቑልቁል ዝወርድ" >   
    <a href = "#" class = "ንቑልቁል-ምቕያር" > ንቑልቁል ዝወርድ </a>  
    <ul class = "ንቑልቁል ዝወርድ ዝርዝር" > 
      <li><a href = "#" > ካልኣይ ደረጃ መላግቦ </a></li> 
      <li><a href = "#" > ካልእ ኣብዚ </a></li> 
      <li class = "መከፋፈልቲ" </li> 
      <li><a href = "#" > ካልእ መላግቦ </a></li> 
    </ul> ዝብል ጽሑፍ ኣሎ።
  </li> ዝብል ጽሑፍ ኣሎ።
</ul> ዝብል ጽሑፍ ኣሎ።

መተሓሳሰቢ ui ናትካ ሓያሎ ምውራድ እንተሃልይዎ፡ ነቲ data-dropdownባህሪ ናብ ዝያዳ ትርጉም ዘለዎ መትሓዚ ባእታ ከም .tabsወይ ምውሳኽ ኣብ ግምት ኣእቱ .topbar።

ኣገባባት

$().ንቑልቁል ዝወርድ()

ንዝተዋህበ topbar ወይ tabbed navigation ዝኸውን ምልክታታት ንምንቅስቓስ ዝሕግዝ ፕሮግራማዊ api።

ዲሞ

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

ምውራድ

boostrap-scrollspy.js ምጥቃም

$ ( '#topbar' ). ንቑልቁል ዝወርድ ()

ምልክት ምግባር

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

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

ኣገባባት

$().ስክሮልስፒ()

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

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

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

.scrollspy('ምሕዳስ')

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

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

ዲሞ

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

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

ምውራድ

boostrap-tabs.js ምጥቃም

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

ምልክት ምግባር

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

 <ul class = "tabs" ዳታ-ታብስ = "ታብስ" > ... </ul>   

ኣገባባት

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

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

<ul class = "ታብስ" > ዝብል ጽሑፍ ኣሎ። 
  <li class = "ንጡፍ" ><a href = "#ገዛ" > ገዛ </a></li>  
  <li><a href = "#ፕሮፋይል" > ፕሮፋይል </a></li> 
  <li><a href = "#messages" > መልእኽትታት </a></li> 
  <li><a href = "#settings" > ቅጥዕታት </a></li> 
</ul> ዝብል ጽሑፍ ኣሎ።
 
<div class = "ትሕዝቶ-ከኒና" > 
  <div class = "ንጡፍ" id = "ገዛ" > ... </div>  
  <div id = "ፕሮፋይል" > ... </div> ዝብል ጽሑፍ ኣሎ። 
  <div id = "መልእኽትታት" > ... </div> 
  <div id = "ቅጥዕታት" > ... </div> 
</ul> ዝብል ጽሑፍ ኣሎ።
 
<ስክሪፕት> ዝብል ጽሑፍ ኣሎ።
  $ ( ተግባር () { .  
    $ ( '.tabs' ) ዝብል ጽሑፍ ኣሎ። ትቦታት ()
  }) ።
</script> ዝብል ጽሑፍ ኣሎ።

ዲሞ

• ገዛ
• መግለፂ
• መልእኽትታት
• ቅጥዕታት

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

ምውራድ

bootstrap-twipsy.js ምጥቃም

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

ኣማራጺታት

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

ኣገባባት

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

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

.twipsy('ኣርእዩ')

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

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

.twipsy('ሕባእ')

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

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

.twipsy(ሓቂ) .

ናይ elements twipsy class instance ይመልስ።

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

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

ዲሞ

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

ምውራድ

boostrap-popover.js ምጥቃም

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

ኣማራጺታት

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

ኣገባባት

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

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

.popover('ኣርእዩ')

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

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

.popover('ሕባእ')

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

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

ዲሞ

hover for popover ዝብል ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት

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

ምውራድ

bootstrap-alerts.js ምጥቃም

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

ምልክት ምግባር

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

ኣገባባት

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

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

.alert('ዕጾ')

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

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

ዲሞ