jquery Control Usage Tutorial

jquery controls are often used during web development. and began to learn a lot of controls in the process, summed up a note, the special assembly, in preparation for their own or friends to learn exchange.

(a) floating Box

Function Introduction: This control can achieve the dynamic positioning of the layer (Four Corners: Upper left, lower left, upper right, right)

The effect shows that when the four buttons are clicked, the floating layer drifts back to the corresponding position.

Operation Steps:

1, add the reference (note the path and their corresponding, file see annex)

<script　type="text/javascript"　src="jquery.js"></script>
　<script　type="text/javascript"　src="jquery.floatingbox.js"></script>

2. Set CSS style

<style　type="text/css">
　　　　　　　　　#FloatingBox
　　　　　　　　　{
　　　　　　　　　　　　　border:1px　#FF3300　solid;
　　　　　　　　　　　　　width:80px;
　　　　　　　　　　　　　height:100px;
　　　　　　　　　　　　　background-color:#CC9900;
　　　　　　　　　}
　　　　　　　　</style>

3, add the Load function (note should be the corresponding Div ID)

<script　type="text/javascript">
　　$(document).ready(
　　　　　　function()
　　　　　　{
　　　　　　　　　　　$('#FloatingBox').floating();
　　　　　　}
　　　　);
　</script>

4. Add an event function call for four buttons on the DIV layer

<button　onclick="javascript:$('#FloatingBox').floatingPosition('left',　'top');">左上</button>
<button　onclick="javascript:$('#FloatingBox').floatingPosition('right',　'top');">右上</button><br>
<button　onclick="javascript:$('#FloatingBox').floatingPosition('left',　'bottom');">左下</button>
<button　onclick="javascript:$('#FloatingBox').floatingPosition('right',　'bottom');">右下</button>

5, congratulations, you can save the viewing effect. Look at the click of the button to locate the layer feel very comfortable?

6, please pay attention to the next article!

This article supporting source code