我刚刚玩了一个jBox.js插件,可用于创建模态,工具提示和胆汁,它大约有1600多行代码,现在我只想使用工具提示功能。我知道工具提示只能使用css创建,而且我也知道在JS中只能用几行JS来完成,但这是一个自定义要求,我只从这个库中提取代码,I.E。我只需要提取与工具提示相关的代码,我设法做到这一点,我在每个函数中使用chrome dev工具和console.logs来查看哪些是正在执行的函数,所以我只保留那些函数。我设法将代码行从1600+减少到900+。
问题现在的问题是,这是一个巨大的多用途插件,它的对象文字中有一大组默认值(每个插件使用一个带默认值的对象文字),请参阅下面:
this.options = {
// jBox ID
id: null, // Choose a unique id, otherwise jBox will set one for you (jBoxID1, jBoxID2, ...)
// Dimensions
width: 'auto', // Width of content area (e.g. 'auto', 100)
height: 'auto', // Height of content area
minWidth: null, // Minimum width
maxHeight: null, // Minimum height
minWidth: null, // Maximum width
maxHeight: null, // Minimum height
// Attach
attach: null, // Attach jBox to elements (if no target element is provided, jBox will use the attached element as target)
trigger: 'click', // The event to open or close your jBoxes, use 'click' or 'mouseenter'
preventDefault: false, // Prevent default event when opening jBox (e.g. don't follow the href in a link when clicking on it)
// Content
title: null, // Adds a title to your jBox
content: null, // You can use a string to set text or HTML as content, or an element selector (e.g. jQuery('#jBox-content')) to append one or several elements (elements appended will get style display: 'block', so hide them with CSS style display: 'none' beforehand)
getTitle: null, // Get the title from an attribute when jBox opens
getContent: null, // Get the content from an attribute when jBox opens
isolateScroll: true, // Isolates scrolling to content container
// Position
target: null, // The target element where jBox will be opened
position: {
x: 'center', // Horizontal Position (Use a number, 'left', 'right' or 'center')
y: 'center' // Vertical Position (Use a number, 'top', 'bottom' or 'center')
},
outside: null, // Use 'x', 'y', or 'xy' to move your jBox outside of the target element
offset: 0, // Offset to final position, you can set different values for x and y with an object e.g. {x: 15, y: 0}
attributes: { // Note that attributes can only be 'left' or 'right' when using numbers for position, e.g. {x: 300, y: 20}
x: 'left', // Horizontal position, use 'left' or 'right'
y: 'top' // Vertical position, use 'top' or 'bottom'
},
adjustPosition: false, // Adjusts the position when there is not enough space (use true, 'flip' or 'move')
adjustTracker: false, // By default jBox adjusts the position when opening, to adjust when scrolling or resizing, use 'scroll', 'resize' or 'true' (both events)
adjustDistance: 5, // How far from the window edge we start adjusting, use an object to set different values: {bottom: 5, top: 50, left: 5, right: 20}
fixed: false, // Your jBox will stay on position when scrolling
reposition: false, // Calculates new position when the window-size changes
repositionOnOpen: true, // Calculates new position each time jBox opens (rather than only when it opens the first time)
repositionOnContent: true, // Calculates new position when the content changes with .setContent() or .setTitle()
// Pointer
pointer: false, // Your pointer will always point towards the target element, so the option outside should be 'x' or 'y'
pointTo: 'target', // Setting something else than 'target' will add a pointer even if there is no target element set or found (Use 'top', 'bottom', 'left' or 'right')
// Animations
fade: 180, // Fade duration in ms, set to 0 or false to disable
animation: null, // Animation when opening or closing (use 'pulse', 'zoomIn', 'zoomOut', 'move', 'slide', 'flip', 'tada') (CSS inspired from Daniel Edens Animate.css: http://daneden.me/animate)
// Appearance
theme: 'Default', // Set a jBox theme class
addClass: '', // Adds classes to the wrapper
overlay: false, // Adds an overlay when jBox opens (set color and opacity with CSS)
zIndex: 10000, // Use a high zIndex (your overlay will have the lowest zIndex of all your jBoxes (with overlays) minus one)
// Delays
delayOpen: 0, // Delay opening in ms (Note that the delay will be ignored if your jBox didn't finish closing)
delayClose: 0, // 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 events
closeOnEsc: false, // Close jBox when pressing [esc] key
closeOnClick: false, // Close jBox with mouseclick, use 'true' (click anywhere), 'box' (click on jBox itself), 'overlay' (click on the overlay), 'body' (click anywhere but jBox)
closeOnMouseleave: false, // Close jBox when the mouse leaves the jBox area or the area of the attached element
closeButton: false, // Adds a close button to your jBox, use 'title', 'overlay', 'box' or true (true will add the button to overlay, title or box, in that order if any of those elements can be found)
// Other options
constructOnInit: false, // Construct jBox when it's being initialized
blockScroll: false, // When jBox is open, block scrolling
appendTo: jQuery('body'), // Provide an element if you want the jBox to be positioned inside a specific element (only useful for fixed positions or when position values are numbers)
draggable: null, // Make your jBox draggable (use 'true', 'title' or provide an element as handle) (inspired from Chris Coyiers CSS-Tricks http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/)
dragOver: true, // When you have multiple draggable jBoxes, the one you select will always move over the other ones
// Events // Note: You can use 'this' in the event functions, it refers to your jBox object (e.g. onInit: function() { this.open(); })
onInit: null, // Triggered when jBox is initialized
onBeforeInit: null, // Triggered when jBox starts initializing, useful to add your own internal functions
onAttach: null, // Triggered when jBox attached itself to elements
// TODO onPosition
onCreated: null, // Triggered when jBox is created and is availible in DOM
onOpen: null, // Triggered when jBox opens
onClose: null, // Triggered when jBox closes
onCloseComplete: null, // Triggered when jBox is completely closed (when fading is finished, useful if you want to destroy the jBox when it is closed)
};
有没有办法只筛选出使用过的值? I.E.对象文字中的值,以后在代码中实际使用,并从默认对象文字中删除其余值。
我创建了一个演示版,其代码我已加载 HERE (转到源代码并打开jBox.js),或者您也可以在github上查看插件, { {3}}