የኛ ሞዳል ፕለጊን በTwitter ላይ የምንፈልገውን ባዶ ተግባር ብቻ ለማካተት ልዩ ጥንቃቄ በማድረግ በባህላዊው ሞዳል js ፕለጊን ላይ እጅግ በጣም ቀጭን የሆነ እርምጃ ነው።

አውርድ

bootstrap-modal በመጠቀም

$ ( '#የእኔ-ሞዳል' )። ሞዳል ( አማራጮች )

አማራጮች

ስም	ዓይነት	ነባሪ	መግለጫ
ዳራ	ቡሊያን, ሕብረቁምፊ	የውሸት	ሞዳል-backdrop አባልን ያካትታል። "static"ባክድሮፕ ጠቅ ሲደረግ ሞዱሉ እንዲዘጋ ካልፈለጉ ወደ ኋላ ያቀናብሩት ።
የቁልፍ ሰሌዳ	ቡሊያን	የውሸት	የማምለጫ ቁልፍ ሲጫን ሞዳልን ይዘጋል።
አሳይ	ቡሊያን	የውሸት	በክፍል ጅምር ላይ ሞዳልን ይከፍታል።

ምልክት ማድረጊያ

አንድ ነጠላ የጃቫስክሪፕት መስመር መፃፍ ሳያስፈልግዎት ሞዳሎችን በገጽዎ ላይ በቀላሉ ማንቃት ይችላሉ። ለአንድ ኤለመንት data-controls-modalከሞዳል ኤለመንት መታወቂያ ጋር የሚዛመድ ባህሪ ብቻ ይስጡት፣ እና ጠቅ ሲያደርጉ ሞዳልዎን ያስጀምራል። የሞዳል አማራጮችን ለመጨመር፣ እንደ የውሂብ ባህሪያት ብቻ ያካትቷቸው።

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static" > የማስጀመሪያ ሞዳል </a>    

ማስታወቂያ ሞዳልዎ እንዲንቀሳቀስ እና እንዲወጣ ከፈለጉ፣ .fadeክፍሉን ወደ ኤለመንትዎ ብቻ ያክሉ .modal(ይህን በተግባር ለማየት ማሳያውን ይመልከቱ)።

ዘዴዎች

ሞዳል(አማራጮች)

ይዘትዎን እንደ ሞዳል ያነቃል። አማራጭ አማራጮችን ይቀበላል object።

$ ( '#የእኔ-ሞዳል' )። ሞዳል ({
  የቁልፍ ሰሌዳ : እውነት 
})

.ሞዳል('መቀያየር')

ሞዳልን በእጅ ይቀየራል።

$ ( '#የእኔ-ሞዳል' )። ሞዳል ( 'መቀያየር' )

ሞዳል('ሾው')

ሞዳልን በእጅ ይከፍታል።

$ ( '#የእኔ-ሞዳል' )። ሞዳል ( 'አሳይ' )

ሞዳል('ደብቅ')

ሞዳልን በእጅ ይደብቃል።

$ ( '#የእኔ-ሞዳል' )። ሞዳል ( 'ደብቅ' )

ሞዳል (እውነት)

የንጥረ ነገሮች ሞዳል ክፍል ምሳሌ ይመልሳል።

$ ( '#የእኔ-ሞዳል' )። ሞዳል ( እውነት )

ማስታወቂያ በአማራጭ፣ ይህ በ ጋር ሰርስሮ ማውጣት ይቻላል $().data('modal')።

ክስተቶች

የቡትስትራፕ ሞዳል ክፍል ወደ ሞዳል ተግባር ለመጠመድ ጥቂት ክስተቶችን ያጋልጣል።

ክስተት	መግለጫ
አሳይ	showየምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
ታይቷል።	ይህ ክስተት ሞጁሉ ለተጠቃሚው እንዲታይ ሲደረግ ይቃጠላል (የ css ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል)።
መደበቅ	hideየምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
ተደብቋል	ሞዱሉ ከተጠቃሚው ተደብቆ ሲጠናቀቅ ይህ ክስተት የሚነድ ነው (የ css ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል)።

$ ( '#የእኔ-ሞዳል' )። ማሰር ( 'የተደበቀ' ፣ ተግባር () {   
  // የሆነ ነገር አድርግ ...
})

ማሳያ

ሞዳልን አስጀምር

ይህ ፕለጊን የተቆልቋይ መስተጋብርን ወደ ቡትስትራፕ የላይኛው አሞሌ ወይም ታብድ አሰሳዎች ለመጨመር ነው።

አውርድ

bootstrap-dropdown.js በመጠቀም

$ ( '# topbar' ) መውረድ ()

ምልክት ማድረጊያ

በፍጥነት ተቆልቋይ ተግባርን ወደ ማንኛውም የናቭ ኤለመንት ለመጨመር ባህሪውን ይጠቀሙ data-dropdown። ማንኛውም የሚሰራ የቡት ማሰሪያ ተቆልቋይ በራስ ሰር ገቢር ይሆናል።

<ul class = "ትሮች" > 
  <li class = "ንቁ" ><a href = "#" > መነሻ </a></li>  
  <li class = "ተቆልቋይ" data-dropdown = "ተቆልቋይ" >   
    <a href = "#" class = "dropdown-toggle" > መውረድ </a>  
    <ul class = "ተቆልቋይ-ሜኑ" > 
      <li><a href = "#" > ሁለተኛ አገናኝ </a></li> 
      <li><a href = "#" > እዚህ ሌላ ነገር </a></li> 
      <li class = "አከፋፋይ" ></li> 
      <li><a href = "#" > ሌላ ማገናኛ </a></li> 
    </ul>
  </li>
</ul>

ማሳሰቢያ የእርስዎ ዩአይ ብዙ ተቆልቋይዎች ካሉት፣ ባህሪያቱን data-dropdownይበልጥ አስፈላጊ ወደሆነ እንደ .tabsወይም ወደ መያዣ አካል ማከል ያስቡበት .topbar።

ዘዴዎች

$() ተቆልቋይ()

ለተጠቀሰው የላይኛው አሞሌ ወይም ታብድ አሰሳ ምናሌዎችን ለማንቃት ፕሮግራማዊ ኤፒአይ።

ማሳያ

ይህ ፕለጊን የማሸብለያ ስፓይ (በራስ-ማዘመን nav) መስተጋብርን ወደ ቡትስትራፕ የላይኛው አሞሌ ለማከል ነው።

አውርድ

bootstrap-scrollspy.js በመጠቀም

$ ( '# topbar' ) scrollSpy ()

ምልክት ማድረጊያ

በቀላሉ የማሸብለል ባህሪን ወደ ናቭዎ ለማከል፣ ባህሪውን በቀላሉ data-scrollspyወደ .topbar.

<div class = "topbar" data-scrollspy = "scrollspy" > ... </div>   

ዘዴዎች

$().scrollSpy()

የማውጫ ቁልፎችን በራስ ሰር በተጠቃሚዎች ማሸብለል ቦታ ያነቃል።

$ ( 'አካል > .topbar' ). scrollSpy ()

የTopbar መልህቅ መለያዎች ሊፈቱ የሚችሉ የመታወቂያ ዒላማዎች ሊኖራቸው ይገባል። ለምሳሌ፣ አንድ <a href="#home">home</a>በዶም ውስጥ ካለ ነገር ጋር መዛመድ አለበት እንደ <div id="home"></div>.

.scrollSpy('አድስ')

የ scrollspy የናቭ ቁልፎችን መሸጎጫ እና ክፍል ለአፈጻጸም ያስተባብራል። ይህን መሸጎጫ ማዘመን ከፈለጉ (ምናልባትም ተለዋዋጭ ይዘት ካለዎት) ወደዚህ የማደስ ዘዴ ይደውሉ። የእርስዎን scrollspy ለመወሰን የውሂብ ባህሪውን ከተጠቀሙ፣ ልክ በሰውነት ላይ አድስ ይደውሉ።

$ ( "ሰውነት" ). scrollSpy ( 'አድስ' )

ማሳያ

በዚህ ገጽ ላይ ያለውን የላይኛው አሞሌ አሰሳ ይመልከቱ።

ይህ ፕለጊን የአዝራር ሁኔታን ለማስተዳደር ተጨማሪ ተግባራትን ይሰጣል።

አውርድ

bootstrap-buttons.js በመጠቀም

$ ( '.ትር' )። አዝራር ()

ዘዴዎች

$() አዝራር ('መቀያየር')

የግፋ ሁኔታን ይቀያይራል። ለቢቲኤን የነቃ መሆኑን ያሳያል።

ማስታወቂያ ባህሪውን በመጠቀም የአንድን አዝራር በራስ-ሰር መቀያየርን ማንቃት ይችላሉ data-toggle።

<button class = "btn" data-toggle = "መቀያየር" > ... </button>   

$() አዝራር('መጫን')

የአዝራር ሁኔታን ወደ ጭነት ያዘጋጃል - አዝራሩን ያሰናክላል እና ጽሑፍን ወደ መስቀል ይለውጣል። የመጫኛ ጽሑፍ የውሂብ ባህሪን በመጠቀም በአዝራሩ አካል ላይ መገለጽ አለበት data-loading-text.

<button class = "btn" data-loading-text = "ነገሮችን በመጫን ላይ..." > ... </button>   

$() አዝራር ('ዳግም ማስጀመር')

የአዝራር ሁኔታን ዳግም ያስጀምራል - ጽሑፍ ወደ ዋናው ጽሑፍ ይቀያይራል።

$() አዝራር (ሕብረቁምፊ)

የአዝራር ሁኔታን ዳግም ያስጀምራል - ጽሑፍ ወደ ማንኛውም ውሂብ ወደተገለጸው የጽሑፍ ሁኔታ ይለዋወጣል።

<button class = "btn" data-complete-text = "አልቋል!" > ... </button>   
<ስክሪፕት>
  $('.btn')።አዝራር('ሙሉ')
</scrip>

ማሳያ

ማሳያን በመጫን ላይ ማሳያ ቀያይር

ይህ ፕለጊን ፈጣን፣ ተለዋዋጭ ትር እና ክኒን ተግባርን ይጨምራል።

አውርድ

bootstrap-tabs.js በመጠቀም

$ ( '.ትር' )። ትሮች ()

ምልክት ማድረጊያ

ምንም አይነት ጃቫ ስክሪፕት ሳይጽፉ የትር ወይም የፒኒን ዳሰሳ ማግበር data-tabsይችላሉ data-pills።

 <ul class = "tabs" data-tabs = "tabs" > ... </ul>   

ዘዴዎች

$() ትሮች ወይም $() ክኒኖች

ለአንድ መያዣ የትር እና ክኒን ተግባርን ያነቃል። የትር ማያያዣዎች በሰነዱ ውስጥ መታወቂያዎችን ማጣቀስ አለባቸው።

<ul class = "ትሮች" > 
  <li class = "ንቁ" ><a href = "#ቤት" > ቤት </a></li>  
  <li><a href = "#መገለጫ" > መገለጫ </a></li> 
  <li><a href = "#መልእክቶች" > መልእክቶች </a></li> 
  <li><a href = "#ቅንጅቶች" > መቼቶች </a></li> 
</ul>
 
<div class = "የክኒን ይዘት" > 
  <div class = "ንቁ" id = "ቤት" > ... </div>  
  <div id = "መገለጫ" > ... </div> 
  <div id = "መልእክቶች" > ... </div> 
  <div id = "ቅንብሮች" > ... </div> 
</div>
 
<ስክሪፕት>
  $ ( ተግባር () {  
    $ ( '.ትር' )። ትሮች ()
  })
</script>

ክስተቶች

ክስተት	መግለጫ
መለወጥ	ይህ ክስተት በትር ለውጥ ላይ ይቃጠላል። ገባሪውን ትር እና የቀደመውን ትርን በቅደም ተከተል ዒላማ ለማድረግ event.targetይጠቀሙ ።event.relatedTarget

$ ( '#.ትር' )። ማሰር ( 'ለውጥ' ፣ ተግባር ( ሠ ) {   
  ሠ . ዒላማ // የነቃ ትር
  ሠ . ተዛማጅ ዒላማ // ያለፈው ትር
})

ማሳያ

• ቤት
• መገለጫ
• መልዕክቶች
• ቅንብሮች
• ዝቅ በል
  • @ ስብ
  • @mdo

በጄሰን ፍሬም በተፃፈው ምርጥ jQuery.tipsy ፕለጊን ላይ በመመስረት; twipsy የዘመነ ስሪት ነው፣ በምስሎች ላይ የማይታመን፣ css3 ለአኒሜሽን የሚጠቀም እና ለርዕስ ማከማቻ ዳታ-ባህሪያት!

አውርድ

bootstrap-twipsy.js በመጠቀም

$ ( '#ምሳሌ' )። twipsy ( አማራጮች )

አማራጮች

ስም	ዓይነት	ነባሪ	መግለጫ
አኒሜት	ቡሊያን	እውነት ነው።	የ css ደብዝዝ ሽግግርን ወደ መሳሪያ ጫፍ ተግብር
መዘግየት	ቁጥር	0	የመሳሪያ ጥቆማ (ሚሴ) ከማሳየቱ በፊት መዘግየት
መዘግየት	ቁጥር	0	የመሳሪያ ምክሮችን ከመደበቅ በፊት መዘግየት (ሚሴ)
ወደ ኋላ መውደቅ	ሕብረቁምፊ	''	ምንም የመሳሪያ ምክር ርዕስ በማይኖርበት ጊዜ ለመጠቀም ጽሑፍ
አቀማመጥ	ሕብረቁምፊ	'ከላይ'	የመሳሪያውን ጫፍ እንዴት እንደሚቀመጥ - ከላይ | በታች | ግራ | ቀኝ
html	ቡሊያን	የውሸት	በመሳሪያ ጫፍ ውስጥ የኤችቲኤምኤል ይዘት ይፈቅዳል
መኖር	ቡሊያን	የውሸት	በግለሰብ የክስተት ተቆጣጣሪዎች ምትክ የክስተት ውክልና ይጠቀሙ
ማካካሻ	ቁጥር	0	ከዒላማው አካል የፒክሰል ማካካሻ መሳሪያ
ርዕስ	ሕብረቁምፊ, ተግባር	'ርዕስ'	የርዕስ ጽሑፍን ለማውጣት ባህሪ ወይም ዘዴ
ቀስቅሴ	ሕብረቁምፊ	'ማንዣበብ'	የመሳሪያ ጫፍ እንዴት እንደሚነሳ - ማንዣበብ | ትኩረት | መመሪያ
አብነት	ሕብረቁምፊ	[ነባሪ ምልክት ማድረጊያ]	twipsyን ለመስራት የሚያገለግል የኤችቲኤምኤል አብነት።

ማሳሰቢያ የግለሰቦች ጥምጥም ምሳሌ አማራጮች እንደ አማራጭ የውሂብ ባህሪያትን በመጠቀም ሊገለጹ ይችላሉ።

<a href = "#" data-placement = "ከታች" rel = 'twipsy' title = 'አንዳንድ የርዕስ ጽሑፍ' > ጽሑፍ </a>    

ዘዴዎች

$().twipsy(አማራጮች)

ጠማማ ተቆጣጣሪን ከአንድ ንጥረ ነገር ስብስብ ጋር ያያይዘዋል።

.twipsy('ትዕይንት')

የንጥረ ነገሮች መንቀጥቀጥን ያሳያል።

$ ( '# አካል' ) twipsy ( 'ሾው' )

.twipsy('ደብቅ')

የንጥረትን መወዛወዝ ይደብቃል።

$ ( '# አካል' ) twipsy ( 'ደብቅ' )

.twipsy(እውነት)

ኤለመንቶችን የሚያጣብቅ ክፍል ምሳሌ ይመልሳል።

$ ( '# አካል' ) ትዊፕሲ ( እውነት )

ማስታወቂያ በአማራጭ፣ ይህ በ ጋር ሰርስሮ ማውጣት ይቻላል $().data('twipsy')።

ማሳያ

የፖፖቨር ፕለጊን ወደ መተግበሪያዎ ፖፖቨር ለመጨመር ቀላል በይነገጽ ያቀርባል። የ bootstrap-twipsy.js ፕለጊን ያራዝመዋል፣ ስለዚህ በፕሮጀክትዎ ውስጥ ብቅ-ባዮችን ሲያካትቱ ያንን ፋይል መያዝዎን ያረጋግጡ።

ማስታወቂያ ከ bootstrap-popover.js በፊት የ bootstrap-twipsy.js ፋይል ማካተት አለቦት።

አውርድ

bootstrap-popover.js በመጠቀም

$ ( '#ምሳሌ' )። ብቅ-ባይ ( አማራጮች )

አማራጮች

ስም	ዓይነት	ነባሪ	መግለጫ
አኒሜት	ቡሊያን	እውነት ነው።	የ css ደብዝዝ ሽግግርን ወደ መሳሪያ ጫፍ ተግብር
መዘግየት	ቁጥር	0	የመሳሪያ ጥቆማ (ሚሴ) ከማሳየቱ በፊት መዘግየት
መዘግየት	ቁጥር	0	የመሳሪያ ምክሮችን ከመደበቅ በፊት መዘግየት (ሚሴ)
ወደ ኋላ መውደቅ	ሕብረቁምፊ	''	ምንም የመሳሪያ ምክር ርዕስ በማይኖርበት ጊዜ ለመጠቀም ጽሑፍ
አቀማመጥ	ሕብረቁምፊ	'ቀኝ'	የመሳሪያውን ጫፍ እንዴት እንደሚቀመጥ - ከላይ | በታች | ግራ | ቀኝ
html	ቡሊያን	የውሸት	በመሳሪያ ጫፍ ውስጥ የኤችቲኤምኤል ይዘት ይፈቅዳል
መኖር	ቡሊያን	የውሸት	በግለሰብ የክስተት ተቆጣጣሪዎች ምትክ የክስተት ውክልና ይጠቀሙ
ማካካሻ	ቁጥር	0	ከዒላማው አካል የፒክሰል ማካካሻ መሳሪያ
ርዕስ	ሕብረቁምፊ, ተግባር	'ርዕስ'	የርዕስ ጽሑፍን ለማውጣት ባህሪ ወይም ዘዴ
ይዘት	ሕብረቁምፊ, ተግባር	'መረጃ-ይዘት'	የይዘት ጽሑፍን ለማውጣት ሕብረቁምፊ ወይም ዘዴ። አንዳቸውም ካልተሰጡ ይዘቱ ከውሂብ-ይዘት ባህሪይ ይመነጫል።
ቀስቅሴ	ሕብረቁምፊ	'ማንዣበብ'	የመሳሪያ ጫፍ እንዴት እንደሚነሳ - ማንዣበብ | ትኩረት | መመሪያ
አብነት	ሕብረቁምፊ	[ነባሪ ምልክት ማድረጊያ]	የኤችቲኤምኤል አብነት ለፖፖቨር ማሳያ ስራ ላይ ይውላል።

ማሳሰቢያ የግለሰብ ብቅ-ባይ ምሳሌ አማራጮች እንደ አማራጭ የውሂብ ባህሪያትን በመጠቀም ሊገለጹ ይችላሉ።

<a data-placement = "ከታች" href = "#" class = "btn danger" rel = "popover" > ጽሑፍ </a>    

ዘዴዎች

$()።popover(አማራጮች)

ለአንድ ንጥረ ነገር ስብስብ ብቅ-ባዮችን ያስጀምራል።

.popover('ትዕይንት')

ብቅ ባይ የሆኑ ንጥረ ነገሮችን ያሳያል።

$ ( '# አካል' ) ብቅ ባይ ( 'አሳይ' )

.popover('ደብቅ')

ብቅ ባይ የሆኑ ንጥረ ነገሮችን ይደብቃል።

$ ( '# አካል' ) ብቅ ባይ ( 'ደብቅ' )

ማሳያ

ለ popover ማንዣበብ

የማንቂያ ፕለጊን ወደ ማንቂያዎች ቅርብ ተግባራትን ለመጨመር እጅግ በጣም ትንሽ ክፍል ነው።

አውርድ

bootstrap-alerts.js በመጠቀም

$ ( ". ማንቂያ-መልእክት" ). ማንቂያ ()

ምልክት ማድረጊያ

data-alertወዲያውኑ ለእነሱ ቅርብ ተግባራትን ለመስጠት የማንቂያ መልእክቶችዎን ባህሪ ያክሉ ።

አማራጮች

ስም	ዓይነት	ነባሪ	መግለጫ
መራጭ	ሕብረቁምፊ	'.ገጠመ'	ማንቂያውን ለመዝጋት የትኛውን መራጭ ለማነጣጠር።

ዘዴዎች

$() ማንቂያ()

ሁሉንም ማንቂያዎች በቅርብ ተግባር ያጠቃልላል። ማንቂያዎችዎ በሚዘጉበት ጊዜ እንዲነቁ ለማድረግ፣ ቀድሞውንም የተተገበሩበት ክፍል .fadeእና ክፍል እንዳላቸው ያረጋግጡ።.in

ማንቂያ ('ዝግ')

ማንቂያ ይዘጋል።

$ ( ". ማንቂያ-መልእክት" ). ማንቂያ ( "ዝጋ" )

ማሳያ