發佈日期：
分類：
如何使用jQuery及jQuery UI‧將div物件作隱藏及顯示
之前不是已經做過，將div物件作隱藏嗎？但今次配合jQuery UI，令div物件隱藏時，增加過場畫面。
01. jQuery UI在版本1.8.13，包含了31個元件，您可以一次過在jQuery UI下載所有元件，也可以根據您自己需要，下載只需用到的其中一個元件。
02. 今次測試，只下載effects元件提供13種過場特效，版本為1.8.13。jQuery會使用1.6.1版本。
03. 今次隱藏及顯示，除使用jQuery UI提供的js檔案外，css由自己提供。
04. 隱藏主要部份在function runEffect函數內，控制部份為$( “#effect” ).hide( selectedEffect, options, 1000 )，#effect是div標籤名稱，selectedEffect是過場特效名稱，options是過場特效特定選項，1000是過場特效時間。(測試效果)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
button {
font-family: "Arial";
font-size: 11pt;
padding 0 5px 0 5px;
height: 25px;
}
button#show {
background-color: #FF8F59;
-moz-border-radius: 5px;
}
#effect {
position: relative;
top: 50px;
left: 10px;
width: 350px;
border: 2px solid;
-moz-border-radius: 5px;
padding: 0;
}
.title {
font-size: 12pt;
background: #def3ca;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
text-align: center;
padding: 5px;
}
.content {
font-size: 11pt;
color: #fff;
background: #FF8F59;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
text-align: justify;
padding: 5px;
}
.line {
height: 1px;
background: #000;
}
</style>
<script src="jquery-1.6.1.min.js"></script>
<script src="jquery-ui-1.8.13.effects.min.js"></script>
</head>
<body>
<button id="blind">Blind</button>
<button id="bounce">Bounce</button>
<button id="clip">Clip</button>
<button id="drop">Drop</button>
<button id="explode">Explode</button>
<button id="fold">Fold</button>
<button id="highlight">Highlight</button>
<button id="puff">Puff</button>
<button id="pulsate">Pulsate</button>
<button id="scale">Scale</button>
<button id="shake">Shake</button>
<button id="size">Size</button>
<button id="slide">Slide</button>
<button id="show">Show box</button>
<div id="effect">
<div class="title">Hide effect test!</div>
<div class="line"></div>
<div class="content">jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig. Used by over 43% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.</div>
</div>
<script>
$( "#blind" ).click(function () {
var selectedEffect = "blind";
var options = {};
runEffect(selectedEffect, options);
});
$( "#bounce" ).click(function () {
var selectedEffect = "bounce";
var options = {};
runEffect(selectedEffect, options);
});
$( "#clip" ).click(function () {
var selectedEffect = "clip";
var options = {};
runEffect(selectedEffect, options);
});
$( "#drop" ).click(function () {
var selectedEffect = "drop";
var options = {};
runEffect(selectedEffect, options);
});
$( "#explode" ).click(function () {
var selectedEffect = "explode";
var options = {};
runEffect(selectedEffect, options);
});
$( "#fold" ).click(function () {
var selectedEffect = "fold";
var options = {};
runEffect(selectedEffect, options);
});
$( "#highlight" ).click(function () {
var selectedEffect = "highlight";
var options = {};
runEffect(selectedEffect, options);
});
$( "#puff" ).click(function () {
var selectedEffect = "puff";
var options = {};
runEffect(selectedEffect, options);
});
$( "#pulsate" ).click(function () {
var selectedEffect = "pulsate";
var options = {};
runEffect(selectedEffect, options);
});
$( "#scale" ).click(function () {
var selectedEffect = "scale";
options = { percent: 0 };
runEffect(selectedEffect, options);
});
$( "#shake" ).click(function () {
var selectedEffect = "shake";
var options = {};
runEffect(selectedEffect, options);
});
$( "#size" ).click(function () {
var selectedEffect = "size";
options = { to: { width: 350, height: 30 } };
runEffect(selectedEffect, options);
});
$( "#slide" ).click(function () {
var selectedEffect = "slide";
var options = {};
runEffect(selectedEffect, options);
});
function runEffect(selectedEffect, options) {
$( "#effect" ).hide( selectedEffect, options, 1000 );
}
$( "#show" ).click(function () {
$( "#effect" ).removeAttr( "style" ).show(100);
});
</script>
</body>
</html>
05. 顯示主要部份在function runEffect函數內，控制部份為$( “#effect” ).show( selectedEffect, options, 1000 )，#effect是div標籤名稱，selectedEffect是過場特效名稱，options是過場特效特定選項，1000是過場特效時間。(測試效果)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
button {
font-family: "Arial";
font-size: 11pt;
padding 0 5px 0 5px;
height: 25px;
}
button#hide {
background-color: #FF8F59;
-moz-border-radius: 5px;
}
#effect {
position: relative;
top: 50px;
left: 10px;
width: 350px;
border: 2px solid;
-moz-border-radius: 5px;
padding: 0;
display: none;
}
.title {
font-size: 12pt;
background: #def3ca;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
text-align: center;
padding: 5px;
}
.content {
font-size: 11pt;
color: #fff;
background: #FF8F59;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
text-align: justify;
padding: 5px;
}
.line {
height: 1px;
background: #000;
}
</style>
<script src="jquery-1.6.1.min.js"></script>
<script src="jquery-ui-1.8.13.effects.min.js"></script>
</head>
<body>
<button id="blind">Blind</button>
<button id="bounce">Bounce</button>
<button id="clip">Clip</button>
<button id="drop">Drop</button>
<button id="explode">Explode</button>
<button id="fold">Fold</button>
<button id="highlight">Highlight</button>
<button id="puff">Puff</button>
<button id="pulsate">Pulsate</button>
<button id="scale">Scale</button>
<button id="shake">Shake</button>
<button id="size">Size</button>
<button id="slide">Slide</button>
<button id="hide">Hide box</button>
<div id="effect">
<div class="title">Show effect test!</div>
<div class="line"></div>
<div class="content">jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig. Used by over 43% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.</div>
</div>
<script>
$( "#blind" ).click(function () {
var selectedEffect = "blind";
var options = {};
runEffect(selectedEffect, options);
});
$( "#bounce" ).click(function () {
var selectedEffect = "bounce";
var options = {};
runEffect(selectedEffect, options);
});
$( "#clip" ).click(function () {
var selectedEffect = "clip";
var options = {};
runEffect(selectedEffect, options);
});
$( "#drop" ).click(function () {
var selectedEffect = "drop";
var options = {};
runEffect(selectedEffect, options);
});
$( "#explode" ).click(function () {
var selectedEffect = "explode";
var options = {};
runEffect(selectedEffect, options);
});
$( "#fold" ).click(function () {
var selectedEffect = "fold";
var options = {};
runEffect(selectedEffect, options);
});
$( "#highlight" ).click(function () {
var selectedEffect = "highlight";
var options = {};
runEffect(selectedEffect, options);
});
$( "#puff" ).click(function () {
var selectedEffect = "puff";
var options = {};
runEffect(selectedEffect, options);
});
$( "#pulsate" ).click(function () {
var selectedEffect = "pulsate";
var options = {};
runEffect(selectedEffect, options);
});
$( "#scale" ).click(function () {
var selectedEffect = "scale";
options = { percent: 0 };
runEffect(selectedEffect, options);
});
$( "#shake" ).click(function () {
var selectedEffect = "shake";
var options = {};
runEffect(selectedEffect, options);
});
$( "#size" ).click(function () {
var selectedEffect = "size";
options = { to: { width: 350 } };
runEffect(selectedEffect, options);
});
$( "#slide" ).click(function () {
var selectedEffect = "slide";
var options = {};
runEffect(selectedEffect, options);
});
function runEffect(selectedEffect, options) {
$( "#effect" ).show( selectedEffect, options, 1000 );
}
$( "#hide" ).click(function () {
$( "#effect" ).removeAttr( "style" ).hide(100);
});
</script>
</body>
</html>
註：jQuery版本為1.6.1，jQuery UI effects版本為1.8.13。
發佈留言