અમારું મોડલ પ્લગઇન પરંપરાગત મોડલ js પ્લગઇન પરનું એક સુપર સ્લિમ ટેક છે, જેમાં ટ્વિટર પર અમને અહીં જરૂરી હોય તેવી માત્ર એકદમ કાર્યક્ષમતાનો સમાવેશ કરવાની ખાસ કાળજી લેવામાં આવે છે.

ડાઉનલોડ કરો

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

$ ( '#my-modal' ). મોડલ ( વિકલ્પો )

વિકલ્પો

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

માર્કઅપ

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

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static" > મોડલ લોંચ કરો </a>    

નોટિસ જો તમે ઇચ્છો છો કે તમારું મોડલ અંદર અને બહાર એનિમેટ થાય, તો ફક્ત .fadeતમારા ઘટકમાં એક વર્ગ ઉમેરો .modal(આને ક્રિયામાં જોવા માટે ડેમોનો સંદર્ભ લો).

પદ્ધતિઓ

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

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

$ ( '#my-modal' ). મોડલ ({
  કીબોર્ડ : સાચું 
})

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

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

$ ( '#my-modal' ). મોડલ ( 'ટૉગલ' )

મોડલ('શો')

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

$ ( '#my-modal' ). મોડલ ( 'શો' )

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

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

$ ( '#my-modal' ). મોડલ ( 'છુપાવો' )

મોડલ(સાચું)

એલિમેન્ટ્સ મોડલ ક્લાસ ઇન્સ્ટન્સ પરત કરે છે.

$ ( '#my-modal' ). મોડલ ( સાચું )

નોંધ કરો વૈકલ્પિક રીતે, આ સાથે પુનઃપ્રાપ્ત કરી શકાય છે $().data('modal').

ઘટનાઓ

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

ઘટના	વર્ણન
બતાવો	showજ્યારે ઇન્સ્ટન્સ પદ્ધતિને બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ ફાયર થાય છે.
બતાવેલ	જ્યારે મોડલ વપરાશકર્તાને દૃશ્યક્ષમ બનાવવામાં આવે ત્યારે આ ઇવેન્ટને બરતરફ કરવામાં આવે છે (css સંક્રમણો પૂર્ણ થવાની રાહ જોશે).
છુપાવો	hideજ્યારે ઇન્સ્ટન્સ મેથડ બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ કાઢી નાખવામાં આવે છે.
છુપાયેલ	જ્યારે મોડલ વપરાશકર્તાથી છુપાવવાનું સમાપ્ત કરે છે ત્યારે આ ઇવેન્ટને કાઢી નાખવામાં આવે છે (css સંક્રમણો પૂર્ણ થવાની રાહ જોશે).

$ ( '#my-modal' ). બાંધો ( 'છુપાયેલ' , કાર્ય () {   
  // કંઈક કરવું ...
})

ડેમો

મોડલ લોંચ કરો

આ પ્લગઇન બુટસ્ટ્રેપ ટોપબાર અથવા ટેબ કરેલ નેવિગેશનમાં ડ્રોપડાઉન ક્રિયાપ્રતિક્રિયા ઉમેરવા માટે છે.

ડાઉનલોડ કરો

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

$ ( '#topbar' ). ડ્રોપડાઉન ()

માર્કઅપ

કોઈપણ નેવી એલિમેન્ટમાં ઝડપથી ડ્રોપડાઉન કાર્યક્ષમતા ઉમેરવા માટે, data-dropdownવિશેષતાનો ઉપયોગ કરો. કોઈપણ માન્ય બુટસ્ટ્રેપ ડ્રોપડાઉન આપમેળે સક્રિય થઈ જશે.

<ul class = "ટેબ્સ" > 
  <li class = "active" ><a href = "#" > હોમ </a></li>  
  <li class = "ડ્રોપડાઉન" ડેટા-ડ્રોપડાઉન = "ડ્રોપડાઉન" >   
    <a href = "#" વર્ગ = "ડ્રોપડાઉન-ટોગલ" > ડ્રોપડાઉન </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.

પદ્ધતિઓ

$().ડ્રોપડાઉન()

આપેલ ટોપબાર અથવા ટેબ કરેલ નેવિગેશન માટે મેનુને સક્રિય કરવા માટે એક પ્રોગ્રામેટિક API.

ડેમો

આ પ્લગઇન બુટસ્ટ્રેપ ટોપબારમાં સ્ક્રોલસ્પી (ઓટો અપડેટીંગ નેવી) ક્રિયાપ્રતિક્રિયા ઉમેરવા માટે છે.

ડાઉનલોડ કરો

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

$ ( '#topbar' ). scrollSpy ()

માર્કઅપ

તમારા નેવીમાં સરળતાથી સ્ક્રોલસ્પી વર્તન ઉમેરવા માટે, ફક્ત data-scrollspyએટ્રિબ્યુટને ઉમેરો .topbar.

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

પદ્ધતિઓ

$().scrollSpy()

વપરાશકર્તાઓ સ્ક્રોલ સ્થિતિ દ્વારા નેવિગેશન બટનોને સ્વતઃ સક્રિય કરે છે.

$ ( 'બોડી > .ટોપબાર' ). scrollSpy ()

નોંધ કરો ટોપબાર એન્કર ટૅગ્સમાં ઉકેલી શકાય તેવા id લક્ષ્યો હોવા આવશ્યક છે. ઉદાહરણ તરીકે, <a href="#home">home</a>ડોમમાં કંઈક અનુરૂપ હોવું જોઈએ જેમ કે <div id="home"></div>.

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

સ્ક્રોલસ્પી પ્રદર્શન માટે એનએવી બટનો અને વિભાગ કોઓર્ડિનેટ્સ કેશ કરે છે. જો તમારે આ કેશને અપડેટ કરવાની જરૂર હોય (સંભવતઃ જો તમારી પાસે ગતિશીલ સામગ્રી હોય) તો ફક્ત આ રિફ્રેશ પદ્ધતિને કૉલ કરો. જો તમે તમારા સ્ક્રોલસ્પાયને વ્યાખ્યાયિત કરવા માટે ડેટા એટ્રિબ્યુટનો ઉપયોગ કર્યો હોય, તો ફક્ત શરીર પર રિફ્રેશને કૉલ કરો.

$ ( 'શરીર' ). scrollSpy ( 'તાજું કરો' )

ડેમો

આ પૃષ્ઠ પર ટોપબાર નેવિગેશન તપાસો.

આ પ્લગઇન બટન સ્થિતિનું સંચાલન કરવા માટે વધારાની કાર્યક્ષમતા પ્રદાન કરે છે.

ડાઉનલોડ કરો

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

$ ( '.tabs' ). બટન ()

પદ્ધતિઓ

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

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

નોટિસdata-toggle તમે એટ્રીબ્યુટનો ઉપયોગ કરીને બટનનું ઓટો ટોગલીંગ સક્ષમ કરી શકો છો .

<button class = "btn" data-toggle = "toggle" > ... </button>   

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

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

<button class = "btn" data-loading-text = "સામગ્રી લોડ કરી રહ્યું છે..." > ... </button>   

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

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

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

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

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

ડેમો

ડેમો લોડ કરી રહ્યું છે ડેમો ટૉગલ કરો

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

ડાઉનલોડ કરો

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

$ ( '.tabs' ). ટૅબ્સ ()

માર્કઅપ

data-tabsતમે કોઈપણ જાવાસ્ક્રિપ્ટ લખ્યા વિના ટેબ અથવા પિલ નેવિગેશનને ફક્ત એક અથવા data-pillsવિશેષતા આપીને સક્રિય કરી શકો છો .

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

પદ્ધતિઓ

$().ટેબ અથવા $().ગોળીઓ

આપેલ કન્ટેનર માટે ટેબ અને પિલ કાર્યક્ષમતાને સક્રિય કરે છે. ટેબ લિંક્સ દસ્તાવેજમાં id નો સંદર્ભ આપવો જોઈએ.

<ul class = "ટેબ્સ" > 
  <li class = "active" ><a href = "#home" > ઘર </a></li>  
  <li><a href = "#profile" > પ્રોફાઇલ </a></li> 
  <li><a href = "#messages" > સંદેશાઓ </a></li> 
  <li><a href = "#settings" > સેટિંગ્સ </a></li> 
</ul>
 
<div class = "pill-content" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "profile" > ... </div> 
  <div id = "messages" > ... </div> 
  <div id = "સેટિંગ્સ" > ... </div> 
</div>
 
<script>
  $ ( કાર્ય () {  
    $ ( '.tabs' ). ટૅબ્સ ()
  })
</script>

ઘટનાઓ

ઘટના	વર્ણન
ફેરફાર	આ ઇવેન્ટ ટેબ ફેરફાર પર શરૂ થાય છે. અનુક્રમે સક્રિય ટેબ અને અગાઉના સક્રિય ટેબનો ઉપયોગ કરો event.targetઅને તેને લક્ષ્ય બનાવો.event.relatedTarget

$ ( '#.tabs' ). બાંધો ( 'બદલો' , કાર્ય ( e ) {   
  ઇ _ લક્ષ્ય // સક્રિય ટેબ
  ઇ _ સંબંધિત લક્ષ્ય // અગાઉનું ટેબ
})

ડેમો

• ઘર
• પ્રોફાઇલ
• સંદેશાઓ
• સેટિંગ્સ
• ડ્રોપડાઉન
  • @ચરબી
  • @mdo

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

ડાઉનલોડ કરો

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

$ ( '#example' ). ટ્વિપ્સી ( વિકલ્પો )

વિકલ્પો

નામ	પ્રકાર	મૂળભૂત	વર્ણન
એનિમેટ	બુલિયન	સાચું	ટૂલટીપ પર સીએસએસ ફેડ સંક્રમણ લાગુ કરો
વિલંબ	સંખ્યા	0	ટૂલટિપ (ms) દર્શાવતા પહેલા વિલંબ
વિલંબ	સંખ્યા	0	ટૂલટિપ છુપાવતા પહેલા વિલંબ (ms)
ફોલબેક	તાર	''	જ્યારે કોઈ ટૂલટીપ શીર્ષક હાજર ન હોય ત્યારે વાપરવા માટે ટેક્સ્ટ
પ્લેસમેન્ટ	તાર	'ઉપર'	ટૂલટીપને કેવી રીતે સ્થાન આપવું - ઉપર | નીચે | ડાબે | અધિકાર
html	બુલિયન	ખોટું	ટૂલટિપમાં HTML સામગ્રીને મંજૂરી આપે છે
જીવંત	બુલિયન	ખોટું	વ્યક્તિગત ઇવેન્ટ હેન્ડલર્સને બદલે ઇવેન્ટ ડેલિગેશનનો ઉપયોગ કરો
ઓફસેટ	સંખ્યા	0	લક્ષ્ય તત્વમાંથી ટૂલટિપનો પિક્સેલ ઑફસેટ
શીર્ષક	શબ્દમાળા, કાર્ય	'શીર્ષક'	શીર્ષક ટેક્સ્ટ પુનઃપ્રાપ્ત કરવા માટેની વિશેષતા અથવા પદ્ધતિ
ટ્રિગર	તાર	'હોવર'	ટૂલટિપ કેવી રીતે ટ્રિગર થાય છે - હોવર | ફોકસ | મેન્યુઅલ
નમૂનો	તાર	[મૂળભૂત માર્કઅપ]	twipsy રેન્ડર કરવા માટે વપરાયેલ html ટેમ્પલેટ.

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

<a href = "#" data-placement = "below" rel = 'twipsy' title = 'કેટલાક શીર્ષક ટેક્સ્ટ' > ટેક્સ્ટ </a>    

પદ્ધતિઓ

$().twipsy(વિકલ્પો)

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

.twipsy('શો')

એક તત્વો twipsy છતી કરે છે.

$ ( '# એલિમેન્ટ' ). ટ્વિપ્સી ( 'શો' )

.twipsy('છુપાવો')

એક તત્વો twipsy છુપાવે છે.

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

.twipsy(સાચું)

એલિમેન્ટ્સ ટ્વિપ્સી ક્લાસ ઇન્સ્ટન્સ પરત કરે છે.

$ ( '# એલિમેન્ટ' ). ટ્વિપ્સી ( સાચું )

નોંધ કરો વૈકલ્પિક રીતે, આ સાથે પુનઃપ્રાપ્ત કરી શકાય છે $().data('twipsy').

ડેમો

પોપઓવર પ્લગઈન તમારી એપ્લિકેશનમાં પોપઓવર ઉમેરવા માટે એક સરળ ઈન્ટરફેસ પૂરું પાડે છે. તે bootstrap-twipsy.js પ્લગઇનને વિસ્તૃત કરે છે, તેથી તમારા પ્રોજેક્ટમાં પોપોવર્સનો સમાવેશ કરતી વખતે તે ફાઇલને પણ પડાવી લેવાની ખાતરી કરો!

નોટિસ તમારે bootstrap-popover.js પહેલાં bootstrap-twipsy.js ફાઇલનો સમાવેશ કરવો આવશ્યક છે.

ડાઉનલોડ કરો

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

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

વિકલ્પો

નામ	પ્રકાર	મૂળભૂત	વર્ણન
એનિમેટ	બુલિયન	સાચું	ટૂલટીપ પર સીએસએસ ફેડ સંક્રમણ લાગુ કરો
વિલંબ	સંખ્યા	0	ટૂલટિપ (ms) દર્શાવતા પહેલા વિલંબ
વિલંબ	સંખ્યા	0	ટૂલટિપ છુપાવતા પહેલા વિલંબ (ms)
ફોલબેક	તાર	''	જ્યારે કોઈ ટૂલટીપ શીર્ષક હાજર ન હોય ત્યારે વાપરવા માટે ટેક્સ્ટ
પ્લેસમેન્ટ	તાર	'જમણું'	ટૂલટીપને કેવી રીતે સ્થાન આપવું - ઉપર | નીચે | ડાબે | અધિકાર
html	બુલિયન	ખોટું	ટૂલટિપમાં HTML સામગ્રીને મંજૂરી આપે છે
જીવંત	બુલિયન	ખોટું	વ્યક્તિગત ઇવેન્ટ હેન્ડલર્સને બદલે ઇવેન્ટ ડેલિગેશનનો ઉપયોગ કરો
ઓફસેટ	સંખ્યા	0	લક્ષ્ય તત્વમાંથી ટૂલટિપનો પિક્સેલ ઑફસેટ
શીર્ષક	શબ્દમાળા, કાર્ય	'શીર્ષક'	શીર્ષક ટેક્સ્ટ પુનઃપ્રાપ્ત કરવા માટેની વિશેષતા અથવા પદ્ધતિ
સામગ્રી	શબ્દમાળા, કાર્ય	'ડેટા-સામગ્રી'	સામગ્રી ટેક્સ્ટ પુનઃપ્રાપ્ત કરવા માટેની સ્ટ્રિંગ અથવા પદ્ધતિ. જો કોઈ પ્રદાન કરવામાં આવ્યું નથી, તો સામગ્રી ડેટા-સામગ્રી વિશેષતામાંથી મેળવવામાં આવશે.
ટ્રિગર	તાર	'હોવર'	ટૂલટિપ કેવી રીતે ટ્રિગર થાય છે - હોવર | ફોકસ | મેન્યુઅલ
નમૂનો	તાર	[મૂળભૂત માર્કઅપ]	પોપઓવર રેન્ડર કરવા માટે વપરાયેલ html ટેમ્પલેટ.

નોંધ કરો વ્યક્તિગત પોપઓવર ઇન્સ્ટન્સ વિકલ્પો વૈકલ્પિક રીતે ડેટા લક્ષણોના ઉપયોગ દ્વારા સ્પષ્ટ કરી શકાય છે.

<a ડેટા-પ્લેસમેન્ટ = "નીચે" href = "#" વર્ગ = "btn જોખમ" rel = "popover" > ટેક્સ્ટ </a>    

પદ્ધતિઓ

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

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

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

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

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

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

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

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

ડેમો

પોપઓવર માટે હોવર કરો

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

ડાઉનલોડ કરો

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

$ ( ". ચેતવણી-સંદેશ" ). ચેતવણી ()

માર્કઅપ

data-alertતમારા ચેતવણી સંદેશાઓને આપમેળે નજીકની કાર્યક્ષમતા આપવા માટે ફક્ત એક વિશેષતા ઉમેરો .

વિકલ્પો

નામ	પ્રકાર	મૂળભૂત	વર્ણન
પસંદગીકાર	તાર	'.બંધ'	ચેતવણીને બંધ કરવા માટે કયા પસંદગીકારને લક્ષ્ય બનાવવું.

પદ્ધતિઓ

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

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

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

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

$ ( ". ચેતવણી-સંદેશ" ). ચેતવણી ( 'બંધ' )

ડેમો