A few days ago we students online home revision, to do a toolbar, due to the limitations of the layout, the original planning a lot of tools had to be arranged in a small area, the specific effects are as follows:
Of course, such an effect can be implemented with HTML-brought controls. However, the custom can set the style of the slider itself, such as red, blue and so on, the button shape can also do their own.
The effect that needs to be achieved is that these tools display up to 9 in the visible area at a time (assuming that the total number of tools is more than 9, less than 9, the future is likely to expand to 9), click on the button to move the visible area of the tool area up and down.
But after doing this well, the operator gave me advice: If you move the slider bar can be moved up and down, the user experience will be better, but said simple, do a bit of trouble.
Let's start from the beginning. My idea is as follows:
- The entire area is divided into two, one is the tool area (class= "ToolBox"), and the other is the slider area (class= "Slidebar").
- The tool area (class= "ToolBox") is positioned relative to the interior with a large strip (class= "Innertoolbox") that stores all the tools, a line of three tools, is not visible beyond the section (which is critical), and is relative to the external tool area (class= " ToolBox ") is absolutely positioned, just at the beginning, top=0, so that each slide just change its top value.
- The right slider area (class= "Slidebar") has three things: the Up button (class= "Upbtn"), the Down button (class= "Downbtn"), the Slider box (class= "Barbox"). The Slider box (class= "Barbox") is simply a "box" that holds the slider bar (class= "Innerbar"). Like the toolbar, the slider (class= "Innerbar") is absolutely positioned relative to the slider box (class= "Barbox") and can be slid simply by changing the top value of the slider bar (class= "Innerbar"). and is synchronized with the left sidebar. So the height of the slider is fixed, of course not, and its height is determined by the number of lines on the left tool. This needs to be implemented by JS (which will be mentioned later).
The HTML code is as follows:
Copy Code code as follows:
<div id= "Smalltools" class= "Clearfix" >
<div class= "ToolBox" >
<div class= "Innertoolbox" >
<ul>
<li class= "Tool1" >
<a href= "#" target= "_blank" > School bus table </a>
</li>
<li class= "Tool2" >
<a href= "http://online.cumt.edu.cn/dzhbl/" target= "_blank" > E-Poster </a>
</li>
<li class= "Tool3" >
<a href= "http://lib.cumt.edu.cn/" target= "_blank" > Library </a>
</li>
</ul>
<ul>
<li class= "Tool4" >
<a href= "http://stu.cumt.edu.cn/xgxt" target= "_blank" > Student work System </a>
</li>
<li class= "Tool5" >
<a href= "http://jwchu.cumt.edu.cn/" target= "_blank" > Educational system </a>
</li>
<li class= "Tool6" >
<a href= "http://service.js.vnet.cn/" target= "_blank" > Network card Query </a>
</li>
</ul>
<ul>
<li class= "Tool7" >
<a href= "http://219.219.35.66/index.php" target= "_blank" > Autonomous Learning </a>
</li>
<li class= "Tool8" >
<a href= "#" target= "_blank" > Freshman entrance </a>
</li>
<li class= "Tool9" >
<a href= "#" target= "_blank" > Focus video </a>
</li>
</ul>
<ul>
<li class= "Tool7" >
<a href= "http://219.219.35.66/index.php" target= "_blank" > Autonomous Learning </a>
</li>
<li class= "Tool8" >
<a href= "#" target= "_blank" > Freshman entrance </a>
</li>
<li class= "Tool9" >
<a href= "#" target= "_blank" > Focus video </a>
</li>
</ul>
<ul>
<li class= "Tool7" >
<a href= "http://219.219.35.66/index.php" target= "_blank" > Autonomous Learning </a>
</li>
<li class= "Tool8" >
<a href= "#" target= "_blank" > Freshman entrance </a>
</li>
<li class= "Tool9" >
<a href= "#" target= "_blank" > Focus video </a>
</li>
</ul>
</div>
</div>
<div class= "Slidebar" >
<a href= "#" class= "upbtn" > </a>
<div class= "Barbox" >
<div class= "Innerbar" ></div>
</div>
<a href= "#" class= "downbtn" > </a>
</div>
<div class= "Clear" ></div>
</div>
The CSS code is as follows:
Copy Code code as follows:
/*** Big Box ***/
#smallTools
{
Background:url (.. /images10/smallbarbg.gif) repeat-x left bottom;
position:relative;
height:227px;
Overflow:hidden;
}
/*** the left and right sides of the layout ***/
#smallTools. ToolBox/*** the tool box area to the left of the ***/
{
height:207px;
margin-top:10px;
Float:left;
width:237px;
margin-left:10px;
Overflow:hidden;
position:relative;
}
#smallTools. Slidebar/*** the right slider area ***/
{
height:227px;
Float:right;
width:11px;
}
/*** the concrete style of the elements in the left box ***/
. Innertoolbox
{
Position:absolute;
left:0px;
top:0px;
}
#smallTools ul
{
height:69px;
}
#smallTools ul Li
{
Float:left;
width:79px;
height:69px;
Text-align:center;
}
#smallTools ul Li a
{
Display:block;
width:79px;
height:22px;
padding-top:47px;
Color: #000;
}
/*** the following is to set the background for each tool item ***/
#smallTools ul Li.tool1
{
Background:url (.. /images/tool1.gif) No-repeat Center 7px
}
#smallTools ul Li.tool2
{
Background:url (.. /images/tool2.gif) No-repeat Center 7px
}
#smallTools ul Li.tool3
{
Background:url (.. /images/tool3.gif) No-repeat Center 7px
}
#smallTools ul Li.tool4
{
Background:url (.. /images/tool4.gif) No-repeat Center 7px
}
#smallTools ul Li.tool5
{
Background:url (.. /images/tool5.gif) No-repeat Center 7px
}
#smallTools ul li.tool6
{
Background:url (.. /images/tool6.gif) No-repeat Center 7px
}
#smallTools ul Li.tool7
{
Background:url (.. /images/tool7.gif) No-repeat Center 7px
}
#smallTools ul Li.tool8
{
Background:url (.. /images/tool8.gif) No-repeat Center 7px
}
#smallTools ul Li.tool9
{
Background:url (.. /images/tool9.gif) No-repeat Center 7px
}
/*** the exact style of the right sliding bar box ***/
. Slidebar. upbtn/*** up sliding button ***/
{
Display:block;
line-height:0px;
width:9px;
height:7px;
Background:url (.. /images/up_btn.png) No-repeat left top;
margin-top:2px;
padding:0px;
}
. Slidebar. Upbtn:hover
{
border:1px solid #000000;
}
. Slidebar. downbtn/*** Slide Down button ***/
{
Display:block;
line-height:0px;
width:9px;
height:7px;
Background:url (.. /images/down_btn.png) No-repeat left top;
margin:0px;
padding:0px;
}
. Slidebar. Downbtn:hover
{
border:1px solid #000000;
}
#smallTools. Barbox
{
height:196px;
MARGIN:4PX 0px;
width:11px;
position:relative;
}
. Innerbar
{
Position:absolute;
width:10px;
Background: #a4a4a4;
Cursor:s-resize;
top:0px;
}
The next step is to add scripting code to it. For convenience, the jquery library is used here.
I decided to create an object for it, roughly member variables as follows:
Copy Code code as follows:
$ (function ()
{
/*** object method, making some member variable assignments
Variable: elem: The toolbar domain name (combination of element name, ID, and Class) to be moved up and down
Perhight: The length of each cell moved once
SlideN: Number of lines of tools in the toolbar
Shown: Number of lines of visible tool (here is 3)
Speed: The number of milliseconds spent in one move
Index: The first row of the visible range
Barelem: Slider name (combination of element name, ID, and Class)
***/
function ToolBar (Elem,perheight,sliden,shown,speed,index,barelem)
{......}
Toolbar.prototype=
{
Setting the height of the/*** slider bar
Height Calculation formula: The maximum height that the slider can set * The number of rows of visible tools/total number of tools in the tool bar
***/
Initbar:function ()
{......},
/*** the tool bar sliding function, to is the index that is to be slid to, the function is triggered when the button is up or down and the slider is moved ***/
Slide:function (To)
{......},
/*** slider sliding function, to is the index to be slid to, this function at the point up and down button will be triggered, and slide function synchronization implementation ***/
Barslide:function (To)
{......},
/*** This function adds a click event for the up and down buttons
Upelem: Name of the up button (combination of element name, ID, and Class)
Downelem: Name of the down button (combination of element name, ID, and Class)
***/
Clicktab:function (Upelem,downelem)
{......},
/*** Drag the slider function, and drag the tool box to move accordingly.
Elem: element name (combination of element name, ID, and Class) that needs to be moved
Handle: The name of the handle element (the combination of element name, ID, and Class) that is required to drag the corresponding element to be moved
Uplev: The highest point of the dragged element (here is 0)
Downlev: The lowest point of the dragged element (here is 196)
***/
Drag:function (Elem,handle,uplev,downlev)
{......}
}
/*** here is the instantiation of the object, and the call to the related function ***/
})
The complete JS code is as follows:
Copy Code code as follows:
$ (function ()
{
function ToolBar (Elem,perheight,sliden,shown,speed,index,barelem)
{
this.elem=$ (Elem);
This.perheight=perheight;
This.sliden=sliden;
This.shown=shown;
This.speed=speed;
This.index=index;
This.barelem=barelem;
}
Toolbar.prototype=
{
Initbar:function ()
{
var tl=$ (This.barelem). Parent (). height ();
$ (This.barelem). css ({' Height ': Tl*this.shown/this.sliden});
},
Slide:function (To)
{
This.elem.animate ({' Top ':-(to*this.perheight)},this.speed)
},
Barslide:function (To)
{
var tl=$ (This.barelem). Parent (). height ();
$ (This.barelem). Animate ({' top ': tl*to/this.sliden},this.speed)
},
Clicktab:function (Upelem,downelem)
{
var _this=this;
$ (Upelem). bind (' click ', Function ()
{
if (_this.index>0)
{
_this.index--;
_this.slide (_this.index);
_this.barslide (_this.index);
}
return false;
});
$ (Downelem). bind (' click ', Function ()
{
if (_this.index<_this.sliden-_this.shown)
{
_this.index++;
_this.slide (_this.index);
_this.barslide (_this.index);
}
return false;
});
},
Drag:function (Elem,handle,uplev,downlev)
{
var _this=this;
var tl=$ (This.barelem). Parent (). height ();
var c=$ (elem);
var dy, moveout;
var T = $ (handle);
T.bind ("Selectstart", function ()
{
return false;
});
T.mousedown (function (e)
{
DX = E.clientx-parseint (C.css ("left"));
E=e?e:window.event;
DY = E.clienty-parseint (c.css ("Top"));
C.mousemove (move). Mouseout (out). CSS (' opacity ', 0.8);
T.mouseup (UP);
});
function Move (e)
{
E=e?e:window.event;
Moveout = false;
if ((E.clienty-dy) >=uplev&& (e.clienty-dy) <= (Downlev-c.height ())
C.css ({"Top": E.clienty-dy});
}
function out (e)
{
E=e?e:window.event;
Moveout = true;
settimeout (function () {checkout (e);}, 100);
}
function up (e)
{
E=e?e:window.event;
var adapttop;
var prestop=parseint (c.css ("Top"));
C.unbind ("MouseMove", move). Unbind ("Mouseout", Out). CSS (' opacity ', 1);
T.unbind ("MouseUp", up);
Alert (parseint (_this.sliden));
if (((prestop/(Tl/_this.sliden))-parseint (prestop/(Tl/_this.sliden))) >=0.5)
{
_this.index=parseint (prestop/(Tl/_this.sliden)) +1;
}
Else
{
_this.index=parseint (prestop/(Tl/_this.sliden));
}
adapttop=_this.index* (Tl/_this.sliden);
_this.slide (_this.index);
C.css ({"Top": Adapttop});
}
function Checkout (e)
{
E=e?e:window.event;
Moveout && up (e);
}
}
}
var slength=$ ("#smallTools. Innertoolbox ul"). Length;
var stbox=new toolBar ("#smallTools. Innertoolbox", 69,slength,3,700,0, "#smallTools. Innerbar");
Stbox.initbar ();
Stbox.clicktab ("#smallTools. Upbtn", "#smallTools. downbtn");
Stbox.drag ("#smallTools. Innerbar", "#smallTools. Innerbar", 0,196);
})
The level is limited, if has the mistake, please criticize correct.
