Source

પોપોવર્સ

બૂટસ્ટ્રેપ પોપોવર્સ ઉમેરવા માટે દસ્તાવેજીકરણ અને ઉદાહરણો, જેમ કે iOS માં જોવા મળે છે, તમારી સાઇટ પરના કોઈપણ ઘટકમાં.

ઝાંખી

પોપઓવર પ્લગઇનનો ઉપયોગ કરતી વખતે જાણવા જેવી બાબતો:

  • પોપોવર્સ પોઝિશનિંગ માટે 3જી પાર્ટી લાઇબ્રેરી Popper.js પર આધાર રાખે છે . તમારે bootstrap.js પહેલાં popper.min.js શામેલ કરવું આવશ્યક છે અથવા popovers કામ કરવા માટે bootstrap.bundle.min.js/ જેમાં Popper.js શામેલ છે તેનો ઉપયોગ કરો!bootstrap.bundle.js
  • પોપોવર્સને અવલંબન તરીકે ટૂલટિપ પ્લગઇનની જરૂર છે.
  • જો તમે સ્ત્રોતમાંથી અમારી JavaScript બનાવી રહ્યાં છો, તો તેને જરૂરીutil.js છે .
  • પોપોવર્સ કામગીરીના કારણોસર પસંદ કરવામાં આવે છે, તેથી તમારે તેમને જાતે જ પ્રારંભ કરવું આવશ્યક છે .
  • શૂન્ય-લંબાઈ titleઅને contentમૂલ્યો ક્યારેય પોપઓવર બતાવશે નહીં.
  • container: 'body'વધુ જટિલ ઘટકો (જેમ કે અમારા ઇનપુટ જૂથો, બટન જૂથો, વગેરે) માં રેન્ડરિંગ સમસ્યાઓ ટાળવા માટે સ્પષ્ટ કરો .
  • છુપાયેલા તત્વો પર પોપઓવરને ટ્રિગર કરવું કામ કરશે નહીં.
  • .disabledરેપર એલિમેન્ટ પર અથવા disabledતત્વો માટે પોપોવર્સ ટ્રિગર થવું આવશ્યક છે.
  • જ્યારે બહુવિધ રેખાઓ પર લપેટતા એન્કરથી ટ્રિગર થાય છે, ત્યારે પોપોવર્સ એન્કરની એકંદર પહોળાઈ વચ્ચે કેન્દ્રિત કરવામાં આવશે. આ વર્તનને ટાળવા માટે white-space: nowrap;તમારા s નો ઉપયોગ કરો.<a>
  • પોપોવર્સ તેમના અનુરૂપ ઘટકોને DOMમાંથી દૂર કરવામાં આવે તે પહેલાં છુપાયેલા હોવા જોઈએ.

કેટલાક ઉદાહરણો સાથે પોપોવર્સ કેવી રીતે કાર્ય કરે છે તે જોવા માટે વાંચવાનું ચાલુ રાખો.

ઉદાહરણ: દરેક જગ્યાએ પોપોવર્સ સક્ષમ કરો

પૃષ્ઠ પરના તમામ પોપોવર્સને પ્રારંભ કરવાની એક રીત એ છે કે તેમને તેમની data-toggleવિશેષતા દ્વારા પસંદ કરવી:

$(function () {
  $('[data-toggle="popover"]').popover()
})

ઉદાહરણ: containerવિકલ્પનો ઉપયોગ કરવો

જ્યારે તમારી પાસે પેરેંટ એલિમેન્ટ પર કેટલીક શૈલીઓ હોય જે પોપઓવરમાં દખલ કરે છે, ત્યારે તમે એક કસ્ટમનો ઉલ્લેખ કરવા માગો છો containerજેથી કરીને પોપઓવરનું HTML તેના બદલે તે ઘટકમાં દેખાય.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

ઉદાહરણ

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

ચાર દિશાઓ

ચાર વિકલ્પો ઉપલબ્ધ છે: ઉપર, જમણે, નીચે અને ડાબે સંરેખિત.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

આગલી ક્લિક પર કાઢી નાખો

focusટૉગલ એલિમેન્ટ કરતાં અલગ તત્વના વપરાશકર્તાના આગલા ક્લિક પરના પોપઓવરને કાઢી નાખવા માટે ટ્રિગરનો ઉપયોગ કરો .

ડિસમિસ-ઓન-નેક્સ્ટ-ક્લિક માટે ચોક્કસ માર્કઅપ જરૂરી છે

યોગ્ય ક્રોસ-બ્રાઉઝર અને ક્રોસ-પ્લેટફોર્મ વર્તણૂક માટે, તમારે ટૅગનો ઉપયોગ કરવો જોઈએ <a>, ટૅગનો નહીં<button> , અને તમારે tabindexએટ્રિબ્યુટ પણ શામેલ કરવું આવશ્યક છે.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
$('.popover-dismiss').popover({
  trigger: 'focus'
})

અક્ષમ તત્વો

એટ્રિબ્યુટ સાથેના ઘટકો disabledઇન્ટરેક્ટિવ નથી, એટલે કે વપરાશકર્તાઓ પોપઓવર (અથવા ટૂલટિપ) ટ્રિગર કરવા માટે તેમને હોવર અથવા ક્લિક કરી શકતા નથી. વર્કઅરાઉન્ડ તરીકે, તમે રેપરથી પોપઓવરને ટ્રિગર કરવા <div>અથવા અક્ષમ તત્વ પર <span>ઓવરરાઇડ કરવા માંગો છો.pointer-events

અક્ષમ પોપઓવર ટ્રિગર્સ માટે, તમે પણ પસંદ કરી શકો છો data-trigger="hover"જેથી પોપઓવર તમારા વપરાશકર્તાઓને તાત્કાલિક દ્રશ્ય પ્રતિસાદ તરીકે દેખાય કારણ કે તેઓ અક્ષમ તત્વ પર ક્લિક કરવાની અપેક્ષા રાખતા નથી.

<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

ઉપયોગ

JavaScript દ્વારા પોપોવર્સ સક્ષમ કરો:

$('#example').popover(options)

વિકલ્પો

વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને data-, જેમ કે માં ઉમેરો data-animation="".

નામ પ્રકાર ડિફૉલ્ટ વર્ણન
એનિમેશન બુલિયન સાચું પોપઓવર પર CSS ફેડ ટ્રાન્ઝિશન લાગુ કરો
કન્ટેનર શબ્દમાળા | તત્વ | ખોટું ખોટું

પોપઓવરને ચોક્કસ તત્વ સાથે જોડે છે. ઉદાહરણ container: 'body':. આ વિકલ્પ ખાસ કરીને ઉપયોગી છે કારણ કે તે તમને ટ્રિગરિંગ એલિમેન્ટની નજીકના ડોક્યુમેન્ટના ફ્લોમાં પોપઓવરને પોઝિશન કરવાની મંજૂરી આપે છે - જે વિન્ડો રિસાઈઝ દરમિયાન પોપઓવરને ટ્રિગરિંગ એલિમેન્ટથી દૂર જતા અટકાવશે.

સામગ્રી શબ્દમાળા | તત્વ | કાર્ય ''

data-contentજો વિશેષતા હાજર ન હોય તો ડિફૉલ્ટ સામગ્રી મૂલ્ય .

thisજો કોઈ ફંક્શન આપવામાં આવ્યું હોય, તો તેને પોપઓવર સાથે જોડાયેલ તત્વ સાથે તેના સંદર્ભ સેટ સાથે બોલાવવામાં આવશે .

વિલંબ નંબર | પદાર્થ 0

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

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

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

html બુલિયન ખોટું પોપઓવરમાં HTML દાખલ કરો. textજો ખોટું હોય, તો DOM માં સામગ્રી દાખલ કરવા માટે jQuery ની પદ્ધતિનો ઉપયોગ કરવામાં આવશે. જો તમે XSS હુમલાઓ વિશે ચિંતિત હોવ તો ટેક્સ્ટનો ઉપયોગ કરો.
પ્લેસમેન્ટ શબ્દમાળા | કાર્ય 'જમણું'

પોપઓવરને કેવી રીતે સ્થાન આપવું - ઓટો | ટોચ | નીચે | ડાબે | અધિકાર
જ્યારે autoનિર્દિષ્ટ કરવામાં આવે છે, ત્યારે તે ગતિશીલ રીતે પોપઓવરને ફરીથી દિશામાન કરશે.

જ્યારે ફંક્શનનો ઉપયોગ પ્લેસમેન્ટ નક્કી કરવા માટે થાય છે, ત્યારે તેને પોપઓવર DOM નોડ સાથે તેની પ્રથમ દલીલ તરીકે અને ટ્રિગરિંગ ઘટક DOM નોડને તેના બીજા તરીકે કહેવામાં આવે છે. સંદર્ભ thisપોપઓવર દાખલા પર સેટ કરેલ છે.

પસંદગીકાર શબ્દમાળા | ખોટું ખોટું જો પસંદગીકાર પ્રદાન કરવામાં આવે, તો પોપઓવર ઑબ્જેક્ટ્સ ઉલ્લેખિત લક્ષ્યોને સોંપવામાં આવશે. વ્યવહારમાં, આનો ઉપયોગ પોપોવર્સ ઉમેરવા માટે ગતિશીલ HTML સામગ્રીને સક્ષમ કરવા માટે થાય છે. અને એક માહિતીપ્રદ ઉદાહરણ જુઓ .
નમૂનો તાર '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

પોપઓવર બનાવતી વખતે ઉપયોગ કરવા માટે બેઝ HTML.

પોપઓવરને titleમાં ઇન્જેક્ટ કરવામાં આવશે .popover-header.

પોપઓવરને contentમાં ઇન્જેક્ટ કરવામાં આવશે .popover-body.

.arrowપોપઓવરનું તીર બની જશે.

સૌથી બહારના રેપર તત્વમાં .popoverવર્ગ હોવો જોઈએ.

શીર્ષક શબ્દમાળા | તત્વ | કાર્ય ''

titleજો વિશેષતા હાજર ન હોય તો ડિફૉલ્ટ શીર્ષક મૂલ્ય .

thisજો કોઈ ફંક્શન આપવામાં આવ્યું હોય, તો તેને પોપઓવર સાથે જોડાયેલ તત્વ સાથે તેના સંદર્ભ સેટ સાથે બોલાવવામાં આવશે .

ટ્રિગર તાર 'ક્લિક કરો' કેવી રીતે પોપઓવર ટ્રિગર થાય છે - ક્લિક કરો | હોવર | ફોકસ | મેન્યુઅલ તમે બહુવિધ ટ્રિગર્સ પસાર કરી શકો છો; તેમને જગ્યા સાથે અલગ કરો. `મેન્યુઅલ` ને કોઈપણ અન્ય ટ્રિગર સાથે જોડી શકાતું નથી.
ઓફસેટ નંબર | તાર 0 તેના લક્ષ્યની તુલનામાં પોપઓવરની ઓફસેટ. વધુ માહિતી માટે Popper.js ના ઑફસેટ દસ્તાવેજોનો સંદર્ભ લો .
ફોલબેક પ્લેસમેન્ટ શબ્દમાળા | એરે 'ફ્લિપ' ફોલબેક પર પોપર કઈ સ્થિતિનો ઉપયોગ કરશે તેનો ઉલ્લેખ કરવાની મંજૂરી આપો. વધુ માહિતી માટે Popper.js ના વર્તન દસ્તાવેજોનો સંદર્ભ લો
સીમા શબ્દમાળા | તત્વ 'સ્ક્રોલ પેરન્ટ' પોપઓવરની ઓવરફ્લો અવરોધ સીમા. 'viewport', 'window', 'scrollParent', અથવા HTMLElement સંદર્ભ (માત્ર JavaScript) ના મૂલ્યો સ્વીકારે છે . વધુ માહિતી માટે Popper.js ના preventOverflow દસ્તાવેજો નો સંદર્ભ લો .

વ્યક્તિગત પોપોવર્સ માટે ડેટા લક્ષણો

વ્યક્તિગત પોપોવર્સ માટેના વિકલ્પો વૈકલ્પિક રીતે ડેટા એટ્રિબ્યુટ્સના ઉપયોગ દ્વારા સ્પષ્ટ કરી શકાય છે, જેમ ઉપર સમજાવ્યું છે.

પદ્ધતિઓ

અસુમેળ પદ્ધતિઓ અને સંક્રમણો

બધી API પદ્ધતિઓ અસુમેળ છે અને સંક્રમણ શરૂ કરે છે . સંક્રમણ શરૂ થતાંની સાથે જ તેઓ કૉલર પાસે પાછા ફરે છે પરંતુ તે સમાપ્ત થાય તે પહેલાં . વધુમાં, સંક્રમણ ઘટક પર પદ્ધતિ કૉલ અવગણવામાં આવશે .

વધુ માહિતી માટે અમારા JavaScript દસ્તાવેજીકરણ જુઓ.

$().popover(options)

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

.popover('show')

તત્વના પોપઓવરને દર્શાવે છે. પોપઓવર વાસ્તવમાં બતાવવામાં આવે તે પહેલાં કૉલર પર પાછા ફરે છે (એટલે ​​કે shown.bs.popoverઇવેન્ટ થાય તે પહેલાં). આને પોપઓવરનું "મેન્યુઅલ" ટ્રિગરિંગ માનવામાં આવે છે. પોપોવર કે જેનું શીર્ષક અને સામગ્રી બંને શૂન્ય-લંબાઈવાળા હોય તે ક્યારેય પ્રદર્શિત થતા નથી.

$('#element').popover('show')

.popover('hide')

તત્વના પોપઓવરને છુપાવે છે. પોપઓવર વાસ્તવમાં છુપાયેલ હોય તે પહેલાં (એટલે ​​કે hidden.bs.popoverઘટના બને તે પહેલાં) કોલર પાસે પરત આવે છે. આને પોપઓવરનું "મેન્યુઅલ" ટ્રિગરિંગ માનવામાં આવે છે.

$('#element').popover('hide')

.popover('toggle')

તત્વના પોપઓવરને ટૉગલ કરે છે. પોપઓવર વાસ્તવમાં બતાવવામાં આવે અથવા છુપાવવામાં આવે તે પહેલાં (એટલે ​​કે ઘટના shown.bs.popoverઅથવા hidden.bs.popoverઘટના બને તે પહેલાં) કૉલર પર પાછા ફરે છે. આને પોપઓવરનું "મેન્યુઅલ" ટ્રિગરિંગ માનવામાં આવે છે.

$('#element').popover('toggle')

.popover('dispose')

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

$('#element').popover('dispose')

.popover('enable')

એલિમેન્ટના પોપઓવરને બતાવવાની ક્ષમતા આપે છે. પોપોવર્સ ડિફૉલ્ટ રૂપે સક્ષમ છે.

$('#element').popover('enable')

.popover('disable')

એલિમેન્ટના પોપઓવર બતાવવાની ક્ષમતાને દૂર કરે છે. પોપઓવર ફક્ત ત્યારે જ બતાવવામાં સક્ષમ હશે જો તે ફરીથી સક્ષમ હશે.

$('#element').popover('disable')

.popover('toggleEnabled')

એલિમેન્ટના પોપઓવરને બતાવવા અથવા છુપાવવા માટેની ક્ષમતાને ટૉગલ કરે છે.

$('#element').popover('toggleEnabled')

.popover('update')

તત્વના પોપઓવરની સ્થિતિને અપડેટ કરે છે.

$('#element').popover('update')

ઘટનાઓ

ઇવેન્ટનો પ્રકાર વર્ણન
show.bs.popover showજ્યારે ઇન્સ્ટન્સ પદ્ધતિને બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ ફાયર થાય છે.
દર્શાવવામાં આવ્યું છે.bs.popover જ્યારે પોપઓવર વપરાશકર્તાને દૃશ્યક્ષમ બનાવવામાં આવે ત્યારે આ ઇવેન્ટ ફાયર કરવામાં આવે છે (CSS સંક્રમણો પૂર્ણ થવાની રાહ જોશે).
hide.bs.popover hideજ્યારે ઇન્સ્ટન્સ મેથડ બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ કાઢી નાખવામાં આવે છે.
hidden.bs.popover જ્યારે પોપઓવર વપરાશકર્તાથી છુપાવવાનું સમાપ્ત કરે છે ત્યારે આ ઇવેન્ટને ફાયર કરવામાં આવે છે (CSS સંક્રમણો પૂર્ણ થવાની રાહ જોશે).
inserted.bs.popover show.bs.popoverજ્યારે પોપઓવર ટેમ્પલેટ DOM માં ઉમેરવામાં આવ્યું હોય ત્યારે આ ઇવેન્ટને ઇવેન્ટ પછી ફાયર કરવામાં આવે છે.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})