본문 바로가기 메뉴 바로가기

대표이미지

[jBox] Options

2021. 2. 1.

You can set the options for your jBoxes right away or as a second argument when you are using a type:

var options = {
    title: 'My title',
    content: 'My content'
};
new jBox(options);
new jBox('Tooltip', options);

There are following types: TooltipMouseModalConfirm,NoticeImage.

 

ID

id Choose a unique id, otherwise jBox will set one for you (jBoxID1, jBoxID2, ...)

Dimensions

width
height
Width and height of the content area (not the wrapper)
minWidth
minHeight
Minimal width and height of content area
maxWidth
maxHeight
Maximal width and height of content area

Attaching jBox

attach Sets the open and close functions to elements
trigger Defines with which event the jBox opens or closes when interacting with the attached element
preventDefault Prevents the default event when clicking on the attached element, e.g. don't follow the href of a link

Content

title Adds a title to your jBox
content Sets the content of your jBox. You can use jQuery selectors to append elements (set CSS style display to none so the elements won't show up on your page)
getTitle The attribute from which jBox should get its title
getContent The attribute from which jBox should get its content

AJAX

ajax: {
    url: null,
    data: '',

    reload: false,
    getData: 'data-ajax',
    setContent: true,
    spinner: true
}
When you set an AJAX url, jBox makes an AJAX request when it opens.

You can add any jQuery ajax option, e.g. beforeSend or complete
↳ url The url to send the AJAX request to
↳ data Data to send with your AJAX call, e.g. id=1982
↳ reload Resends the AJAX request every time jBox opens
↳ getData The attribute in the source element where the AJAX request will look for the data, e.g. data-ajax="id=82&limit=10"
↳ setContent Automatically set the response as new content when the AJAX call is finished
↳ spinner Hides the current content and adds a spinner while loading the AJAX request. You can pass your own HTML code of your spinner. The spinner element will be added to the jBox container

Position

target The target element where jBox will be positioned in or at. If no target element is provided, jBox will use the attached element as target
position Set an object with the horizontal position x and the vertical positiony, e.g. {x: 'right', y: 'center'}. You can also set numbers for an absolute position
outside Moves your jBox outside of the target element
offset Offset to final position. You can set different values for x and y with an object, e.g. {x: 15, y: -10}
attributes Choose what CSS attributes should be used, e.g. {x: 'right',y: 'bottom'}. Note that right and bottom can only be used when your position values are integer, e.g. {x: 300, y: 20}
adjustPosition Adjusts the position when there is not enough space to show the whole jBox. The value flip positions the jBox on the opposite outside position, the value move works only with a pointer. Set totrue to use both
adjustTracker By default jBox adjusts its position when it opens, to also adjust while scrolling or when you resize the browser, use scrollresizeor true for both events. This option affects performance, use with care
adjustDistance Distance to the window edge when adjusting should start. Use an object to set different values, e.g. {top: 50, right: 20,bottom: 5, left: 20}
fixed Sets a fixed position rather than an absolute
reposition Recalculates the position when the browser size changes
repositionOnOpen Recalculates the position each time jBox opens (rather than only when it opens the first time)
repositionOnContent Recalculates the position when dimensions change using the methods .setContent() or .setTitle()

Pointer

pointer Your pointer will always point towards the target element, so the option outside needs to be x or y. By default the pointer is centered, set a position to move it to any side. You can also add an offset, e.g. left:30center:-20
pointTo Setting something else than target will add a pointer even if there is no target element set or found

Animations

fade Fade duration in ms, set 0 or false to disable
animation Animation when jBox opens or closes.
To use different animations for opening and closing, use an object:{open: 'tada', close: 'flip'}.
You can also set the direction of the move and slide animations:{open: 'move:right', close: 'slide:top'}.
You'll need a modern browser for animations to work, or IE from version 10

Appearance

theme Default themes that come with jBox are ModalBorderNoticeBorder,TooltipBorderTooltipDark. Remember to load the CSS file of your theme
addClass Adds classes to the wrapper
overlay Adds an overlay when jBox opens
zIndex Use a high zIndex. Your overlay will have the lowest zIndex of all your jBoxes minus one

Delays

delayOpen Delay opening in ms. Note that the delay will be ignored if your jBox didn't finish closing
delayClose Delay closing in ms. Note that there is always a closing delay of at least 10ms to ensure jBox won't be closed when opening right away

Closing jBox

closeOnEsc Close jBox when pressing the [ESC] key
closeOnClick Close jBox with a mouseclick: true closes when you click anywhere,overlay when clicking on the overlay, box when clicking on the jBox itself and body when you click anywhere but the jBox
closeOnMouseleave Close jBox when the mouse leaves the jBox element
closeButton Adds a close button. Note that the close button in the overlay doesn't actually close the jBox, you need to set the optioncloseOnClick to overlay or body

Other options

constructOnInit Construct jBox when it's being initialized, otherwise it will be constructed when it opens for the first time
blockScroll Blocks scrolling when jBox is open
appendTo Provide an element if you want the jBox to be positioned inside a specific element. This option is only useful for fixed positions or when the position values are numbers
draggable Makes your jBox draggable. Use title or provide any child element of jBox to use as the handle
dragOver When you have multiple draggable jBoxes, the one you select will always move over the other ones

Events

onInit Triggered when jBox is initialized.
Note that you can use this in the event functions, it refers to your jBox object, e.g. onInit: function() { this.open(); }
onCreated Triggered when jBox is created and is availible in DOM
onOpen Triggered when jBox is opening
onClose Triggered when jBox is closing
onCloseComplete Triggered when jBox is completely closed (when fading finished)

Additional options for type Confirm

confirmButton Text for the submit button
cancelButton Text for the cancel button
confirm Function to execute when clicking the submit button. By default jBox will use firstly the onclick and secondly the href attribute
cancel Function to execute when clicking the cancel button

Additional options for type Notice

autoClose Time in milliseconds when the notice should close automatically, set to 0 or false to disable
color Makes your notices colorful
stack Wheather to stack or only show single notices
audio The url to an audio file to play when the notice opens, e.g./audio/filename. jBox will look for .mp3 and .ogg files
volume Use a value between 0 and 100 to set the audio volume

Additional options for type Image

src The attribute to get the image source from, e.g. href for a link: <a href="/path/image.jpg">
gallery The attribute to set the galleries, e.g. data-jbox-image="gallery1"
imageLabel The attribute to set the description of the image, e.g.title="My image"
imageFade The fade duration between images
imageSize How to display the images. Use CSS styles of background-position, e.g. cover800px 600px50% auto

.

참고 : https://stephanwagner.me/jBox

jBox-1.2.2.zip
0.38MB
댓글 갯수
TOP