ጃቫስክሪፕት

የBootstrapን አካላት ነፍስ ይዝሩበት—አሁን በ13 ብጁ jQuery ተሰኪዎች።

ቀና በል! እነዚህ ሰነዶች ለv2.3.2 ናቸው፣ እሱም ከአሁን በኋላ በይፋ አይደገፍም። የቅርብ ጊዜውን የ Bootstrap ስሪት ይመልከቱ!

የግለሰብ ወይም የተጠናቀረ

ተሰኪዎች በተናጥል ሊካተቱ ይችላሉ (ምንም እንኳን አንዳንዶቹ ጥገኞች ቢኖራቸውም) ወይም ሁሉም በአንድ ጊዜ። ሁለቱም bootstrap.js እና bootstrap.min.js በአንድ ፋይል ውስጥ ያሉ ሁሉንም ተሰኪዎች ይይዛሉ።

የውሂብ ባህሪያት

ሁሉንም የ Bootstrap ፕለጊኖች አንድ ነጠላ የጃቫስክሪፕት መስመር ሳይጽፉ በማርክ ማፕ ኤፒአይ ብቻ መጠቀም ይችላሉ። ይህ የBootstrap የመጀመሪያ ክፍል API ነው እና ተሰኪን ሲጠቀሙ የመጀመሪያ ግምት ውስጥ መግባት አለበት።

ያ ማለት፣ በአንዳንድ ሁኔታዎች ይህንን ተግባር ማጥፋት ሊፈለግ ይችላል። ስለዚህ፣ ሁሉንም በ«ዳታ-ኤፒ» የተከፋፈሉትን የሰውነት ስም በማጥፋት የውሂብ አይነታ ኤፒአይን የማሰናከል ችሎታን እናቀርባለን። ይህ ይህን ይመስላል።

  1. $ ( "ሰውነት" ). ጠፍቷል ( '.data-api' )

በአማራጭ፣ አንድን የተወሰነ ፕለጊን ዒላማ ለማድረግ፣ የተሰኪውን ስም እንደ የስም ቦታ ብቻ ከዳታ-api የስም ቦታ ጋር እንደዚህ ያካትቱ።

  1. $ ( "ሰውነት" ). ጠፍቷል ( 'alert.data-api' )

ፕሮግራማዊ ኤፒአይ

እንዲሁም ሁሉንም የBootstrap ፕለጊኖች በጃቫስክሪፕት ኤፒአይ ብቻ መጠቀም መቻል እንዳለቦት እናምናለን። ሁሉም ይፋዊ ኤፒአይዎች ነጠላ፣ በሰንሰለት ሊታለፉ የሚችሉ ዘዴዎች ናቸው፣ እና የተግባርን ስብስብ ይመለሳሉ።

  1. $ ( ".btn.danger" ). አዝራር ( "መቀያየር" ). addClass ( "ወፍራም" )

ሁሉም ዘዴዎች የአማራጭ አማራጮች ነገርን፣ አንድን የተወሰነ ዘዴ የሚያነጣጥር ሕብረቁምፊ ወይም ምንም (ነባሪ ባህሪ ያለው ተሰኪን የሚያስጀምር) መቀበል አለባቸው።

  1. $ ( "#myModal" ). ሞዳል () // ከነባሪዎች ጋር የተጀመረ
  2. $ ( "#myModal" ). ሞዳል ( { ቁልፍ ሰሌዳ ፡ ሐሰት }) // ያለ ኪቦርድ የተጀመረ
  3. $ ( "#myModal" ). ሞዳል ( 'ሾው' ) // ይጀምራል እና ይጣራል ወዲያውኑ ይታያል

እያንዳንዱ ፕለጊን ጥሬ ገንቢውን በ`ኮንስትራክተር` ንብረት ላይ ያጋልጣል $.fn.popover.Constructor፡. አንድ የተወሰነ ፕለጊን ለምሳሌ ማግኘት ከፈለጉ፣ በቀጥታ ከአንድ አካል ያውጡት $('[rel=popover]').data('popover')፡.

ግጭት የለም።

አንዳንድ ጊዜ የ Bootstrap ፕለጊኖችን ከሌሎች የUI ማዕቀፎች ጋር መጠቀም አስፈላጊ ነው። በነዚህ ሁኔታዎች፣ የስም ቦታ ግጭቶች አልፎ አልፎ ሊከሰቱ ይችላሉ። ይህ ከተከሰተ .noConflictእሴቱን ለመመለስ የሚፈልጉትን ፕለጊን መደወል ይችላሉ።

  1. var bootstrapButton = $ . ኤፍ.ኤን. _ አዝራር . noConflict () // $.fn.button ቀድሞ ወደተመደበው እሴት ይመልሱ
  2. $ _ ኤፍ.ኤን. _ bootstrapBtn = bootstrapButton // ስጡ $() .bootstrapBtn የቡት ስታፕ ተግባራዊነት

ክስተቶች

Bootstrap ለአብዛኛዎቹ ተሰኪ ልዩ ድርጊቶች ብጁ ክስተቶችን ያቀርባል። በጥቅሉ፣ እነዚህ ፍጻሜ የለሽ እና ያለፈ ተካፋይ መልክ ይመጣሉ - ፍጻሜው (ለምሳሌ show) በክስተቱ መጀመሪያ ላይ የሚቀሰቀስበት እና ያለፈው አካል ቅርፅ (ለምሳሌ shown) ድርጊት ሲጠናቀቅ ቀስቅሴ ይሆናል።

ሁሉም ማለቂያ የሌላቸው ክስተቶች የመከላከያ ነባሪ ተግባራትን ያቀርባሉ። ይህ እርምጃ ከመጀመሩ በፊት አፈፃፀምን የማቆም ችሎታ ይሰጣል።

  1. $ ( '#myModal' )። በርቷል ( 'ትዕይንት' ተግባር ( ) {
  2. ከሆነ (! ዳታ ) ከተመለሰ . መከላከል ነባሪ () // ሞዳል እንዳይታይ ያቆማል
  3. })

ስለ ሽግግሮች

ለቀላል የሽግግር ውጤቶች፣ bootstrap-transition.jsን አንድ ጊዜ ከሌሎች JS ፋይሎች ጋር ያካትቱ። የተቀናበረውን (ወይም የተቀነሰ) bootstrap.js እየተጠቀሙ ከሆነ ፣ ይህንን ማካተት አያስፈልግም—ቀድሞውኑ አለ።

ጉዳዮችን ተጠቀም

የሽግግሩ ተሰኪ ጥቂት ምሳሌዎች፡-

  • በሞዳል ውስጥ መንሸራተት ወይም መጥፋት
  • ትሮችን እየደበዘዘ
  • ማንቂያዎችን በማደብዘዝ ላይ
  • ተንሸራታች የካሮሴል ፓነሎች

ምሳሌዎች

ሞዳሎች የተስተካከሉ፣ ግን ተለዋዋጭ፣ የመገናኛ ጥያቄዎች በትንሹ የሚፈለገው ተግባር እና ብልጥ ነባሪዎች ናቸው።

የማይንቀሳቀስ ምሳሌ

በግርጌው ውስጥ የራስጌ፣ አካል እና የእርምጃዎች ስብስብ ያለው የተሰራ ሞዳል።

  1. <div class = "modal hide fade" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "ዝጋ" data-dismiss = "modal" aria-hidden = "እውነት" > × </button>
  4. <h3> የሞዳል ራስጌ </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> አንድ ጥሩ አካል… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" > ዝጋ </a>
  11. <a href = "#" class = "btn btn-primary" > ለውጦችን አስቀምጥ </a>
  12. </div>
  13. </div>

የቀጥታ ማሳያ

ከታች ያለውን አዝራር ጠቅ በማድረግ ሞዳልን በጃቫስክሪፕት ይቀያይሩ። ወደ ታች ይንሸራተታል እና ከገጹ አናት ላይ ይደበዝዛል።

  1. <!-- ሞዳልን ለመቀስቀስ ቁልፍ -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > የማሳያ ሞዳልን አስጀምር </a>
  3.  
  4. <!-- ሞዳል -->
  5. <div id = "myModal" class = "modal hide fade " tabindex = "-1" ሚና = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "እውነት" >
  6. <div class = "modal-header" >
  7. <button type = "button" class = "ዝጋ" data-dismiss = "modal" aria-hidden = "እውነት" > × </button>
  8. <h3 id = "myModalLabel" > የሞዳል ራስጌ </h3>
  9. </div>
  10. <div class = "modal-body" >
  11. <p> አንድ ጥሩ አካል… </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data- dismiss = "modal " aria-hidden = "እውነት" > ዝጋ </button>
  15. <button class = "btn btn-primary" > ለውጦችን አስቀምጥ </button>
  16. </div>
  17. </div>

አጠቃቀም

በውሂብ ባህሪያት በኩል

ጃቫ ስክሪፕት ሳይጽፉ ሞዳልን ያግብሩ። አንድን ወይም የተወሰነ ሞዳል ለመቀያየር ዒላማ ለማድረግ በተቆጣጣሪ data-toggle="modal"አካል ላይ እንደ አዝራር ያቀናብሩ ።data-target="#foo"href="#foo"

  1. <button type = "button" data- toggle = "modal " data-target = "#myModal" > የማስጀመሪያ ሞዳል </button>

በጃቫስክሪፕት በኩል

myModalከአንድ የጃቫ ስክሪፕት መስመር ጋር አንድ ሞዳል መታወቂያ ይደውሉ

  1. $ ( '#myModal' )። ሞዳል ( አማራጮች )

አማራጮች

አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-backdrop=""

ስም ዓይነት ነባሪ መግለጫ
ዳራ ቡሊያን እውነት ነው። ሞዳል-backdrop አባልን ያካትታል። በአማራጭ፣ staticጠቅ ሲደረግ ሞዳልን የማይዘጋው ለጀርባ ይግለጹ።
የቁልፍ ሰሌዳ ቡሊያን እውነት ነው። የማምለጫ ቁልፍ ሲጫን ሞዳልን ይዘጋል።
አሳይ ቡሊያን እውነት ነው። ሲጀመር ሞዳልን ያሳያል።
የሩቅ መንገድ የውሸት

loadየርቀት ዩአርኤል ከተሰጠ ይዘቱ በ jQuery ዘዴ ይጫናል እና ወደ ውስጥ ይገባል .modal-body. የዳታ ኤፒአይ እየተጠቀምክ ከሆነ እንደ አማራጭ hrefየርቀት ምንጩን ለመለየት መለያውን መጠቀም ትችላለህ። የዚህ ምሳሌ ከዚህ በታች ይታያል።

  1. <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

ዘዴዎች

ሞዳል(አማራጮች)

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

  1. $ ( '#myModal' )። ሞዳል ({
  2. የቁልፍ ሰሌዳ : ውሸት
  3. })

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

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

  1. $ ( '#myModal' )። ሞዳል ( 'መቀያየር' )

ሞዳል('ሾው')

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

  1. $ ( '#myModal' )። ሞዳል ( 'አሳይ' )

ሞዳል('ደብቅ')

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

  1. $ ( '#myModal' )። ሞዳል ( 'ደብቅ' )

ክስተቶች

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

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

ምሳሌ በ navbar ውስጥ

የ ScrollSpy ፕለጊን በማሸብለል አቀማመጥ ላይ በመመስረት የናቪ ኢላማዎችን በራስ-ሰር ለማዘመን ነው። ከአሳሹ በታች ያለውን ቦታ ያሸብልሉ እና የነቃ ክፍል ለውጥ ይመልከቱ። የተቆልቋዩ ንዑስ ንጥሎችም ይደምቃሉ።

@ ስብ

የማስታወቂያ ሌጊግስ ኪታር፣ ብሩች መታወቂያ አርት ፓርቲ ዶሎር ጉልበት። Pitchfork yr enim lo-fi qui ከመሸጡ በፊት። Tumblr ከእርሻ ወደ ጠረጴዛ የብስክሌት መብቶች ምንም ይሁን። Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. ኮዝቢ ሹራብ ሎሞ ዣን ቁምጣ፣ ዊሊያምስበርግ ሁዲ ሚኒም ኩዊ ምናልባት ስለነሱ አልሰማህም et cardigan Trust fund culpa biodiesel Wes Anderson aesthetic. ኒሂል የተነቀሰ አክሳመስ፣ cred irony biodiesel keffiyeh artisan ullamco consequat።

@mdo

ቬኒአም ማርፋ የጢም መንሸራተቻ ሰሌዳ፣ አድፒሲሲንግ fugiat velit ፒችፎርክ ጢም። የፍሪጋን ጢም አሊካ ኩፒዳታት የማሲስዊኒ ቬሮ። ኩፒዳታት አራት ሎኮ ኒሲ፣ ኤ ሄልቬቲካ ኑላ ካርልስ። የተነቀሰ የኮስቢ ሹራብ የምግብ መኪና፣ የማሲስዊኒ ክዊስ ፍሪጋን ያልሆነ ቪኒል። Lo-fi wes anderson +1 sartorial. ካርልስ ውበት የሌለው የአካል ብቃት እንቅስቃሴ ጓንትነት። ብሩክሊን adipisicing ክራፍት ቢራ ምክትል keytar desrunt.

አንድ

Occaecat commodo aliqua delectus. ፋፕ ክራፍት ቢራ deserunt skateboard e. የሎሞ የብስክሌት መብቶች adipisicing banh mi, velit ea sunt next level locavore ነጠላ መነሻ ቡና በማግና ቬኒየም። ከፍተኛ ህይወት መታወቂያ ቪኒል፣ echo park consequat quis aliquip banh mi ፕትፎርክ። Vero VHS est adipisicing. Consectetur nisi DIY minim messenger ቦርሳ። Cred ex in, ዘላቂ delectus consectetur fanny ጥቅል 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 ብሎግ፣ culpa messenger ቦርሳ ማርፋ ምንም አይነት የዲሌክቶስ ምግብ መኪና። ሳፒየንተ ሲንት ኢድ ግምትንዳ። Locavore sed helvetica cliche አስቂኝ፣ ነጎድጓዳማ ድመቶች ስለነሱ ሰምተህ የማታውቀው ከሆዲ ከግሉተን ነፃ የሆነ ሎ-ፋይ ፋፕ አሊኩፕ ያስከተለ ነው። Labore elit placeat ወደ ውጭ ከመሸጣቸው በፊት፣ ቴሪ ሪቻርድሰን ታዋቂው ብሩች ኒሲዩንት ኩይስ ኮዝቢ ሹራብ pariatur keffiyeh ut helvetica የእጅ ባለሙያ። የካርዲጋን ክራፍት ቢራ ሴታን ዝግጁ የተሰራ ቬሊት። VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco ነጎድጓዳማ ድመቶች።


አጠቃቀም

በውሂብ ባህሪያት በኩል

በቀላሉ የማሸብለል ባህሪን ወደ የላይኛው አሞሌ አሰሳ ለመጨመር በቀላሉ ሊሰልሉበት ወደሚፈልጉት data-spy="scroll"ኤለመንት ያክሉ (በተለምዶ ይህ አካል ነው) እና data-target=".navbar"የትኛውን ናቭ እንደሚጠቀሙ ይምረጡ። ከክፍለ አካል ጋር scrollspy መጠቀም ይፈልጋሉ .nav

  1. <body data-spy = "scroll" data-target = ".navbar" > ... </ body>

በጃቫስክሪፕት በኩል

በጃቫስክሪፕት ወደ ጥቅልል ​​ስፓይ ይደውሉ፡-

  1. $ ( '#navbar' )። ጥቅልል ስፓይ ()
ቀና በል! የናቭባር አገናኞች ሊፈቱ የሚችሉ የመታወቂያ ኢላማዎች ሊኖራቸው ይገባል። ለምሳሌ፣ አንድ <a href="#home">home</a>በዶም ውስጥ ካለ ነገር ጋር መዛመድ አለበት እንደ <div id="home"></div>.

ዘዴዎች

.scrollspy('አድስ')

ከ DOM አባሎችን ከመጨመር ወይም ከማስወገድ ጋር በማጣመር scrollspy ን ሲጠቀሙ የማደስ ዘዴውን እንደሚከተለው መደወል ያስፈልግዎታል፡-

  1. $ ( '[data-spy="scroll" ). እያንዳንዱ ( ተግባር () {
  2. var $ spy = $ ( ይህ ). scrollspy ( 'አድስ' )
  3. });

አማራጮች

አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-offset=""

ስም ዓይነት ነባሪ መግለጫ
ማካካሻ ቁጥር 10 የማሸብለል ቦታን ሲያሰሉ ከላይ የሚካካሱ ፒክሰሎች።

ክስተቶች

ክስተት መግለጫ
ማንቃት ይህ ክስተት አዲስ ንጥል በጥቅል ስፓይ ሲነቃ ይቃጠላል።

ምሳሌ ትሮች

በአካባቢያዊ ይዘት ክፍሎች ውስጥ ለመሸጋገር ፈጣን፣ ተለዋዋጭ የትር ተግባርን ያክሉ፣ በተቆልቋይ ምናሌዎችም ቢሆን።

ጥሬ ጂንስ ምናልባት ስለነሱ ጂን ቁምጣ አውስቲን ሰምተህ አታውቅም። Nesciunt ቶፉ stumptown aliqua፣ retro synth master cleanse። ፂም ክሊች ቴምፕር፣ ዊሊያምስበርግ ካርልስ ቪጋን ሄልቬቲካ። Reprehenderit ሉካንዳ retro keffiyeh dreamcatcher synth. ኮዝቢ ሹራብ eu banh mi, qui irure ቴሪ ሪቻርድሰን የቀድሞ ስኩዊድ። Aliquip placeat salvia cillum iphone. ሴይታን አሊኩፕ ኩይስ ካርዲጋን አሜሪካዊ አልባሳት፣ ሥጋ ሥጋ ቆራጭ ቮልፕቴት ኒሲ ኪ።

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.


አጠቃቀም

በጃቫስክሪፕት በኩል ሊታዩ የሚችሉ ትሮችን ያንቁ (እያንዳንዱ ትር በተናጥል መንቃት አለበት)

  1. $ ( '#myTab a' )። ጠቅ ያድርጉ ( ተግባር ( ) {
  2. . መከላከል ነባሪ ();
  3. $ ( ይህ ). ትር ( 'አሳይ' );
  4. })

ነጠላ ትሮችን በተለያዩ መንገዶች ማግበር ይችላሉ፡-

  1. $ ( '#myTab a[href="#profile"] )። ትር ( 'አሳይ' ); // ትርን በስም ይምረጡ
  2. $ ( '#myTab a: first' )። ትር ( 'አሳይ' ); // የመጀመሪያውን ትር ይምረጡ
  3. $ ( '#myTab a: last' )። ትር ( 'አሳይ' ); // የመጨረሻውን ትር ይምረጡ
  4. $ ( '#myTab li:eq(2) a' )። ትር ( 'አሳይ' ); // ሶስተኛውን ትር ምረጥ (0-ኢንዴክስ የተደረገ)

ምልክት ማድረጊያ

data-toggle="tab"በቀላሉ በመግለጽ ወይም በኤለመንቱ ላይ ማንኛውንም ጃቫ ስክሪፕት ሳይጽፉ የትር ወይም የፒኒን ዳሰሳ ማግበር ይችላሉ data-toggle="pill"navክፍሎቹን እና nav-tabsክፍሎቹን ወደ ትሩ ማከል የ ulBootstrap ትር ቅጥን ይተገበራል።

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > መነሻ </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > መገለጫ </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > መልእክቶች </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > መቼቶች </a></li>
  6. </ul>

ዘዴዎች

$() ትር

የትር አባል እና የይዘት መያዣን ያነቃል። ትር በ DOM ውስጥ የእቃ መያዣ መስቀለኛ መንገድ data-targetወይም ኢላማ ማድረግ አለበት።href

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "ንቁ" ><a href = "#ቤት" > ቤት </a></li>
  3. <li><a href = "#መገለጫ" > መገለጫ </a></li>
  4. <li><a href = "#መልእክቶች" > መልእክቶች </a></li>
  5. <li><a href = "#ቅንጅቶች" > መቼቶች </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane active" id = "ቤት" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "መልእክቶች" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <ስክሪፕት>
  16. $ ( ተግባር () {
  17. $ ( '#myTab a: last' )። ትር ( 'አሳይ' );
  18. })
  19. </script>

ክስተቶች

ክስተት መግለጫ
አሳይ ይህ ክስተት በትር ትዕይንት ላይ ይቃጠላል፣ ነገር ግን አዲሱ ትር ከመታየቱ በፊት። event.targetገባሪውን ትር እና event.relatedTargetየቀደመውን ገባሪ ትር (ካለ) በቅደም ተከተል ዒላማ ለማድረግ ይጠቀሙ ።
ታይቷል። ይህ ክስተት ትር ከታየ በኋላ በትብ ትዕይንት ላይ ይቀጣጠላል። event.targetገባሪውን ትር እና event.relatedTargetየቀደመውን ገባሪ ትር (ካለ) በቅደም ተከተል ዒላማ ለማድረግ ይጠቀሙ ።
  1. $ ( 'a[data-toggle="tab"]' )። በርቷል ( 'የሚታየው' ተግባር ( ) {
  2. . ዒላማ // የነቃ ትር
  3. . ተዛማጅ ዒላማ // ያለፈው ትር
  4. })

ምሳሌዎች

በጄሰን ፍሬም በተፃፈው ምርጥ jQuery.tipsy ፕለጊን አነሳሽነት; የመሳሪያ ምክሮች በምስሎች ላይ የማይመኩ፣ CSS3 ለአኒሜሽን እና ለአካባቢው የርዕስ ማከማቻ ዳታ-ባህሪያት የዘመነ ስሪት ናቸው።

በአፈጻጸም ምክንያቶች፣የመሳሪያው ጫፍ እና ብቅ-ባይ ዳታ-ኤፒስ መርጠው ገብተዋል፣ይህ ማለት እርስዎ እራስዎ ማስጀመር አለብዎት

የመሳሪያ ምክሮችን ለማየት ከታች ባሉት ማገናኛዎች ላይ ያንዣብቡ፡-

ጠባብ ሱሪ next level keffiyeh ምናልባት ሳትሰሙት አልቀረም ። የፎቶ ቡዝ ጢም ጥሬ የዲኒም ደብዳቤ የቪጋን መልእክተኛ ቦርሳ ስቱምፕታውን። ከእርሻ ወደ ጠረጴዛ ሴይታን፣ የማሲስዊኒ መጠገኛ ዘላቂ ኩዊኖ 8-ቢት አሜሪካዊ አልባሳት ቴሪ ሪቻርድሰን ቪኒል ቻምበሬይ አላቸው ። Beard stumptown፣ cardigans banh mi lomo Thundercats። ቶፉ ባዮዳይዝል ዊሊያምስበርግ ማርፋ፣ አራት ሎኮ ማክስዊኒ የጸዳ ቪጋን ቻምበሬይ። በጣም የሚገርም የእጅ ባለሙያ ምንም ይሁን ምን keytar ፣ scenester farm-to-table banksy ኦስቲን ትዊተር እጀታ የፍሪጋን ክሬድ ጥሬ ጂንስ ነጠላ ምንጭ የቡና ቫይረስ።

አራት አቅጣጫዎች

በግቤት ቡድኖች ውስጥ የመሳሪያ ምክሮች

containerበBootstrap ግቤት ቡድኖች አማካኝነት የመሳሪያ ምክሮችን እና ብቅ-ባይዎችን ሲጠቀሙ ያልተፈለጉ የጎንዮሽ ጉዳቶችን ለማስወገድ (ከዚህ በታች በሰነድ የተቀመጡ) አማራጮችን ማዘጋጀት አለብዎት ።


አጠቃቀም

በጃቫስክሪፕት በኩል የመሳሪያውን ጥቆማ ያስነሱ፡

  1. $ ( '#ምሳሌ' )። የመሳሪያ ምክር ( አማራጮች )

አማራጮች

አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-animation=""

ስም ዓይነት ነባሪ መግለጫ
አኒሜሽን ቡሊያን እውነት ነው። የ css ደብዝዝ ሽግግርን ወደ መሳሪያ ጫፍ ተግብር
html ቡሊያን የውሸት በመሳሪያው ጫፍ ውስጥ html አስገባ። ውሸት ከሆነ፣ የ jquery textዘዴ ይዘትን ወደ ዶም ለማስገባት ስራ ላይ ይውላል። ስለ XSS ጥቃቶች የሚጨነቁ ከሆነ ጽሑፍ ይጠቀሙ።
አቀማመጥ ሕብረቁምፊ | ተግባር 'ከላይ' የመሳሪያውን ጫፍ እንዴት እንደሚቀመጥ - ከላይ | የታችኛው | ግራ | ቀኝ
መራጭ ሕብረቁምፊ የውሸት መራጭ ከቀረበ፣የመሳሪያ ምክር ነገሮች ለተገለጹት ኢላማዎች ይላካሉ።
ርዕስ ሕብረቁምፊ | ተግባር '' `ርዕስ` መለያ ከሌለ ነባሪ የርዕስ ዋጋ
ቀስቅሴ ሕብረቁምፊ 'ማንዣበብ ትኩረት' የመሳሪያ ቲፕ እንዴት እንደሚነሳ - ጠቅ ያድርጉ | ማንዣበብ | ትኩረት | መመሪያ. ልብ ይበሉ የጉዳይ ማለፊያ ተስፈንጣሪ mutliple፣ ቦታ ተለይቷል፣ ቀስቅሴ አይነቶች።
መዘግየት ቁጥር | ነገር 0

የመሳሪያውን ጫፍ (ms) ማሳየት እና መደበቅ መዘግየት - በእጅ ቀስቅሴ አይነት ላይ አይተገበርም።

ቁጥር ከቀረበ፣ መዘግየት በሁለቱም መደበቅ/ማሳየት ላይ ይተገበራል።

የእቃው መዋቅር የሚከተለው ነው-delay: { show: 500, hide: 100 }

መያዣ ሕብረቁምፊ | የውሸት የውሸት

የመሳሪያውን ጫፍ ከአንድ የተወሰነ አካል ጋር ያያይዙታል።container: 'body'

ቀና በል! ለነጠላ የመሳሪያ ምክሮች አማራጮች በመረጃ ባህሪያት አጠቃቀም በኩል ሊገለጹ ይችላሉ።

ምልክት ማድረጊያ

  1. <a href = "#" data-toggle = "tooltip" title = "የመጀመሪያው መሣሪያ ቲፕ" > በእኔ ላይ አንዣብብ </a>

ዘዴዎች

$()የመሳሪያ ቲፕ(አማራጮች)

የመሳሪያ ቲፕ ተቆጣጣሪን ከአንድ ንጥረ ነገር ስብስብ ጋር ያያይዛል።

.tooltip('ሾው')

የአንድ ንጥረ ነገር መሣሪያ ጫፍን ያሳያል።

  1. $ ( '# አካል' ) የመሳሪያ ጫፍ ( 'አሳይ' )

.tooltip('ደብቅ')

የአንድን ንጥረ ነገር መሣሪያ ጫፍ ይደብቃል።

  1. $ ( '# አካል' ) የመሳሪያ ጫፍ ( 'ደብቅ' )

.tooltip('መቀያየር')

የአንድን ንጥረ ነገር መሣሪያ ጫፍ ይቀያይራል።

  1. $ ( '# አካል' ) የመሳሪያ ጫፍ ( "መቀያየር" )

.tooltip('አጠፋ')

የአንድን ንጥረ ነገር መሣሪያ ጫፍ ይደብቃል እና ያጠፋል።

  1. $ ( '# አካል' ) የመሳሪያ ጫፍ ( "ማጥፋት" )

ምሳሌዎች

ለሁለተኛ ደረጃ መረጃ ለማንኛውም ኤለመንት በ iPad ላይ እንዳሉት ትናንሽ ተደራቢዎችን ያክሉ። ብቅ-ባይን ለመቀስቀስ በአዝራሩ ላይ ያንዣብቡ። ለመካተት የመሳሪያ ምክሮችን ይፈልጋል ።

የማይንቀሳቀስ ፖፖቨር

አራት አማራጮች አሉ፡ ከላይ፣ በቀኝ፣ ከታች እና በግራ የተሰለፉ።

ፖፖቨር ከላይ

ሴድ posuere consectetur est በሎቦርቲስ። አኔን ኢዩ ሊዮ ቁም. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover ቀኝ

ሴድ posuere consectetur est በሎቦርቲስ። አኔን ኢዩ ሊዮ ቁም. Pellentesque ornare sem lacinia quam venenatis vestibulum.

ፖፖቨር ታች

ሴድ posuere consectetur est በሎቦርቲስ። አኔን ኢዩ ሊዮ ቁም. Pellentesque ornare sem lacinia quam venenatis vestibulum.

ፖፖቨር ቀርቷል።

ሴድ posuere consectetur est በሎቦርቲስ። አኔን ኢዩ ሊዮ ቁም. Pellentesque ornare sem lacinia quam venenatis vestibulum.

ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብሏል data.

የቀጥታ ማሳያ

አራት አቅጣጫዎች


አጠቃቀም

በጃቫስክሪፕት በኩል ብቅ-ባዮችን አንቃ፡-

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

አማራጮች

አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-animation=""

ስም ዓይነት ነባሪ መግለጫ
አኒሜሽን ቡሊያን እውነት ነው። የ css ደብዝዝ ሽግግርን ወደ መሳሪያ ጫፍ ተግብር
html ቡሊያን የውሸት ኤችቲኤምኤልን ወደ ፖፖቨር አስገባ። ውሸት ከሆነ፣ የ jquery textዘዴ ይዘትን ወደ ዶም ለማስገባት ስራ ላይ ይውላል። ስለ XSS ጥቃቶች የሚጨነቁ ከሆነ ጽሑፍ ይጠቀሙ።
አቀማመጥ ሕብረቁምፊ | ተግባር 'ቀኝ' ፖፖውን እንዴት እንደሚቀመጥ - ከላይ | የታችኛው | ግራ | ቀኝ
መራጭ ሕብረቁምፊ የውሸት መራጭ ከቀረበ፣የመሳሪያ ጥቆማ ዕቃዎች ለተገለጹት ኢላማዎች ይላካሉ
ቀስቅሴ ሕብረቁምፊ 'ጠቅ አድርግ' ብቅ-ባይ እንዴት እንደሚነሳ - ጠቅ ያድርጉ | ማንዣበብ | ትኩረት | መመሪያ
ርዕስ ሕብረቁምፊ | ተግባር '' `ርዕስ` ባህሪ ከሌለ ነባሪ የርዕስ ዋጋ
ይዘት ሕብረቁምፊ | ተግባር '' `የውሂብ-ይዘት` ባህሪ ከሌለ ነባሪ የይዘት ዋጋ
መዘግየት ቁጥር | ነገር 0

Pooover (MSON) መደበቅ እና መደበቅ - ለትላልቅ የመርከብ አይነት አይተገበርም

ቁጥር ከቀረበ፣ መዘግየት በሁለቱም መደበቅ/ማሳየት ላይ ይተገበራል።

የእቃው መዋቅር የሚከተለው ነው-delay: { show: 500, hide: 100 }

መያዣ ሕብረቁምፊ | የውሸት የውሸት

ብቅ-ባይን ከአንድ የተወሰነ አካል ጋር ያያይዙታል።container: 'body'

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

ምልክት ማድረጊያ

ለአፈጻጸም ምክንያቶች፣ Tooltip እና Popover data-apis መርጠው ገብተዋል። እነሱን ለመጠቀም ከፈለጉ በቀላሉ የመምረጫ አማራጭ ይጥቀሱ።

ዘዴዎች

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

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

.popover('ትዕይንት')

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

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

.popover('ደብቅ')

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

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

.popover('መቀያየር')

ኤለመንቶችን ብቅ-ባይን ይቀያይራል።

  1. $ ( '# አካል' ) ብቅ- ባይ ( "መቀያየር" )

.popover('አጠፋ')

የአንድን ንጥረ ነገር ብቅ-ባይ ይደብቃል እና ያጠፋል።

  1. $ ( '# አካል' ) ብቅ- ባይ ( "ማጥፋት" )

ምሳሌ ማንቂያዎች

በዚህ ተሰኪ ለሁሉም የማንቂያ መልእክቶች የስንብት ተግባርን ያክሉ።

ቅዱስ guacamole! እራስህን ፈትሽ በጣም ጥሩ አይደለህም።

ኧረ ተው! ስህተት አለብህ!

ይህንን እና ያንን ይለውጡ እና እንደገና ይሞክሩ። Duis mollis፣ est non commodo luctus፣ nisi erat porttitor ligula፣ eget lacinia odio sem nec elit። Cras mattis consectetur purus sit amet fermentum.

ይህን እርምጃ ይውሰዱ ወይም ይህን አድርግ


አጠቃቀም

ማንቂያውን በጃቫስክሪፕት ማሰናበት ያንቁ፡-

  1. $ ( ". ማንቂያ" ). ማንቂያ ()

ምልክት ማድረጊያ

data-dismiss="alert"የማንቂያ ቅርብ ተግባርን በራስ-ሰር ለመስጠት ወደ መዝጊያ ቁልፍዎ ያክሉ ።

  1. <a class = "close" data-dismiss = "ማስጠንቀቂያ" href = "#" > × </a>

ዘዴዎች

$() ማንቂያ()

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

ማንቂያ ('ዝግ')

ማንቂያ ይዘጋል።

  1. $ ( ". ማንቂያ" ). ማንቂያ ( "ዝጋ" )

ክስተቶች

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

ክስተት መግለጫ
ገጠመ closeየምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
ዝግ ይህ ክስተት የሚተኮሰው ማንቂያው ሲዘጋ ነው (የ css ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል)።
  1. $ ( '#የእኔ-ማስጠንቀቂያ' )። ማሰር ( 'ዝግ' ተግባር () {
  2. // የሆነ ነገር አድርግ…
  3. })

ምሳሌ አጠቃቀሞች

በአዝራሮች ተጨማሪ ያድርጉ። የቁጥጥር አዝራሩ ሁኔታ ወይም የአዝራሮች ቡድን ፍጠር ለተጨማሪ ክፍሎች እንደ የመሳሪያ አሞሌዎች።

ግዛት ያለው

data-loading-text="Loading..."በአንድ አዝራር ላይ የመጫኛ ሁኔታን ለመጠቀም ያክሉ ።

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "በመጫን ላይ..." > የመጫኛ ሁኔታ </button>

ነጠላ መቀያየር

data-toggle="button"በአንድ አዝራር ላይ መቀያየርን ለማግበር ያክሉ ።

  1. <button type = "button" class = "btn btn-primary" data-toggle = "button" > ነጠላ መቀያየር </button>

አመልካች ሳጥን

data-toggle="buttons-checkbox"በbtn-ቡድን ላይ የአመልካች ሳጥን ቅጥ መቀያየርን ያክሉ ።

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > ግራ </button>
  3. <button type = "button" class = "btn btn-primary" > መካከለኛ </button>
  4. <button type = "button" class = "btn btn-primary" > ቀኝ </button>
  5. </div>

ሬዲዮ

data-toggle="buttons-radio"በbtn-ቡድን ላይ ለሬዲዮ ቅጥ መቀያየርን ያክሉ ።

  1. <div class = "btn-group" data-toggle = "buttons-radio" >
  2. <button type = "button" class = "btn btn-primary" > ግራ </button>
  3. <button type = "button" class = "btn btn-primary" > መካከለኛ </button>
  4. <button type = "button" class = "btn btn-primary" > ቀኝ </button>
  5. </div>

አጠቃቀም

አዝራሮችን በጃቫስክሪፕት አንቃ፡-

  1. $ ( '.nav-tabs' )። አዝራር ()

ምልክት ማድረጊያ

የውሂብ ባህሪያት ከአዝራር ተሰኪ ጋር ወሳኝ ናቸው። ለተለያዩ የማርክ ዓይነቶች ከዚህ በታች ያለውን የምሳሌ ኮድ ይመልከቱ።

አማራጮች

ምንም

ዘዴዎች

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

የግፋ ሁኔታን ይቀያይራል። አዝራሩ የነቃውን መልክ ይሰጣል።

ቀና በል! ባህሪውን በመጠቀም የአንድን አዝራር በራስ-ሰር መቀያየርን ማንቃት ይችላሉ data-toggle
  1. <button type = "button" class = "btn" data-toggle = "button" > </button>

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

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

  1. <button type = "button" class = "btn" data-loading-text = "ነገሮችን በመጫን ላይ..." > ... </button>
ቀና በል! ፋየርፎክስ በገጽ ጭነቶች ላይ የአካል ጉዳተኛ ሁኔታን እንደቀጠለ ነው። ለዚህ መፍትሄ መጠቀም autocomplete="off"ነው.

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

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

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

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

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

ስለ

እንደ አኮርዲዮን እና አሰሳ ላሉ ሊሰበሰቡ ለሚችሉ አካላት የመሠረት ቅጦች እና ተለዋዋጭ ድጋፍ ያግኙ።

* የ Transitions plugin እንዲካተት ይፈልጋል።

ምሳሌ አኮርዲዮን

የስብስብ ተሰኪን በመጠቀም ቀላል የአኮርዲዮን ዘይቤ መግብርን ገንብተናል፡-

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus ቴሪ ሪቻርድሰን ማስታወቂያ ስኩዊድ። 3 ተኩላ ጨረቃ ኦፊሺያ aute፣ non cupidatat skateboard dolor brunch። የምግብ መኪና quinoa nesciunt laborum eiusmod. ብሩች 3 ተኩላ ጨረቃ ጊዜ፣ sunt aliqua ወፍ በላዩ ላይ አስቀመጠ ስኩዊድ ነጠላ ምንጭ ቡና nulla assumenda shoreditch et. ኒሂል አኒ ከፍየህ ሄልቬቲካ፣ ክራፍት ቢራ ላቦሬ ዌስ አንደርሰን ክሬድ ኔስሲዩንት ሳፒየንቴ ኢአ ፕራይደንት። ማስታወቂያ ቪጋን በስተቀር ስጋ ቤት ምክትል ሎሞ። Leggings occaecat ክራፍት ቢራ እርሻ-ወደ-ጠረጴዛ, ጥሬ የዲኒም ውበት synth nesciunt ምናልባት አንተ ስለ እነርሱ ሰምተህ አታውቅም accusamus labour ዘላቂ VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus ቴሪ ሪቻርድሰን ማስታወቂያ ስኩዊድ። 3 ተኩላ ጨረቃ ኦፊሺያ aute፣ non cupidatat skateboard dolor brunch። የምግብ መኪና quinoa nesciunt laborum eiusmod. ብሩች 3 ተኩላ ጨረቃ ጊዜ፣ sunt aliqua ወፍ በላዩ ላይ አስቀመጠ ስኩዊድ ነጠላ ምንጭ ቡና nulla assumenda shoreditch et. ኒሂል አኒ ከፍየህ ሄልቬቲካ፣ ክራፍት ቢራ ላቦሬ ዌስ አንደርሰን ክሬድ ኔስሲዩንት ሳፒየንቴ ኢአ ፕራይደንት። ማስታወቂያ ቪጋን በስተቀር ስጋ ቤት ምክትል ሎሞ። Leggings occaecat ክራፍት ቢራ እርሻ-ወደ-ጠረጴዛ, ጥሬ የዲኒም ውበት synth nesciunt ምናልባት አንተ ስለ እነርሱ ሰምተህ አታውቅም accusamus labour ዘላቂ VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus ቴሪ ሪቻርድሰን ማስታወቂያ ስኩዊድ። 3 ተኩላ ጨረቃ ኦፊሺያ aute፣ non cupidatat skateboard dolor brunch። የምግብ መኪና quinoa nesciunt laborum eiusmod. ብሩች 3 ተኩላ ጨረቃ ጊዜ፣ sunt aliqua ወፍ በላዩ ላይ አስቀመጠ ስኩዊድ ነጠላ ምንጭ ቡና nulla assumenda shoreditch et. ኒሂል አኒ ከፍየህ ሄልቬቲካ፣ ክራፍት ቢራ ላቦሬ ዌስ አንደርሰን ክሬድ ኔስሲዩንት ሳፒየንቴ ኢአ ፕራይደንት። ማስታወቂያ ቪጋን በስተቀር ስጋ ቤት ምክትል ሎሞ። Leggings occaecat ክራፍት ቢራ እርሻ-ወደ-ጠረጴዛ, ጥሬ የዲኒም ውበት synth nesciunt ምናልባት አንተ ስለ እነርሱ ሰምተህ አታውቅም accusamus labour ዘላቂ VHS.
  1. <div class = "አኮርዲዮን" id = "አኮርዲዮን2" >
  2. <div class = "አኮርዲዮን-ግሩፕ" >
  3. <div class = "አኮርዲዮን-ርዕስ" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. ሊሰበሰብ የሚችል ቡድን ንጥል #1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "አኮርዲዮን-አካል መውደቅ በ" >
  9. <div class = "አኮርዲዮን-ውስጥ" >
  10. Anim pariatur cliche...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "አኮርዲዮን-ግሩፕ" >
  15. <div class = "አኮርዲዮን-ርዕስ" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. ሊሰበሰብ የሚችል ቡድን ቁጥር 2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "አኮርዲዮን-አካል ውድቀት" >
  21. <div class = "አኮርዲዮን-ውስጥ" >
  22. Anim pariatur cliche...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

እንዲሁም ፕለጊኑን ያለ አኮርዲዮን ማርክ መጠቀም ይችላሉ። የሌላ ኤለመንት መስፋፋት እና መሰባበር ቀያይር ያድርጉ።

  1. <button type = "button" class = "btn btn- danger" data -toggle = "collapse" data-target = "#demo" >
  2. ቀላል ሊሰበሰብ የሚችል
  3. </button>
  4.  
  5. <div id = "demo" class = "ሰብስብ" > </div>

አጠቃቀም

በውሂብ ባህሪያት በኩል

data-toggle="collapse"በቀላሉ የሚሰበሰብ ኤለመንት ቁጥጥርን ለመመደብ ወደ data-targetኤለመንት ያክሉ ። ባህሪው data-targetውድቀትን ለመተግበር css መራጭን ይቀበላል። ክፍሉን collapseወደ ሊሰበሰበው አካል ማከልዎን ያረጋግጡ። በነባሪ እንዲከፈት ከፈለጉ ተጨማሪውን ክፍል ያክሉ in

አኮርዲዮን የመሰለ የቡድን አስተዳደርን ወደ ሊሰበሰብ የሚችል ቁጥጥር ለመጨመር የውሂብ ባህሪውን ያክሉ data-parent="#selector"። ይህንን በተግባር ለማየት ማሳያውን ይመልከቱ።

በጃቫስክሪፕት በኩል

በእጅ አንቃ በ፦

  1. $ ( ". ሰብስብ" ). መውደቅ ()

አማራጮች

አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-parent=""

ስም ዓይነት ነባሪ መግለጫ
ወላጅ መራጭ የውሸት መራጭ ከሆነ ይህ የሚሰበሰብ ንጥል ነገር ሲታይ በተገለጸው ወላጅ ስር ያሉ ሁሉም የሚሰበሰቡ ክፍሎች ይዘጋሉ። (ከባህላዊ አኮርዲዮን ባህሪ ጋር ተመሳሳይ)
ቀያይር ቡሊያን እውነት ነው። በጥሪ ላይ ሊሰበሰብ የሚችለውን አካል ይቀየራል።

ዘዴዎች

.ሰብስብ(አማራጮች)

የእርስዎን ይዘት እንደ ሊሰበሰብ የሚችል አካል ያገብራል። አማራጭ አማራጮችን ይቀበላል object

  1. $ ( '#My Collapsible' )። መሰባበር ({
  2. መቀያየር : ውሸት
  3. })

.ሰብስብ('መቀያየር')

ሊሰበሰብ የሚችል አካል ወደ የሚታይ ወይም የተደበቀ ይቀየራል።

.ሰብስብ('አሳይ')

ሊፈርስ የሚችል አካል ያሳያል።

ሰብስብ('ደብቅ')

ሊፈርስ የሚችል አካል ይደብቃል።

ክስተቶች

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

ክስተት መግለጫ
አሳይ showየምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
ታይቷል። ይህ ክስተት የሚተኮሰው የብልሽት ኤለመንት ለተጠቃሚው እንዲታይ ሲደረግ ነው (የ css ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል)።
መደበቅ hideዘዴው ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
ተደብቋል ይህ ክስተት የሚተኮሰው የብልሽት ኤለመንት ከተጠቃሚው ከተደበቀ ነው (የ css ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል።)
  1. $ ( '#My Collapsible' )። በርቷል ( 'የተደበቀ' ተግባር () {
  2. // የሆነ ነገር አድርግ…
  3. })

ለምሳሌ

ከማንኛውም የጽሑፍ ግብዓት ጋር የሚያማምሩ የጽሕፈት መኪናዎችን በፍጥነት ለመፍጠር መሰረታዊ፣ በቀላሉ የተዘረጋ ፕለጊን።

  1. <input type = "text" data- provide = "typehead" >

autocomplete="off"ነባሪ የአሳሽ ሜኑዎች በBootstrap typeahead ተቆልቋይ ላይ እንዳይታዩ ለመከላከል ማዋቀር ትፈልጋለህ።


አጠቃቀም

በውሂብ ባህሪያት በኩል

ከላይ በምሳሌው ላይ እንደሚታየው የጽሕፈት መኪና ተግባር ያለው አካል ለመመዝገብ የውሂብ ባህሪያትን ያክሉ።

በጃቫስክሪፕት በኩል

የጽሕፈት መኪናውን በእጅ ይደውሉ፡-

  1. $ ( '.typehead' ). የጽሕፈት መኪና ()

አማራጮች

አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-source=""

ስም ዓይነት ነባሪ መግለጫ
ምንጭ ድርድር, ተግባር [ ] ለመቃወም ለመጠየቅ የውሂብ ምንጭ። የሕብረቁምፊዎች ድርድር ወይም ተግባር ሊሆን ይችላል። ተግባሩ ሁለት ነጋሪ እሴቶች ተላልፏል, queryበግቤት መስኩ ውስጥ ያለው ዋጋ እና processመልሶ መደወል. ተግባሩ የውሂብ ምንጩን በቀጥታ ወይም በተመሳሰለ መልኩ processበተመላሽ ጥሪ ነጠላ ክርክር በኩል በመመለስ በተመሳሳይ መልኩ ጥቅም ላይ ሊውል ይችላል።
እቃዎች ቁጥር 8 በተቆልቋዩ ውስጥ የሚታዩት ከፍተኛው የንጥሎች ብዛት።
ደቂቃ ርዝመት ቁጥር 1 ራስ-አጠናቅቅ የአስተያየት ጥቆማዎችን ከመቀስቀሱ ​​በፊት የሚያስፈልገው ዝቅተኛው የቁምፊ ርዝመት
ተዛማጅ ተግባር ጉዳይ የማይሰማ መጠይቁ ከእቃው ጋር የሚዛመድ መሆኑን ለመወሰን የሚያገለግል ዘዴ። itemጥያቄውን የሚፈትሽበት ነጠላ መከራከሪያ ይቀበላል ። የአሁኑን ጥያቄ በ ጋር ይድረሱበት this.querytrueጥያቄ ከተዛመደ ቡሊያን ይመልሱ ።
መደርደር ተግባር ትክክለኛ ግጥሚያ፣
ጉዳይ ሚስጥራዊነት ያለው፣
ጉዳይ የማይሰማ
የራስ-አጠናቅቅ ውጤቶችን ለመደርደር ጥቅም ላይ የሚውል ዘዴ። ነጠላ ነጋሪ እሴትን ይቀበላል itemsእና የትየባ ራስ ምሳሌ ወሰን አለው። የአሁኑን ጥያቄ በ this.query.
አዘምን ተግባር የተመረጠውን ንጥል ይመልሳል የተመረጠውን ንጥል ለመመለስ ጥቅም ላይ የዋለው ዘዴ. ነጠላ ነጋሪ እሴትን ይቀበላል፣ itemእና የትየባ ርዕሱ ወሰን አለው።
ማድመቂያ ተግባር ሁሉንም ነባሪ ግጥሚያዎች ያደምቃል የራስ-አጠናቅቅ ውጤቶችን ለማጉላት ጥቅም ላይ የሚውል ዘዴ። ነጠላ ነጋሪ እሴትን ይቀበላል itemእና የትየባ ራስ ምሳሌ ወሰን አለው። html መመለስ አለበት።

ዘዴዎች

የጽሕፈት መኪና (አማራጮች)

ግብአትን በታይፕ ጭንቅላት ያስጀምራል።

ለምሳሌ

በግራ በኩል ያለው ንዑስ ዳሰሳ የአባሪ ተሰኪ የቀጥታ ማሳያ ነው።


አጠቃቀም

በውሂብ ባህሪያት በኩል

በማንኛውም አካል ላይ በቀላሉ የመለጠፊያ ባህሪን ለመጨመር በቀላሉ ሊሰልሉት data-spy="affix"ወደሚፈልጉት አካል ያክሉ። ከዚያም የአንድን ንጥረ ነገር መሰካት መቼ እንደሚያበራ እና እንደሚያጠፋ ለመለየት ማካካሻዎችን ይጠቀሙ።

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
ቀና በል! የተሰካ ኤለመንት አቀማመጥ እና የቅርብ ወላጁ ባህሪን ማስተዳደር አለብዎት። ቦታው የሚቆጣጠረው በ affixaffix-topእና affix-bottomከመደበኛው የገጹ ፍሰት ይዘትን ስለሚያስወግድ ተጨማሪው ወደ ውስጥ ሲገባ ሊወድም የሚችል ወላጅ መኖሩን ማረጋገጥዎን ያስታውሱ።

በጃቫስክሪፕት በኩል

በጃቫ ስክሪፕት ወደ አባሪ ፕለጊን ይደውሉ፡-

  1. $ ( '#navbar' )። መለጠፍ ()

አማራጮች

አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-offset-top="200"

ስም ዓይነት ነባሪ መግለጫ
ማካካሻ ቁጥር | ተግባር | ነገር 10 የማሸብለል ቦታን ሲያሰሉ ከማያ ገጽ የሚካካሱ ፒክሰሎች። አንድ ነጠላ ቁጥር ከተሰጠ, ማካካሻው በሁለቱም ከላይ እና በግራ አቅጣጫዎች ይተገበራል. ነጠላ አቅጣጫ ወይም በርካታ ልዩ ማካካሻዎችን ለማዳመጥ አንድ ነገር ብቻ ያቅርቡ offset: { x: 10 }። በተለዋዋጭ ማካካሻ ማቅረብ ሲፈልጉ ተግባርን ይጠቀሙ (ለአንዳንድ ምላሽ ሰጭ ንድፎች ይጠቅማል)።