Write a jQuery vertical scroll bar plug-in (panel), jquerypanel

Write a jQuery vertical scroll bar plug-in (panel), jquerypanel

The original scroll bar in html is ugly, so some websites implement the scroll bar by themselves. The navigation website hao123 is in a sidebar and the vertical scroll bar is customized. The effect is better, as shown below:

This scroll bar is displayed only when you hover your mouse over this area. It has a translucent effect, which is very space-saving ~~, To be honest, I like this effect very much.

The principle of the vertical scroll bar is as follows:

Start with a name. The outer layer is called wrapper, and the inner layer is called content. wrapper must have non-static positioning and the content must be absolutely located. In this way, you can adjust the top value to simulate content scrolling.

Specifically:

1. The overflow of wrapper needs to be set to hidden, listen to the mouse scroll event on wrapper, and set the top value of content based on the scroll speed;

2. Add a scroll box and scroll bar to wrapper. The ratio of the scroll bar to the scroll box corresponds to the ratio of the wrapper to the content height.

3. When you drag a scroll bar, the top value of content is proportional to the drag distance of the scroll bar. When you move the scroll wheel, the scroll bar also follows the scroll bar.

Drag the scroll bar and reuse the drag plug-in my previous article. The above is the general principle.

The following is the main code, __creator is the main function. First, ignore the code framework.

/** Panel * parameter: obj {* iWheelStep: Walking length when the mouse pulley is rolling * sBoxClassName: style of the scroll box * sBarClassName: style of the scroll bar *} */$. zUI. addWidget ("panel", {defaults: {iWheelStep: 16, sBoxClassName: "zUIpanelScrollBox", sBarClassName: "zUIpanelScrollBar" },__ creator: function (ele) {var jqThis = $ (ele); // adjust ("position") = "static" without using jqthis.css ("position", "relative" without using jqthis.css ("overflow ", "hidden"); // there must be one Unique direct child element. Add absolute positioning var jqChild = jqThis to the direct child element. children (": first" );if(jqchild.lengthth{jqchild.css ({top: 0, position: "absolute"});} else {return;} var opts = jqThis. data ($. zUI. panel. sOptsName); // create a scroll box var jqScrollBox =$ ("<div style = 'position: absolute; display: none; line-height: 0; '> </div> "); jqScrollBox. addClass (opts. sBoxClassName); // create a scroll bar var jqScrollBar =$ ("<div style = 'position: absolute; display: none; line-height: 0; '> </div> "); jqScrollBar. addClass (opts. sBarClassName); jqScrollBox. appendTo (jqThis); jqScrollBar. appendTo (jqThis); opts. iTop = parseInt(jqScrollBox.css ("top"); opts. iWidth = jqScrollBar. width (); opts. iRight = parseInt(jqScrollBox.css ("right"); // Add a drag-and-drop function to trigger the custom jqScrollBar. on ("draggable. move ", function () {var opts = jqThis. data ($. zUI. panel. sOptsName); fnScrollContent (jqScrollBox, jqScrollBar, jqThis, jqChild, opt S. iTop, 0) ;}); // event object var oEvent = {mouseenter: function(%%fnfreshscroll(%%jqscrollbox.css ("display", "block" %%jqscrollbar.css ("display", "block ");}, mouseleave: function({{jqscrollbox.css ("display", "none" );jqScrollBar.css ("display", "none") ;}; var sMouseWheel = "mousewheel"; if (! ("Onmousewheel" in document) {sMouseWheel = "DOMMouseScroll";} oEvent [sMouseWheel] = function (ev) {var opts = jqThis. data ($. zUI. panel. sOptsName); var iWheelDelta = 1; ev. preventDefault (); // block the default event ev = ev. originalEvent; // obtain the native eventif (ev. wheelDelta) {iWheelDelta = ev. wheelDelta/120;} else {iWheelDelta =-ev. detail/3;} var iMinTop = jqThis. innerHeight ()-jqChild. outerHeight (); // The outside is higher than the inside. You do not need to respond to the rolling if (iMinTop> 0) {jqC Hild.css ("top", 0); return;} var iTop = parseInt(jqChild.css ("top"); var iTop = iTop + opts. iWheelStep * iWheelDelta; iTop = iTop> 0? 0: iTop; iTop = iTop <iMinTop? IMinTop: iTop;jqChild.css ("top", iTop); fnScrollContent (jqThis, jqChild, jqScrollBox, jqScrollBar, 0, opts. iTop);} // record add event jqThis. data ($. zUI. panel. sEventName, oEvent); // follow the rolling function fnScrollContent (jqWrapper, jqContent, jqFollowWrapper, jqFlollowContent, iOffset1, iOffset2) {var opts = jqThis. data ($. zUI. panel. sOptsName); var rate = (parseInt(jqContent.css ("top")-iOffset1)/(jqContent. outerHeight ()-jqWrapper. innerHeight () // percentage of rolled up var iTop = (jqFlollowContent. outerHeight ()-jqFollowWrapper. innerHeight () * rate + ioffset2jwjqflollowcontent.css ("top", iTop);} // refresh the scroll bar function fnFreshScroll () {var opts = jqThis. data ($. zUI. panel. sOptsName); var iScrollBoxHeight = jqThis. innerHeight ()-2 * opts. iTop; var iRate = jqThis. innerHeight ()/jqChild. outerHeight (); var iScrollBarHeight = Math. round (iRate * iScrollBoxHeight); // if the ratio is greater than or equal to 1, no scroll bar is required, naturally, you do not need to add the drag event if (iRate> = 1)1_jqscrollbox.css ("height", 01_1_jqscrollbar.css ("height" equals ("height" equals ("height", iScrollBarHeight ); // calculate the drag border and add the drag event var oBoundary = {iMinTop: opts. iTop}; oBoundary. iMaxTop = iScrollBoxHeight-Math. round (iRate * iScrollBoxHeight) + opts. iTop; oBoundary. iMinLeft = jqThis. innerWidth ()-opts. iWidth-opts. iRight; oBoundary. iMaxLeft = oBoundary. iMinLeft; fnScrollContent (jqThis, jqChild, jqScrollBox, jqScrollBar, 0, opts. iTop); jqScrollBar. draggable ({oBoundary: oBoundary}) ;},__ destroyer: function (ele) {var jqEle =$ (ele); if (jqEle. data ($. zUI. panel. sFlagName) {var opts = jqEle. data ($. zUI. panel. sOptsName); jqEle. children (". "+ opts. sBoxClassName ). remove (); jqEle. children (". "+ opts. sBarClassName ). remove ();}}});

There are several notes:

1. jQuery is not compatible with the scroll event of the mouse wheel. Therefore, use the native event here:

DOMMouseScroll in ff: the scroll condition of the mouse is known through the event's detail attribute. The scroll downward is positive, the scroll is negative, and the scroll distance of the bidding file is multiples of 3.

The other name is mousewheel. We can see the scroll of the mouse through the event's wheelDelta. The scroll up is positive, the scroll down is negative, and the scroll distance of the bidding file is multiples of 120.

The above Code uses jQuery's on to mount events. You must also get the native event object --> ev. originalEvent;

To put it bluntly: How is ff and other browsers, instead of IE and other browsers ~~~~

2. in the event mouseenter, fnFreshScroll is called every time. That is to say, the size of the scroll bar is dynamically calculated every time the mouse moves over, in fact, it is to ensure compatibility with the situation where the content will change dynamically (not all cases are acceptable. When the content becomes very small, it is still less than the outer height)

3. the above Code places all events in the oEvent object, but does not add them to the corresponding element. This is because I first encapsulate a layer of the plug-in (you may have guessed it, right, $. zUI. addWidget function), add events in that layer.

During writing this plug-in, I directly converted some specifications into code and wrote a plug-in skeleton:

$. ZUI = $. zUI | |{}$. zUI. emptyFn = function () {}; $. zUI. asWidget = [];/** core code, which defines adding a plug-in skeleton */$. zUI. addWidget = function (sName, oSefDef) {// set constant sFlagName, sEventName, sOptsName $ in the specification. zUI. asWidget. push (sName); var w = $. zUI [sName] = $. zUI [sName] | |{}; var sPrefix = "zUI" + sNamew. sFlagName = sPrefix; w. sEventName = sPrefix + "Event"; w. sOptsName = sPrefix + "Opts"; w. _ creator = $. zUI. emptyFn; w. _ destroyer = $. zUI. emptyFn; $. extend (w, oSefDef); w. fn = function (ele, opts) {var jqEle = $ (ele); jqEle. data (w. sOptsName, $. extend ({}, w. defaults, opts); // if this element has already been executed by this plug-in, it will be returned directly, which is equivalent to modifying the configuration parameter if (jqEle. data (w. sFlagName) {return;} jqEle. data (w. sFlagName, true); w. _ creator (ele); jqEle. on (jqEle. data (w. sEventName);}; w. unfn = function (ele) {w. _ destroyer (ele); var jqEle = $ (ele); // remove the listener event if (jqEle. data (w. sFlagName) {jqEle. off (jqEle. data (w. sEventName); jqEle. data (w. sFlagName, false );}}}

When writing the draggable plug-in, I defined several specifications. For example, the main function must be called fn and the destroy function must be called unfn. here we can see that the fn function is defined in the addWidget component, and wrote down the skeleton, __creator and _ destroyer, which need to be implemented by specific plug-ins. The same Code and logic are stored in the skeleton, for example, use a rule to name the constants required by the plug-in. The logic of plug-in parameter initialization. The second execution of the plug-in is equivalent to modifying the parameters and does not repeat the execution logic ~~~~

Finally, place the unified method on $ to $. fn ~~, As mentioned in the previous section, $. zUI. asWidget is an array containing the plug-in name. These names are naturally stored in the $. zUI. addWidget function ~~~

$.each($.zUI.asWidget,function(i,widget){unWidget = "un"+widget;var w = {};w[widget] = function(args){this.each(function(){$.zUI[widget].fn(this,args);});return this;};w[unWidget] = function(){this.each(function(){$.zUI[widget].unfn(this);});return this;}$.fn.extend(w);});

Implementation Effect

Conclusion:

I have to say that this is not a panel, because there is no horizontal scroll bar. There are two reasons: first, it is lazy and I don't want to implement it. The principle is similar. In addition, I hate horizontal scroll bars ~~~

To download the source code, see: source code

Who has a better jquery scroll bar plug-in? Can you send me one? Thanks.

11 best jQuery scroll bar plug-ins
Www.iteye.com/news/27748

Jquery or js to write a pop-up plug-in

First obtain the position of the input box. Set the position of the div (plug-in) based on the position of the input box. This is relatively simple for jquery.