Source

ፖፖቨርስ

በiOS ውስጥ እንዳሉት የBootstrap popovers በጣቢያዎ ላይ ወዳለ ማንኛውም አካል ለመጨመር ሰነዶች እና ምሳሌዎች።

አጠቃላይ እይታ

የፖፖቨር ፕለጊን ሲጠቀሙ ማወቅ ያለብዎት ነገሮች፡-

  • ፖፖፖች ለቦታ አቀማመጥ በ 3 ኛ ወገን ቤተ-መጽሐፍት Popper.js ላይ ይተማመናሉ ። ፖፖዎች እንዲሠሩበት ከ BootStrap.js.js በፊት bootstrap.bundle.min.jsየፖፕኮክ ., ons.js ማካተት አለብዎት bootstrap.bundle.js.
  • ፖፖቨርስ እንደ ጥገኝነት የመሳሪያ ቲፕ ፕለጊን ያስፈልገዋል።
  • የእኛን ጃቫ ስክሪፕት ከምንጩ እየገነቡ ከሆነ ያስፈልገዋልutil.js ።
  • ፖፖቨር በአፈጻጸም ምክንያቶች መርጠው የገቡ ናቸው፣ ስለዚህ እነሱን እራስዎ ማስጀመር አለብዎት ።
  • ዜሮ-ርዝመት titleእና contentእሴቶች መቼም ብቅ ባይ አያሳዩም።
  • container: 'body'ይበልጥ ውስብስብ በሆኑ ክፍሎች (እንደ የግቤት ቡድኖቻችን፣ የአዝራር ቡድኖች፣ ወዘተ) ያሉ ችግሮችን ከመስጠት ለመዳን ይግለጹ ።
  • በተደበቁ አካላት ላይ ብቅ-ባይ ማነሳሳት አይሰራም።
  • ፖፖቨርስ .disabledወይም disabledኤለመንቶች በአንድ ጥቅል አካል ላይ መቀስቀስ አለባቸው።
  • በበርካታ መስመሮች ላይ የሚጠቅሱ መልሕቆች ከተነሳ ፖፖዎች በአንደኛ ደረጃ አጠቃላይ ስፋት መካከል ማዕከላዊ ይሆናል. ይህንን ባህሪ ለማስወገድ white-space: nowrap;በእርስዎ s ላይ ይጠቀሙ ።<a>
  • ፖፖቨር ተጓዳኝ ክፍሎቻቸው ከDOM ከመወገዳቸው በፊት መደበቅ አለባቸው።

ብቅ-ባይ ከአንዳንድ ምሳሌዎች ጋር እንዴት እንደሚሰራ ለማየት ማንበብዎን ይቀጥሉ።

ምሳሌ፡ በሁሉም ቦታ ብቅ-ባይን ያንቁ

በአንድ ገጽ ላይ ሁሉንም ብቅ-ባዮችን የማስጀመር አንዱ መንገድ እነሱን በባህሪያቸው መምረጥ data-toggleነው፡-

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

ምሳሌ container፡ አማራጩን መጠቀም

ብቅ-ባይን የሚያስተጓጉሉ አንዳንድ የወላጅ ኤለመንት ቅጦች ሲኖርዎት፣ containerበምትኩ የፖፖቨር ኤችቲኤምኤል በዚያ አካል ውስጥ እንዲታይ ብጁ መግለጽ ያስፈልግዎታል።

$(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>

አጠቃቀም

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

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

አማራጮች

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

ስም ዓይነት ነባሪ መግለጫ
አኒሜሽን ቡሊያን እውነት ነው። የ CSS ደብዝዝ ሽግግር ወደ ፖፖቨር ይተግብሩ
መያዣ ሕብረቁምፊ | ኤለመንት | የውሸት የውሸት

ፖፖውን ከአንድ የተወሰነ አካል ጋር ያያይዘዋል። ምሳሌ container: 'body'፡. ይህ አማራጭ በጣም ጠቃሚ ነው, በተለይም በመስታወቱ ወቅት ከሚያስከትሉት ቀስቅሴ ንጥረ ነገር እንዳይቀላቀል የሚከለክለው ፖፖቨር ላይ ከሚያስከትለው ንጥረ ነገር እንዳይቀንስ ይፈቅድለታል.
ይዘት ሕብረቁምፊ | ኤለመንት | ተግባር ''

ባህሪው ከሌለ ነባሪ የይዘት ዋጋ data-content።

አንድ ተግባር ከተሰጠ thisፖፑቨር ከተገጠመለት ንጥረ ነገር ጋር በማጣቀሻው ይጠራል.
መዘግየት ቁጥር | ነገር 0

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

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

የእቃው መዋቅር የሚከተለው ነው-delay: { "show": 500, "hide": 100 }
html ቡሊያን የውሸት ኤችቲኤምኤልን ወደ ፖፖቨር አስገባ። ውሸት ከሆነ፣ የjQuery textዘዴ ይዘትን ወደ DOM ለማስገባት ስራ ላይ ይውላል። ስለ XSS ጥቃቶች የሚጨነቁ ከሆነ ጽሑፍ ይጠቀሙ።
አቀማመጥ ሕብረቁምፊ | ተግባር 'ቀኝ'

ፖፖቨርን እንዴት ማስቀመጥ እንደሚቻል - ራስ-ሰር | ከላይ | የታችኛው | ግራ | ቀኝ.
ሲገለጽ auto፣ ብቅ ባይን በተለዋዋጭ መንገድ አቅጣጫ ያስቀምጣል።

አንድ ተግባር ቦታውን ለመወሰን ጥቅም ላይ ሲውል፣ በፖፖቨር DOM ኖድ እንደ መጀመሪያው መከራከሪያ እና አነቃቂው DOM ኖድ እንደ ሁለተኛው ይባላል። thisአውድ ወደ ብቅ ባይነት ተቀናብሯል ።
መራጭ ሕብረቁምፊ | የውሸት የውሸት መራጭ ከተሰጠ፣ ብቅ ያሉ ነገሮች ለተገለጹት ኢላማዎች ይላካሉ። በተግባር፣ ይህ ተለዋዋጭ የኤችቲኤምኤል ይዘት ብቅ-ባይ ታክሏል እንዲኖረው ለማድረግ ይጠቅማል። ይህንን እና ጠቃሚ ምሳሌ ይመልከቱ ።
አብነት ሕብረቁምፊ '<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 ማካካሻ ሰነዶችን ይመልከቱ ።
fallbackPlacement ሕብረቁምፊ | ድርድር 'ግልብጥ' ፖፐር በመውደቅ ላይ የትኛውን ቦታ እንደሚጠቀም እንዲገልጽ ፍቀድ። ለበለጠ መረጃ የPopper.js ባህሪ ሰነዶችን ይመልከቱ
ወሰን ሕብረቁምፊ | ኤለመንት 'ማሸብለል ወላጅ' የፖፑቨር ከመጠን ያለፈ ገደብ ገደብ። 'viewport'የ , 'window', 'scrollParent', ወይም HTMLElement ማጣቀሻ (ጃቫስክሪፕት ብቻ) እሴቶችን ይቀበላል . ለበለጠ መረጃ የPopper.jsን ከመጠን ያለፈ ፍሰትን ይመልከቱ ።

ለግለሰብ ብቅ-ባዮች የውሂብ ባህሪዎች

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

ዘዴዎች

ያልተመሳሰሉ ዘዴዎች እና ሽግግሮች

ሁሉም የኤፒአይ ዘዴዎች ያልተመሳሰሉ ናቸው እና ሽግግር ይጀምራሉ ። ሽግግሩ እንደተጀመረ ግን ከማለቁ በፊት ወደ ደዋዩ ይመለሳሉ ። በተጨማሪም, በመሸጋገሪያ አካል ላይ ያለው ዘዴ ጥሪ ችላ ይባላል .

ለበለጠ መረጃ የእኛን ጃቫስክሪፕት ሰነድ ይመልከቱ።

$().popover(options)

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

.popover('show')

የአንድ ንጥረ ነገር ብቅ-ባይ ያሳያል። ብቅ-ባይ ከመታየቱ በፊት (ማለትም ክስተቱ ከመከሰቱ በፊት) ወደ ደዋዩ ይመለሳል ። shown.bs.popoverይህ እንደ “በእጅ” የፖፖውን ቀስቅሴ ይቆጠራል። ሁለቱም ርዕስ እና ይዘታቸው ዜሮ ርዝመት የሆኑ ፖፖቨር በጭራሽ አይታዩም።

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

.popover('hide')

የአንድ ንጥረ ነገር ብቅ-ባይን ይደብቃል። ብቅ-ባይ ከመደበቅ በፊት (ማለትም ክስተቱ ከመፈጠሩ በፊት) ወደ ደዋዩ ይመለሳል ። hidden.bs.popoverይህ እንደ “በእጅ” የፖፖውን ቀስቅሴ ይቆጠራል።

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

.popover('toggle')

የአንድ ንጥረ ነገር ብቅ-ባይ ይቀያይራል። ብቅ-ባይ ከመታየቱ ወይም ከመደበቁ በፊት (ማለትም ክስተቱ ከመከሰቱ በፊት) ወደ ደዋዩ ይመለሳል። ይህ እንደ “በእጅ” የፖፖውን ቀስቅሴ ይቆጠራል።shown.bs.popoverhidden.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')

ክስተቶች

የክስተት አይነት መግለጫ
አሳይ.bs.popover showየምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
የሚታየው.bs.popover ይህ ክስተት የሚቀጣጠለው ብቅ-ባይ ለተጠቃሚው እንዲታይ ሲደረግ ነው (የ CSS ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል)።
ደብቅ.bs.popover hideየምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
የተደበቀ.bs.popover ይህ ክስተት የሚቀጣጠለው ብቅ-ባይ ከተጠቃሚው ተደብቆ ሲያልቅ ነው (የ CSS ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል)።
ገብቷል.bs.popover show.bs.popoverየፖፖቨር አብነት ወደ DOM ከተጨመረ ይህ ክስተት ከክስተቱ በኋላ ተቃጥሏል። 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})