New version of jquery.guide.js is online

This article mainly introduces the new version of jquery.guide.js online operation guide hollow prompt jQuery plug-in (recommended). Friends who need it can refer to it. I hope it can help everyone.

1. Please jquery.guide.js

When the website is online or revised, an operation guide will often be made to tell users where some important operations are, or what fun things are hidden somewhere. Things, etc., although I always turn them off directly or skip them quickly, they are still very useful to some users.

The better interactive effect of this kind of prompt is to use a hollow semi-transparent mask, and the visual focus is clear at a glance, similar to this:

I wrote an article last year called "Tencent Weiyun Black Mask Guide Mask Better CSS Implementation Method" introduces how to use a single label to achieve similar interactive effects. Among them, the core technique is to use the CSS border attribute, which is the surrounding black translucent mask. It's actually a semi-transparent border.

Later I found a better way to implement it, which is to use the CSS outline attribute. The outline attribute is the outline of the element. It will not increase the size of any element or destroy the original layout, so we We only need to set a very, very large outline width value, and our positioned elements will always be naturally hollow. There is no need to calculate the size of the translucent black areas above, below, left, and right.

.guide {
  outline: 9999px solid rgba(0,0,0,.75);
}

Recently there happened to be a revision project with similar needs. Based on this principle, I decided to create a jQuery plug-in called jquery.guide.js, which is specially used to implement black translucent mask hollow prompt guidance. Effect.

Instance demo address: Click here for the demo address

2. Advantages of the jquery.guide.js plug-in

The advantages of the jquery.guide.js plug-in are as follows:

1. Easy to use, just introduce JS directly without introducing CSS resources;
2. Support browser scrolling and zoom repositioning;
3. Support browser keyboard operations, such as up and down keys and left and right keys for previous and next steps, ESC key to exit, etc.;
4. Supports guidance of elements presented asynchronously on the page;
5. Built-in prompt detection, that is, built-in processing that will only prompt once, based on localStorage Make the first judgment;
6. Compatible with IE8 browser;

Then, some lazy points:

1. The default is to use the outline attribute, so rounded corners are not supported. If you want to achieve an effect similar to the one below:

You can use the CSS box-shadow property to simulate a semi-transparent mask effect, in the jquery.guide.js source In the code, it has actually been prepared for everyone, as shown below:

As the comments in the source code say, if you want to support rounded corners, comment out the outline above, Just uncomment the box-shadow and border-radius lines below.

.guide {
  box-shadow: 0 0 0 9999px rgba(0,0,0,.75);
  border-radius: 50%;
}

Among them, box-shadow: 0 0 0 9999px means that the in-place shadow is expanded to 9999px. From the user's perspective, it is a black translucent mask that fills the screen.

As for the IE8 browser that does not support CSS3 box-shadow and border-radius, it still uses the outline right-angle effect.

2. The z-index level and the transparency of the semi-transparent mask layer are not released as parameters, because the novice guidance prompts are basically one-time, if you are not satisfied with the z-index level or opacity transparency , just modify the JS source code directly.

3. The syntax and usage of jquery.guide.js plug-in

The syntax is as follows:

$.guide(options);

Among them, options is an array, and the array items contain prompt information in the same format The object of related parameters. The unified default value of this object is:

var defaults = {
  selector: '', 
  content: '', 
  align: 'center',
  offset: {
    x: 0,
    y: 0
  }
};

When used, it is similar to this:

$.guide([{
  selector: '#target'
}]);

Among them:

•selector represents the target element that needs to be hollowed out and exposed. Selector, if the selector can match multiple elements, the first element matched by the selection is used as the target element; if the element cannot be matched, the entire parameter object will be ignored.
•content represents additional content displayed in the hollow area, which can be an HTML string or a jQuery wrapper object.
•align indicates the alignment of the displayed content, is it left-aligned, center-aligned or right-aligned? Optional keyword values ​​include: left , center , right . where center is the default value.
•offset represents the horizontal and vertical distance of the offset. x is the horizontal offset position. The calculation rule is related to the align parameter value. y represents the vertical offset distance. The content prompt content is not top aligned by default, but relative to the hollow. Align the exposed target element 5 pixels above its bottom edge.

Seeing is believing, to start the demo page, you can click here: jQuery plug-in jquery.guide.js uses demo

The demo page has set up a total of 4 prompt elements, related JS is used as follows:

<script src="./jquery.min.js"></script>
<script src="./jquery.guide.js"></script>
<script>
$.guide([{
  selector: '.logo',
  content: '<img src="guide-1.png">',
  align: 'left'
}, {
  selector: '.ad img',
  content: '<img src="guide-2.png">'
}, {
  selector: '#back',
  content: '<img src="guide-3.png">',
  align: 'left'
}, {
  selector: '.demo img',
  content: '<img src="guide-4.png">'
}]);
</script>

This demo page has been specially processed for the convenience of demonstration, and the prompt effect will be displayed every time it is refreshed. In actual use, there will be no such problem. It will only be displayed once, so there is no need to worry.

4. Conclusion

is not a great thing, so it will not be put on github. If you are lucky enough to use it and encounter any problems, you are welcome to provide feedback in the form of comments.

Related recommendations:

jQuery plug-in ImgAreaSelect implements avatar upload preview and cropping functions

jQuery plug-in imgAreaSelect example explanation

Detailed explanation of jquery plug-in jquery.viewport.js

The above is the detailed content of New version of jquery.guide.js is online. For more information, please follow other related articles on the PHP Chinese website!