બુટસ્ટ્રેપ માટે જાવાસ્ક્રિપ્ટ

બુટસ્ટ્રેપના ઘટકોને જીવંત બનાવો-હવે 12 કસ્ટમ jQuery પ્લગિન્સ સાથે.

મોડલ્સ

એક સુવ્યવસ્થિત, પરંતુ લવચીક, માત્ર ન્યૂનતમ જરૂરી કાર્યક્ષમતા અને સ્માર્ટ ડિફોલ્ટ્સ સાથે પરંપરાગત જાવાસ્ક્રિપ્ટ મોડલ પ્લગઇનનો ઉપયોગ કરો.

ડ્રોપડાઉન

આ સરળ પ્લગઇન સાથે બુટસ્ટ્રેપમાં લગભગ કોઈપણ વસ્તુમાં ડ્રોપડાઉન મેનુ ઉમેરો. બુટસ્ટ્રેપ નેવબાર, ટેબ્સ અને ગોળીઓમાં સંપૂર્ણ ડ્રોપડાઉન મેનૂ સપોર્ટ આપે છે.

સ્ક્રોલસ્પાય

સ્ક્રોલ સ્થિતિના આધારે વર્તમાન સક્રિય લિંક બતાવવા માટે તમારા નેવબારમાં લિંક્સને આપમેળે અપડેટ કરવા માટે સ્ક્રોલસ્પીનો ઉપયોગ કરો.

ટૉગલ કરી શકાય તેવી ટૅબ્સ

ટેબ્સ અને ગોળીઓને સ્થાનિક સામગ્રીના ટેબેબલ પેન દ્વારા ટૉગલ કરવાની મંજૂરી આપીને વધુ ઉપયોગી બનાવવા માટે આ પ્લગઇનનો ઉપયોગ કરો.

ટૂલટિપ્સ

jQuery ટિપ્સી પ્લગઇન પર એક નવો દેખાવ, ટૂલટિપ્સ છબીઓ પર આધાર રાખતી નથી-તેઓ એનિમેશન માટે CSS3 અને સ્થાનિક શીર્ષક સંગ્રહ માટે ડેટા-એટ્રિબ્યુટ્સનો ઉપયોગ કરે છે.

પોપોવર્સ *

હાઉસિંગ ગૌણ માહિતી માટે કોઈપણ ઘટકમાં, iPad પરની જેમ સામગ્રીના નાના ઓવરલે ઉમેરો.

* સમાવવા માટે ટૂલટિપ્સની જરૂર છે

ચેતવણી સંદેશાઓ

ચેતવણી પ્લગઇન એ ચેતવણીઓમાં નજીકની કાર્યક્ષમતા ઉમેરવા માટે એક નાનો વર્ગ છે.

બટનો

બટનો સાથે વધુ કરો. કંટ્રોલ બટન જણાવે છે અથવા ટૂલબાર જેવા વધુ ઘટકો માટે બટનોના જૂથો બનાવો.

સંકુચિત કરો

એકોર્ડિયન અને નેવિગેશન જેવા સંકુચિત ઘટકો માટે આધાર શૈલીઓ અને લવચીક આધાર મેળવો.

હિંડોળા

તમે સામગ્રીનો ઇન્ટરેક્ટિવ સ્લાઇડશો પ્રદાન કરવા માંગો છો તે કોઈપણ સામગ્રીનો આનંદી-ગો-રાઉન્ડ બનાવો.

ટાઇપહેડ

કોઈપણ ફોર્મ ટેક્સ્ટ ઇનપુટ સાથે ઝડપથી ભવ્ય ટાઇપહેડ્સ બનાવવા માટે મૂળભૂત, સરળતાથી વિસ્તૃત પ્લગઇન.

સંક્રમણો *

સરળ સંક્રમણ અસરો માટે, મોડલમાં સ્લાઇડ કરવા અથવા ચેતવણીઓને ઝાંખા કરવા માટે bootstrap-transition.js એકવાર શામેલ કરો.

* પ્લગિન્સમાં એનિમેશન માટે જરૂરી છે

હેડ અપ! બધા જાવાસ્ક્રિપ્ટ પ્લગિન્સને jQuery ના નવીનતમ સંસ્કરણની જરૂર છે.

મોડલ્સ વિશે

એક સુવ્યવસ્થિત, પરંતુ લવચીક, માત્ર ન્યૂનતમ જરૂરી કાર્યક્ષમતા અને સ્માર્ટ ડિફોલ્ટ્સ સાથે પરંપરાગત જાવાસ્ક્રિપ્ટ મોડલ પ્લગઇનનો ઉપયોગ કરો.

ફાઈલ ડાઉનલોડ

સ્થિર ઉદાહરણ

નીચે સ્ટેટિકલી રેન્ડર કરેલ મોડલ છે.

લાઈવ ડેમો

નીચેના બટન પર ક્લિક કરીને જાવાસ્ક્રિપ્ટ દ્વારા મોડલને ટૉગલ કરો. તે પૃષ્ઠની ટોચ પરથી નીચે સ્લાઇડ થશે અને ઝાંખું થઈ જશે.

ડેમો મોડલ લોંચ કરો

બુટસ્ટ્રેપ-મોડલનો ઉપયોગ કરવો

જાવાસ્ક્રિપ્ટ દ્વારા મોડલને કૉલ કરો:

  1. $ ( '#myModal' ). મોડલ ( વિકલ્પો )

વિકલ્પો

નામ પ્રકાર મૂળભૂત વર્ણન
પૃષ્ઠભૂમિ બુલિયન સાચું મોડલ-બેકડ્રોપ ઘટકનો સમાવેશ થાય છે. વૈકલ્પિક રીતે, staticબેકડ્રોપ માટે સ્પષ્ટ કરો કે જે ક્લિક પર મોડલ બંધ કરતું નથી.
કીબોર્ડ બુલિયન સાચું જ્યારે એસ્કેપ કી દબાવવામાં આવે ત્યારે મોડલ બંધ કરે છે
બતાવો બુલિયન સાચું જ્યારે પ્રારંભ થાય ત્યારે મોડલ બતાવે છે.

માર્કઅપ

તમે જાવાસ્ક્રિપ્ટની એક લીટી લખ્યા વિના સરળતાથી તમારા પૃષ્ઠ પર મોડલ્સને સક્રિય કરી શકો છો. ફક્ત એક અથવા જે મોડલ એલિમેન્ટ આઈડીને અનુરૂપ હોય data-toggle="modal"તેવા નિયંત્રક તત્વ પર સેટ કરો અને જ્યારે ક્લિક કરવામાં આવે, ત્યારે તે તમારું મોડલ લોન્ચ કરશે.data-target="#foo"href="#foo"

ઉપરાંત, તમારા મોડલ ઉદાહરણમાં વિકલ્પો ઉમેરવા માટે, ફક્ત તેમને નિયંત્રણ તત્વ અથવા મોડલ માર્કઅપ પર વધારાના ડેટા લક્ષણો તરીકે શામેલ કરો.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > મોડલ લોંચ કરો </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div વર્ગ = "મોડલ-હેડર" >
  3. <button type = "button" class = "close" data-dismiss = "modal" > × </button>
  4. <h3> મોડલ હેડર </h3>
  5. </div>
  6. <div વર્ગ = "મોડલ-બોડી" >
  7. <p> એક સુંદર શરીર... </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > બંધ કરો </a>
  11. <a href = "#" class = "btn btn-primary" > ફેરફારો સાચવો </a>
  12. </div>
  13. </div>
હેડ અપ! જો તમે ઇચ્છો છો કે તમારું મોડલ અંદર અને બહાર એનિમેટ થાય, તો ફક્ત તત્વમાં એક .fadeવર્ગ ઉમેરો .modal(આને ક્રિયામાં જોવા માટે ડેમોનો સંદર્ભ લો) અને bootstrap-transition.js શામેલ કરો.

પદ્ધતિઓ

મોડલ(વિકલ્પો)

તમારી સામગ્રીને મોડલ તરીકે સક્રિય કરે છે. વૈકલ્પિક વિકલ્પો સ્વીકારે છે object.

  1. $ ( '#myModal' ). મોડલ ({
  2. કીબોર્ડ : ખોટું
  3. })

મોડલ('ટૉગલ')

મૉડલને મેન્યુઅલી ટૉગલ કરે છે.

  1. $ ( '#myModal' ). મોડલ ( 'ટૉગલ' )

મોડલ('શો')

મેન્યુઅલી મોડલ ખોલે છે.

  1. $ ( '#myModal' ). મોડલ ( 'શો' )

મોડલ('છુપાવો')

મેન્યુઅલી મોડલ છુપાવે છે.

  1. $ ( '#myModal' ). મોડલ ( 'છુપાવો' )

ઘટનાઓ

બુટસ્ટ્રેપનો મોડલ ક્લાસ મોડલ કાર્યક્ષમતામાં જોડાવા માટે કેટલીક ઘટનાઓને ઉજાગર કરે છે.

ઘટના વર્ણન
બતાવો showજ્યારે ઇન્સ્ટન્સ પદ્ધતિને બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ ફાયર થાય છે.
બતાવેલ જ્યારે મોડલ વપરાશકર્તાને દૃશ્યક્ષમ બનાવવામાં આવે ત્યારે આ ઇવેન્ટને બરતરફ કરવામાં આવે છે (css સંક્રમણો પૂર્ણ થવાની રાહ જોશે).
છુપાવો hideજ્યારે ઇન્સ્ટન્સ મેથડ બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ કાઢી નાખવામાં આવે છે.
છુપાયેલ જ્યારે મોડલ વપરાશકર્તાથી છુપાવવાનું સમાપ્ત કરે છે ત્યારે આ ઇવેન્ટને કાઢી નાખવામાં આવે છે (css સંક્રમણો પૂર્ણ થવાની રાહ જોશે).
  1. $ ( '#myModal' ). પર ( 'છુપાયેલ' , કાર્ય () {
  2. // કંઈક કરવું…
  3. })

ScrollSpy પ્લગઇન સ્ક્રોલ સ્થિતિના આધારે નેવી લક્ષ્યોને આપમેળે અપડેટ કરવા માટે છે.

ફાઈલ ડાઉનલોડ

scrollspy સાથે ઉદાહરણ navbar

નીચેના વિસ્તારને સ્ક્રોલ કરો અને નેવિગેશન અપડેટ જુઓ. ડ્રોપડાઉન પેટા વસ્તુઓ તેમજ હાઇલાઇટ કરવામાં આવશે. તેને અજમાવી જુઓ!

@ચરબી

એડ લેગિંગ્સ કીટાર, બ્રંચ આઈડી આર્ટ પાર્ટી ડોલર લેબર. Pitchfork yr enim lo-fi પહેલાં તેઓ qui વેચાઈ ગયા. Tumblr ફાર્મ-ટુ-ટેબલ સાયકલ અધિકારો ગમે તે હોય. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. કોસ્બી સ્વેટર લોમો જીન શોર્ટ્સ, વિલિયમ્સબર્ગ હૂડી મિનિમ ક્વિ તમે કદાચ તેમના વિશે સાંભળ્યું નથી અને કાર્ડિગન ટ્રસ્ટ ફંડ કુલ્પા બાયોડીઝલ વેસ એન્ડરસન એસ્થેટિક. નિહિલ ટેટૂ અક્યુસેમસ, ક્રેડ ઈરોની બાયોડીઝલ કેફીયેહ કારીગર ઉલમકો પરિણામ.

@mdo

વેનિઅમ માર્ફા મૂછો સ્કેટબોર્ડ, એડિપિસિસિંગ ફ્યુગિયાટ વેલીટ પિચફોર્ક દાઢી. ફ્રીગન બીયર્ડ એલીક્વા કપિડેટેટ મેક્સવીની વેરો. ક્યુપિડેટટ ફોર લોકો નિસી, ઇએ હેલ્વેટિકા નુલ્લા કાર્લેસ. ટેટૂ કોસ્બી સ્વેટર ફૂડ ટ્રક, mcsweeney's quis non freegan vinyl. લો-ફાઇ વેસ એન્ડરસન +1 સાર્ટોરિયલ. કાર્લેસ નોન એસ્થેટિક એક્સરસિટેશન ક્વિસ નમ્રતા. બ્રુકલિન એડિપીસીસિંગ ક્રાફ્ટ બીયર વાઇસ કીટાર ડેઝરન્ટ.

એક

Occaecat commodo aliqua delectus. Fap ક્રાફ્ટ બીયર ડેઝરન્ટ સ્કેટબોર્ડ ea. લોમો સાયકલ રાઇટ્સ એડિપીસીસિંગ બન્હ મી, વેલીટ ઇએ સન નેક્સ્ટ લેવલ લોકાવોર સિંગલ-ઓરિજિન કોફી ઇન મેગ્ના વેનિઆમ. હાઇ લાઇફ આઇડી વિનાઇલ, ઇકો પાર્ક કન્ઝક્વેટ ક્વિસ એલિક્વિપ બન્હ મી પિચફોર્ક. વેરો VHS એ એડિપિસિસિંગ છે. DIY ન્યૂનતમ મેસેન્જર બેગ સાથે જોડો. Cred ex in, ટકાઉ ડેલેકટસ કોન્સેકટુર ફેની પેક આઇફોન.

બે

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.

કીટાર ટ્વી બ્લોગ, કુલ્પા મેસેન્જર બેગ માર્ફા ગમે તે ડિલેકટસ ફૂડ ટ્રક. Sapiente synth id ધારણા. Locavore sed helvetica cliche irony, thundercats તમે કદાચ તેમના વિશે સાંભળ્યું ન હોય પરિણામે હૂડી ગ્લુટેન-ફ્રી lo-fi fap aliquip. તેઓ વેચાઈ જાય તે પહેલાં લેબોર એલિટ પ્લેસિટ, ટેરી રિચર્ડસન પ્રોડેન્ટ બ્રંચ નેસિયન્ટ ક્વિસ કોસ્બી સ્વેટર પેરિયાતુર કેફિયેહ યુટ હેલ્વેટિકા આર્ટિસન. કાર્ડિગન ક્રાફ્ટ બીયર સીટન રેડીમેડ વેલીટ. VHS ચેમ્બ્રે લેબરિસ ટેમ્પર વેનિઅમ. એનિમ મોલીટ મિનિમ કોમોડો ઉલમકો થંડરકેટ્સ.


bootstrap-scrollspy.js નો ઉપયોગ કરીને

જાવાસ્ક્રિપ્ટ દ્વારા સ્ક્રોલસ્પીને કૉલ કરો:

  1. $ ( '#navbar' ). સ્ક્રોલસ્પી ()

માર્કઅપ

તમારા ટોપબાર નેવિગેશનમાં સરળતાથી સ્ક્રોલસ્પી વર્તણૂક ઉમેરવા data-spy="scroll"માટે, તમે જે તત્વની જાસૂસી કરવા માંગો છો તેમાં ફક્ત ઉમેરો (મોટાભાગે આ શરીર હશે).

  1. <body data-spy = "સ્ક્રોલ" > ... </body>
હેડ અપ! Navbar લિંક્સમાં ઉકેલી શકાય તેવા id લક્ષ્યો હોવા આવશ્યક છે. ઉદાહરણ તરીકે, <a href="#home">home</a>ડોમમાં કંઈક અનુરૂપ હોવું જોઈએ જેમ કે <div id="home"></div>.

પદ્ધતિઓ

.scrollspy('તાજું કરો')

DOM માંથી ઘટકો ઉમેરવા અથવા દૂર કરવા સાથે સ્ક્રોલસ્પીનો ઉપયોગ કરતી વખતે, તમારે રિફ્રેશ પદ્ધતિને આના જેવી કૉલ કરવાની જરૂર પડશે:

  1. $ ( '[ડેટા-સ્પાય="સ્ક્રોલ"]' ). દરેક ( કાર્ય () {
  2. var $spy = $ ( ). scrollspy ( 'તાજું કરો' )
  3. });

વિકલ્પો

નામ પ્રકાર મૂળભૂત વર્ણન
ઓફસેટ સંખ્યા 10 સ્ક્રોલની સ્થિતિની ગણતરી કરતી વખતે ઉપરથી ઓફસેટ કરવા માટેના પિક્સેલ્સ.

ઘટનાઓ

ઘટના વર્ણન
સક્રિય કરો જ્યારે પણ સ્ક્રોલસ્પી દ્વારા નવી આઇટમ સક્રિય થાય છે ત્યારે આ ઇવેન્ટ ફાયર થાય છે.

આ પ્લગઇન સ્થાનિક સામગ્રી દ્વારા સંક્રમણ માટે ઝડપી, ગતિશીલ ટેબ અને ગોળી કાર્યક્ષમતા ઉમેરે છે.

ફાઈલ ડાઉનલોડ

ઉદાહરણ ટૅબ્સ

છુપાયેલા પેન વચ્ચે ટૉગલ કરવા માટે નીચેની ટૅબ પર ક્લિક કરો, ડ્રોપડાઉન મેનૂ દ્વારા પણ.

કાચો ડેનિમ તમે કદાચ તેમને જીન શોર્ટ્સ ઓસ્ટિન વિશે સાંભળ્યું નથી. Nesciunt tofu stumptown aliqua, retro synth master cleanse. મૂછ ક્લિચ ટેમ્પોર, વિલિયમ્સબર્ગ કાર્લેસ વેગન હેલ્વેટિકા. Reprehenderit butcher retro keffiyeh dreamcatcher synth. કોસ્બી સ્વેટર ઇયુ બાન મી, ક્વિ ઇર ટેરી રિચર્ડસન ભૂતપૂર્વ સ્ક્વિડ. એલિક્વિપ પ્લેસેટ સાલ્વીયા સિલમ આઇફોન. Seitan aliquip quis cardigan American apparel, butcher 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. $ ( '#myTab a' ). ક્લિક કરો ( કાર્ય ( e ) {
  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વર્ગો ઉમેરવાથી ulબુટસ્ટ્રેપ ટેબ સ્ટાઇલ લાગુ થશે.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Home </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 = "active" ><a href = "#home" > ઘર </a></li>
  3. <li><a href = "#profile" > પ્રોફાઇલ </a></li>
  4. <li><a href = "#messages" > સંદેશાઓ </a></li>
  5. <li><a href = "#settings" > સેટિંગ્સ </a></li>
  6. </ul>
  7.  
  8. <div વર્ગ = "ટેબ-સામગ્રી" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( કાર્ય () {
  17. $ ( '#myTab a:last' ). ટેબ ( 'બતાવો' );
  18. })
  19. </script>

ઘટનાઓ

ઘટના વર્ણન
બતાવો આ ઇવેન્ટ ટેબ શો પર ફાયર થાય છે, પરંતુ નવી ટેબ બતાવવામાં આવે તે પહેલાં. અનુક્રમે સક્રિય ટેબ અને અગાઉના સક્રિય ટેબ (જો ઉપલબ્ધ હોય તો) નો ઉપયોગ કરો event.targetઅને તેને લક્ષ્ય બનાવો.event.relatedTarget
બતાવેલ આ ઇવેન્ટ ટેબ બતાવ્યા પછી ટેબ શો પર ફાયર થાય છે. અનુક્રમે સક્રિય ટેબ અને અગાઉના સક્રિય ટેબ (જો ઉપલબ્ધ હોય તો) નો ઉપયોગ કરો event.targetઅને તેને લક્ષ્ય બનાવો.event.relatedTarget
  1. $ ( 'a[data-toggle="tab"]' ). પર ( 'બતાવેલ' , કાર્ય ( e ) {
  2. _ લક્ષ્ય // સક્રિય ટેબ
  3. _ સંબંધિત લક્ષ્ય // અગાઉનું ટેબ
  4. })

ટૂલટિપ્સ વિશે

જેસન ફ્રેમ દ્વારા લખાયેલ ઉત્તમ jQuery.tipsy પ્લગઇન દ્વારા પ્રેરિત; ટૂલટિપ્સ એ અપડેટેડ વર્ઝન છે, જે ઈમેજીસ પર આધાર રાખતું નથી, એનિમેશન માટે css3 અને સ્થાનિક શીર્ષક સ્ટોરેજ માટે ડેટા-એટ્રીબ્યુટ્સનો ઉપયોગ કરે છે.

ફાઈલ ડાઉનલોડ

ટૂલટિપ્સના ઉપયોગનું ઉદાહરણ

ટૂલટિપ્સ જોવા માટે નીચેની લિંક્સ પર હોવર કરો:

ચુસ્ત પેન્ટ આગામી સ્તર keffiyeh તમે કદાચ તેમના વિશે સાંભળ્યું નથી. ફોટો બૂથ દાઢી કાચી ડેનિમ લેટરપ્રેસ વેગન મેસેન્જર બેગ સ્ટમ્પટાઉન. ફાર્મ-ટુ-ટેબલ સીટન, મેક્સવીની ફિક્સી સસ્ટેનેબલ ક્વિનોઆ 8-બીટ અમેરિકન એપેરલમાં ટેરી રિચર્ડસન વિનાઇલ ચેમ્બ્રે છે . દાઢી સ્ટમ્પટાઉન, કાર્ડિગન્સ બન્હ મી લોમો થંડરકેટ્સ. ટોફુ બાયોડીઝલ વિલિયમ્સબર્ગ માર્ફા, ચાર લોકો મેક્સવીની ક્લીન્સ વેગન ચેમ્બ્રે. એક ખરેખર માર્મિક કારીગર ગમે તે કીતાર , સીનસ્ટર ફાર્મ-ટુ-ટેબલ બેંકસી ઓસ્ટિન ટ્વિટર હેન્ડલ ફ્રીગન ક્રેડ રો ડેનિમ સિંગલ-ઓરિજિન કોફી વાયરલ.


bootstrap-tooltip.js નો ઉપયોગ કરવો

જાવાસ્ક્રિપ્ટ દ્વારા ટૂલટીપને ટ્રિગર કરો:

  1. $ ( '#example' ). ટૂલટિપ ( વિકલ્પો )

વિકલ્પો

નામ પ્રકાર મૂળભૂત વર્ણન
એનિમેશન બુલિયન સાચું ટૂલટીપ પર સીએસએસ ફેડ સંક્રમણ લાગુ કરો
પ્લેસમેન્ટ સ્ટ્રિંગ|ફંક્શન 'ટોચ' ટૂલટિપને કેવી રીતે સ્થાન આપવું - ટોચ | નીચે | ડાબે | અધિકાર
પસંદગીકાર તાર ખોટું જો પસંદગીકાર પ્રદાન કરવામાં આવે, તો ટૂલટિપ ઑબ્જેક્ટ્સ ઉલ્લેખિત લક્ષ્યોને સોંપવામાં આવશે.
શીર્ષક શબ્દમાળા | કાર્ય '' જો `શીર્ષક` ટૅગ હાજર ન હોય તો ડિફૉલ્ટ શીર્ષક મૂલ્ય
ટ્રિગર તાર 'હોવર' ટૂલટિપ કેવી રીતે ટ્રિગર થાય છે - હોવર | ફોકસ | મેન્યુઅલ
વિલંબ નંબર | પદાર્થ 0

ટૂલટિપ (ms) બતાવવામાં અને છુપાવવામાં વિલંબ - મેન્યુઅલ ટ્રિગર પ્રકાર પર લાગુ પડતું નથી

જો નંબર પૂરો પાડવામાં આવે છે, તો છુપાવો/શો બંને માટે વિલંબ લાગુ પડે છે

ઑબ્જેક્ટ માળખું છે:delay: { show: 500, hide: 100 }

હેડ અપ! વ્યક્તિગત ટૂલટિપ્સ માટેના વિકલ્પો વૈકલ્પિક રીતે ડેટા લક્ષણોના ઉપયોગ દ્વારા સ્પષ્ટ કરી શકાય છે.

માર્કઅપ

પ્રદર્શનના કારણોસર, ટૂલટિપ અને પોપઓવર ડેટા-એપીસ પસંદ કરવામાં આવે છે. જો તમે તેનો ઉપયોગ કરવા માંગતા હોવ તો માત્ર પસંદગીકાર વિકલ્પનો ઉલ્લેખ કરો.

  1. <a href = "#" rel = "tooltip" title = "first tooltip" > મારા ઉપર હોવર કરો </a>

પદ્ધતિઓ

$().ટૂલટીપ(વિકલ્પો)

તત્વ સંગ્રહમાં ટૂલટિપ હેન્ડલર જોડે છે.

.ટૂલટિપ('શો')

તત્વની ટૂલટિપ દર્શાવે છે.

  1. $ ( '# એલિમેન્ટ' ). ટૂલટિપ ( 'બતાવો' )

.ટૂલટિપ('છુપાવો')

તત્વની ટૂલટિપ છુપાવે છે.

  1. $ ( '# એલિમેન્ટ' ). ટૂલટિપ ( 'છુપાવો' )

.ટૂલટિપ('ટૉગલ')

તત્વની ટૂલટિપને ટૉગલ કરે છે.

  1. $ ( '# એલિમેન્ટ' ). ટૂલટિપ ( 'ટૉગલ' )

popovers વિશે

હાઉસિંગ ગૌણ માહિતી માટે કોઈપણ ઘટકમાં, iPad પરની જેમ સામગ્રીના નાના ઓવરલે ઉમેરો.

* સમાવવા માટે ટૂલટીપની જરૂર છે

ફાઈલ ડાઉનલોડ

ઉદાહરણ હોવર પોપઓવર

પોપઓવરને ટ્રિગર કરવા માટે બટન પર હોવર કરો.


bootstrap-popover.js નો ઉપયોગ કરવો

જાવાસ્ક્રિપ્ટ દ્વારા પોપોવર્સ સક્ષમ કરો:

  1. $ ( '#example' ). પોપઓવર ( વિકલ્પો )

વિકલ્પો

નામ પ્રકાર મૂળભૂત વર્ણન
એનિમેશન બુલિયન સાચું ટૂલટીપ પર સીએસએસ ફેડ સંક્રમણ લાગુ કરો
પ્લેસમેન્ટ સ્ટ્રિંગ|ફંક્શન 'જમણું' કેવી રીતે પોપઓવર - ટોપ | નીચે | ડાબે | અધિકાર
પસંદગીકાર તાર ખોટું જો પસંદગીકાર પ્રદાન કરવામાં આવે, તો ટૂલટિપ ઑબ્જેક્ટ્સ ઉલ્લેખિત લક્ષ્યોને સોંપવામાં આવશે
ટ્રિગર તાર 'હોવર' ટૂલટિપ કેવી રીતે ટ્રિગર થાય છે - હોવર | ફોકસ | મેન્યુઅલ
શીર્ષક શબ્દમાળા | કાર્ય '' જો `શીર્ષક` વિશેષતા હાજર ન હોય તો ડિફૉલ્ટ શીર્ષક મૂલ્ય
સામગ્રી શબ્દમાળા | કાર્ય '' જો `ડેટા-સામગ્રી` વિશેષતા હાજર ન હોય તો ડિફૉલ્ટ સામગ્રી મૂલ્ય
વિલંબ નંબર | પદાર્થ 0

પોપઓવર (એમએસ) બતાવવામાં અને છુપાવવામાં વિલંબ - મેન્યુઅલ ટ્રિગર પ્રકાર પર લાગુ પડતું નથી

જો નંબર પૂરો પાડવામાં આવે છે, તો છુપાવો/શો બંને માટે વિલંબ લાગુ પડે છે

ઑબ્જેક્ટ માળખું છે:delay: { show: 500, hide: 100 }

હેડ અપ! વ્યક્તિગત પોપોવર્સ માટેના વિકલ્પો વૈકલ્પિક રીતે ડેટા લક્ષણોના ઉપયોગ દ્વારા સ્પષ્ટ કરી શકાય છે.

માર્કઅપ

પ્રદર્શનના કારણોસર, ટૂલટિપ અને પોપઓવર ડેટા-એપીસ પસંદ કરવામાં આવે છે. જો તમે તેનો ઉપયોગ કરવા માંગતા હોવ તો માત્ર પસંદગીકાર વિકલ્પનો ઉલ્લેખ કરો.

પદ્ધતિઓ

$().પોપઓવર(વિકલ્પો)

તત્વ સંગ્રહ માટે પોપોવર્સનો પ્રારંભ કરે છે.

.પોપઓવર('શો')

તત્વો પોપઓવર દર્શાવે છે.

  1. $ ( '# એલિમેન્ટ' ). પોપઓવર ( 'શો' )

.પોપઓવર('છુપાવો')

તત્વો પોપઓવર છુપાવે છે.

  1. $ ( '# એલિમેન્ટ' ). પોપઓવર ( 'છુપાવો' )

.પોપઓવર('ટૉગલ')

તત્વો પોપઓવરને ટૉગલ કરે છે.

  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.

આ પગલાં લો અથવા આ કરો


bootstrap-alert.js નો ઉપયોગ કરવો

જાવાસ્ક્રિપ્ટ દ્વારા ચેતવણીને બરતરફી સક્ષમ કરો:

  1. $ ( ". ચેતવણી" ). ચેતવણી ()

માર્કઅપ

data-dismiss="alert"આપમેળે ચેતવણી બંધ કાર્યક્ષમતા આપવા માટે ફક્ત તમારા બંધ બટનમાં ઉમેરો .

  1. <a class = "close" data-dismiss = "alert" href = "#" > × </a>

પદ્ધતિઓ

$().ચેતવણી()

નજીકની કાર્યક્ષમતા સાથે તમામ ચેતવણીઓને લપેટી. જ્યારે તમારી ચેતવણીઓ બંધ હોય ત્યારે એનિમેટ થાય તે માટે, ખાતરી કરો કે તેમની પાસે .fadeઅને .inવર્ગ પહેલેથી જ લાગુ છે.

ચેતવણી ('બંધ')

ચેતવણી બંધ કરે છે.

  1. $ ( ". ચેતવણી" ). ચેતવણી ( 'બંધ' )

ઘટનાઓ

બુટસ્ટ્રેપનો ચેતવણી વર્ગ ચેતવણી કાર્યક્ષમતામાં હૂક કરવા માટે કેટલીક ઘટનાઓને ઉજાગર કરે છે.

ઘટના વર્ણન
બંધ closeજ્યારે ઇન્સ્ટન્સ પદ્ધતિને બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ ફાયર થાય છે.
બંધ જ્યારે ચેતવણી બંધ કરવામાં આવી હોય ત્યારે આ ઇવેન્ટ ફાયર કરવામાં આવે છે (css સંક્રમણો પૂર્ણ થવાની રાહ જોશે).
  1. $ ( '#my-alert' ). બાંધો ( 'બંધ' , કાર્ય () {
  2. // કંઈક કરવું…
  3. })

વિશે

બટનો સાથે વધુ કરો. કંટ્રોલ બટન જણાવે છે અથવા ટૂલબાર જેવા વધુ ઘટકો માટે બટનોના જૂથો બનાવો.

ફાઈલ ડાઉનલોડ

ઉદાહરણ ઉપયોગો

સ્ટેટ્સ અને ટૉગલ માટે બટન્સ પ્લગઇનનો ઉપયોગ કરો.

સ્ટેટફુલ
સિંગલ ટૉગલ
ચેકબોક્સ
રેડિયો

bootstrap-button.js નો ઉપયોગ કરવો

જાવાસ્ક્રિપ્ટ દ્વારા બટનોને સક્ષમ કરો:

  1. $ ( '.nav-tabs' ). બટન ()

માર્કઅપ

ડેટા લક્ષણો બટન પ્લગઇન માટે અભિન્ન છે. વિવિધ માર્કઅપ પ્રકારો માટે નીચે આપેલ ઉદાહરણ કોડ તપાસો.

  1. <!-- એક બટન પર ટોગલીંગ સક્રિય કરવા માટે data-toggle="button" ઉમેરો -->
  2. <button class = "btn" data-toggle = "button" > સિંગલ ટૉગલ </button>
  3.  
  4. <!-- btn-જૂથ પર ચેકબોક્સ શૈલી ટોગલ કરવા માટે data-toggle="buttons-checkbox" ઉમેરો -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > ડાબે </button>
  7. <button class = "btn" > મધ્ય </button>
  8. <button class = "btn" > જમણે </button>
  9. </div>
  10.  
  11. <!-- btn-ગ્રુપ પર રેડિયો શૈલી ટોગલ કરવા માટે data-toggle="buttons-radio" ઉમેરો -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > ડાબે </button>
  14. <button class = "btn" > મધ્ય </button>
  15. <button class = "btn" > જમણે </button>
  16. </div>

પદ્ધતિઓ

$().બટન('ટૉગલ')

ટૉગલ પુશ સ્ટેટ. બટનને એવો દેખાવ આપે છે કે તે સક્રિય થઈ ગયું છે.

હેડ અપ! data-toggleતમે એટ્રીબ્યુટનો ઉપયોગ કરીને બટનનું ઓટો ટોગલીંગ સક્ષમ કરી શકો છો .
  1. <button class = "btn" data-toggle = "button" > </button>

$().બટન('લોડિંગ')

બટનની સ્થિતિને લોડ કરવા માટે સેટ કરે છે - બટનને અક્ષમ કરે છે અને ટેક્સ્ટને લોડિંગ ટેક્સ્ટમાં સ્વેપ કરે છે. ડેટા એટ્રિબ્યુટનો ઉપયોગ કરીને લોડિંગ ટેક્સ્ટને બટન એલિમેન્ટ પર વ્યાખ્યાયિત કરવું જોઈએ data-loading-text.

  1. <button class = "btn" data-loading-text = "સામગ્રી લોડ કરી રહ્યું છે..." > ... </button>
હેડ અપ! ફાયરફોક્સ સમગ્ર પૃષ્ઠ લોડ પર અક્ષમ સ્થિતિને ચાલુ રાખે છે . આ માટેનો ઉપાય વાપરવાનો છે autocomplete="off".

$().બટન('રીસેટ')

બટન સ્થિતિ રીસેટ કરે છે - ટેક્સ્ટને મૂળ ટેક્સ્ટમાં સ્વેપ કરે છે.

$().બટન(સ્ટ્રિંગ)

બટન સ્થિતિ રીસેટ કરે છે - કોઈપણ ડેટા વ્યાખ્યાયિત ટેક્સ્ટ રાજ્યમાં ટેક્સ્ટને સ્વેપ કરે છે.

  1. <button class = "btn" data-complete-text = "સમાપ્ત!" > ... </ બટન>
  2. <script>
  3. $ ( '.btn' ). બટન ( 'પૂર્ણ' )
  4. </script>

વિશે

એકોર્ડિયન અને નેવિગેશન જેવા સંકુચિત ઘટકો માટે આધાર શૈલીઓ અને લવચીક આધાર મેળવો.

ફાઈલ ડાઉનલોડ

* સંક્રમણ પ્લગઇનને સમાવવા માટે જરૂરી છે.

ઉદાહરણ એકોર્ડિયન

સંકુચિત પ્લગઇનનો ઉપયોગ કરીને, અમે એક સરળ એકોર્ડિયન શૈલીનું વિજેટ બનાવ્યું છે:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry richardson ad squid. 3 વુલ્ફ મૂન ઑફિસિયા ઓટ, નોન કપિડેટેટ સ્કેટબોર્ડ ડોલર બ્રંચ. ફૂડ ટ્રક quinoa nesciunt laborum eiusmod. બ્રંચ 3 વુલ્ફ મૂન ટેમ્પોર, સનટ એલિક્વા તેના પર એક પક્ષી મૂકે છે સ્ક્વિડ સિંગલ-ઓરિજિન કોફી નુલ્લા એસુમેન્ડા શોરેડિચ એટ. નિહિલ એનિમ કેફીયેહ હેલ્વેટિકા, ક્રાફ્ટ બીયર લેબર વેસ એન્ડરસન ક્રેડ નેસિયન્ટ સેપિએન્ટ ઇએ પ્રોડેન્ટ. એડ વેગન સિવાય કસાઈ વાઇસ લોમો. લેગિંગ્સ occaecat ક્રાફ્ટ બીયર ફાર્મ-ટુ-ટેબલ, કાચો ડેનિમ સૌંદર્યલક્ષી સિન્થ નેસિયન્ટ જે તમે કદાચ તેમના વિશે સાંભળ્યું નહીં હોય.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry richardson ad squid. 3 વુલ્ફ મૂન ઑફિસિયા ઓટ, નોન કપિડેટેટ સ્કેટબોર્ડ ડોલર બ્રંચ. ફૂડ ટ્રક quinoa nesciunt laborum eiusmod. બ્રંચ 3 વુલ્ફ મૂન ટેમ્પોર, સનટ એલિક્વા તેના પર એક પક્ષી મૂકે છે સ્ક્વિડ સિંગલ-ઓરિજિન કોફી નુલ્લા એસુમેન્ડા શોરેડિચ એટ. નિહિલ એનિમ કેફીયેહ હેલ્વેટિકા, ક્રાફ્ટ બીયર લેબર વેસ એન્ડરસન ક્રેડ નેસિયન્ટ સેપિએન્ટ ઇએ પ્રોડેન્ટ. એડ વેગન સિવાય કસાઈ વાઇસ લોમો. લેગિંગ્સ occaecat ક્રાફ્ટ બીયર ફાર્મ-ટુ-ટેબલ, કાચો ડેનિમ સૌંદર્યલક્ષી સિન્થ નેસિયન્ટ જે તમે કદાચ તેમના વિશે સાંભળ્યું નહીં હોય.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry richardson ad squid. 3 વુલ્ફ મૂન ઑફિસિયા ઓટ, નોન કપિડેટેટ સ્કેટબોર્ડ ડોલર બ્રંચ. ફૂડ ટ્રક quinoa nesciunt laborum eiusmod. બ્રંચ 3 વુલ્ફ મૂન ટેમ્પોર, સનટ એલિક્વા તેના પર એક પક્ષી મૂકે છે સ્ક્વિડ સિંગલ-ઓરિજિન કોફી નુલ્લા એસુમેન્ડા શોરેડિચ એટ. નિહિલ એનિમ કેફીયેહ હેલ્વેટિકા, ક્રાફ્ટ બીયર લેબર વેસ એન્ડરસન ક્રેડ નેસિયન્ટ સેપિએન્ટ ઇએ પ્રોડેન્ટ. એડ વેગન સિવાય કસાઈ વાઇસ લોમો. લેગિંગ્સ occaecat ક્રાફ્ટ બીયર ફાર્મ-ટુ-ટેબલ, કાચો ડેનિમ સૌંદર્યલક્ષી સિન્થ નેસિયન્ટ જે તમે કદાચ તેમના વિશે સાંભળ્યું નહીં હોય.

bootstrap-collapse.js નો ઉપયોગ કરવો

જાવાસ્ક્રિપ્ટ દ્વારા સક્ષમ કરો:

  1. $ ( ". સંકુચિત કરો" ). પતન ()

વિકલ્પો

નામ પ્રકાર મૂળભૂત વર્ણન
પિતૃ પસંદગીકાર ખોટું જો પસંદગીકર્તા હોય તો જ્યારે આ સંકુચિત આઇટમ બતાવવામાં આવે ત્યારે ઉલ્લેખિત પેરેન્ટ હેઠળના તમામ સંકુચિત તત્વો બંધ થઈ જશે. (પરંપરાગત એકોર્ડિયન વર્તન જેવું જ)
ટૉગલ બુલિયન સાચું ઇન્વોકેશન પર સંકુચિત ઘટકને ટૉગલ કરે છે

માર્કઅપ

સંકુચિત તત્વનું નિયંત્રણ આપમેળે સોંપવા માટે ફક્ત ઘટકમાં ઉમેરો data-toggle="collapse"અને a . data-targetસંકુચિતતા data-targetલાગુ કરવા માટે વિશેષતા css પસંદગીકારને સ્વીકારે છે. collapseસંકુચિત તત્વમાં વર્ગ ઉમેરવાની ખાતરી કરો . જો તમે તેને ડિફોલ્ટ ખોલવા માંગતા હો, તો વધારાનો વર્ગ ઉમેરો in.

  1. <બટન વર્ગ = "btn btn-ડેન્જર" ડેટા-ટૉગલ = "કોલેપ્સ " ડેટા-ટાર્ગેટ = "#ડેમો" >
  2. સરળ સંકુચિત
  3. </ બટન>
  4.  
  5. <div id = "ડેમો" વર્ગ = "સંકુચિત કરો" > </div>
હેડ અપ! સંકુચિત નિયંત્રણમાં એકોર્ડિયન જેવા જૂથ સંચાલન ઉમેરવા માટે, ડેટા વિશેષતા ઉમેરો data-parent="#selector". આને ક્રિયામાં જોવા માટે ડેમોનો સંદર્ભ લો.

પદ્ધતિઓ

.કોલેપ્સ (વિકલ્પો)

સંકુચિત તત્વ તરીકે તમારી સામગ્રીને સક્રિય કરે છે. વૈકલ્પિક વિકલ્પો સ્વીકારે છે object.

  1. $ ( '#myCollapsible' ). પતન ({
  2. ટૉગલ કરો : ખોટા
  3. })

.કોલેપ્સ ('ટૉગલ')

સંકુચિત તત્વને બતાવવામાં અથવા છુપાવવા માટે ટૉગલ કરે છે.

.કોલેપ્સ ('શો')

સંકુચિત તત્વ બતાવે છે.

.કોલેપ્સ ('છુપાવો')

સંકુચિત તત્વ છુપાવે છે.

ઘટનાઓ

બુટસ્ટ્રેપનો પતન વર્ગ સંકુચિત કાર્યક્ષમતામાં હૂક કરવા માટે કેટલીક ઘટનાઓને ઉજાગર કરે છે.

ઘટના વર્ણન
બતાવો showજ્યારે ઇન્સ્ટન્સ પદ્ધતિને બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ ફાયર થાય છે.
બતાવેલ જ્યારે સંકુચિત ઘટક વપરાશકર્તાને દૃશ્યક્ષમ બનાવવામાં આવે ત્યારે આ ઇવેન્ટ ફાયર કરવામાં આવે છે (css સંક્રમણો પૂર્ણ થવાની રાહ જોશે).
છુપાવો hideજ્યારે પદ્ધતિને બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ કાઢી નાખવામાં આવે છે.
છુપાયેલ જ્યારે સંકુચિત ઘટક વપરાશકર્તાથી છુપાયેલ હોય ત્યારે આ ઇવેન્ટ ફાયર કરવામાં આવે છે (css સંક્રમણો પૂર્ણ થવાની રાહ જોશે).
  1. $ ( '#myCollapsible' ). પર ( 'છુપાયેલ' , કાર્ય () {
  2. // કંઈક કરવું…
  3. })

વિશે

કોઈપણ ફોર્મ ટેક્સ્ટ ઇનપુટ સાથે ઝડપથી ભવ્ય ટાઇપહેડ્સ બનાવવા માટે મૂળભૂત, સરળતાથી વિસ્તૃત પ્લગઇન.

ફાઈલ ડાઉનલોડ

ઉદાહરણ

ટાઇપહેડ પરિણામો બતાવવા માટે નીચેના ફીલ્ડમાં ટાઇપ કરવાનું શરૂ કરો.


bootstrap-typeahead.js નો ઉપયોગ કરવો

જાવાસ્ક્રિપ્ટ દ્વારા ટાઇપહેડને કૉલ કરો:

  1. $ ( '.ટાઈપહેડ' ). ટાઈપહેડ ()

વિકલ્પો

નામ પ્રકાર મૂળભૂત વર્ણન
સ્ત્રોત એરે [ ] જેની સામે ક્વેરી કરવાનો ડેટા સ્ત્રોત.
વસ્તુઓ સંખ્યા 8 ડ્રોપડાઉનમાં પ્રદર્શિત કરવા માટેની આઇટમ્સની મહત્તમ સંખ્યા.
મેચર કાર્ય કેસ અસંવેદનશીલ ક્વેરી આઇટમ સાથે મેળ ખાય છે કે કેમ તે નિર્ધારિત કરવા માટે વપરાતી પદ્ધતિ. એક જ દલીલ સ્વીકારે છે, જેની itemસામે ક્વેરીનું પરીક્ષણ કરવું છે. સાથે વર્તમાન ક્વેરી ઍક્સેસ કરો this.query. trueજો ક્વેરી મેચ હોય તો બુલિયન પરત કરો .
સોર્ટર કાર્ય ચોક્કસ મેળ,
કેસ સંવેદનશીલ,
કેસ અસંવેદનશીલ
સ્વતઃપૂર્ણ પરિણામોને સૉર્ટ કરવા માટે વપરાતી પદ્ધતિ. એક જ દલીલ સ્વીકારે છે itemsઅને તેમાં ટાઇપહેડ ઇન્સ્ટન્સનો અવકાશ છે. સાથે વર્તમાન ક્વેરીનો સંદર્ભ લો this.query.
હાઇલાઇટર કાર્ય તમામ ડિફોલ્ટ મેચોને હાઇલાઇટ કરે છે સ્વતઃપૂર્ણ પરિણામોને પ્રકાશિત કરવા માટે વપરાતી પદ્ધતિ. એક જ દલીલ સ્વીકારે છે itemઅને તેમાં ટાઇપહેડ ઇન્સ્ટન્સનો અવકાશ છે. html પરત કરવું જોઈએ.

માર્કઅપ

ટાઇપહેડ કાર્યક્ષમતા સાથે તત્વની નોંધણી કરવા માટે ડેટા લક્ષણો ઉમેરો.

  1. <ઇનપુટ પ્રકાર = "ટેક્સ્ટ" ડેટા- પ્રોવિડ = "ટાઇપહેડ" >

પદ્ધતિઓ

.typeahead(વિકલ્પો)

ટાઇપહેડ સાથે ઇનપુટ શરૂ કરે છે.