jquery tabsは最も簡略化されたインスタンスを使用する
jquery tabsはjqueryのタブまたはラベルプラグインです.私のような可哀想なサイト管理者は、美工が投げてきた切好図のhtmlページにラベル機能をつけて、サイトに置く.ここではtabsプラグインの最も簡単な呼び出し方法を提供し、私のような初心者にあげます.
隠しパネルのスタイルを見つけるために時間がかかりましたが、firefoxのweb develop拡張で選択した領域のソースコードを表示する機能があり、javascriptの影響下のコードを簡単に表示でき、助かりました.
上のコードは、実行後の状況は次のとおりです.
これで、jqueryがそれらのスタイルを使っているのがよくわかりますが、最終的にこのラベルプラグインがどのように作られるかは、自分の好み次第です.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery tabs demo min</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.22.core.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.22.widget.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.22.tabs.min.js"></script>
<script type="text/javascript">
$(function(){
$('#div_out').tabs();
//$('#div_out').tabs({event: "mouseover"});
});
</script>
<style type="text/css">
.ui-tabs-hide {
display: none !important;
}
</style>
</head>
<body>
<div id="div_out">
<ul>
<li><a href="#div-1"> </a> </li>
<li><a href="#div-2"> </a> </li>
<li><a href="#div-3"> </a> </li>
<li><a href="#div-4"> </a> </li>
</ul>
<div id="div-1"> ： ？ ： ， ； ， 。</div>
<div id="div-2"> ：“ ， 。”</div>
<div id="div-3"> ， ， ， 。</div>
<div id="div-4"> ， 。 。 。</div>
</div>
</body>
</html>隠しパネルのスタイルを見つけるために時間がかかりましたが、firefoxのweb develop拡張で選択した領域のソースコードを表示する機能があり、javascriptの影響下のコードを簡単に表示でき、助かりました.
上のコードは、実行後の状況は次のとおりです.
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jquery tabs demo min</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.22.core.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.22.widget.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.22.tabs.min.js"></script>
<script type="text/javascript">
$(function(){
$('#div_out').tabs();
//$('#div_out').tabs({event: "mouseover"});
});
</script>
<style type="text/css">
.ui-tabs-hide {
display: none !important;
}
</style>
</head>
<body>
<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="div_out">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#div-1"> </a> </li>
<li class="ui-state-default ui-corner-top"><a href="#div-2"> </a> </li>
<li class="ui-state-default ui-corner-top"><a href="#div-3"> </a> </li>
<li class="ui-state-default ui-corner-top"><a href="#div-4"> </a> </li>
</ul>
<div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="div-1"> ： ？ ： ， ； ， 。</div>
<div class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" id="div-2"> ：“ ， 。”</div>
<div class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" id="div-3"> ， ， ， 。</div>
<div class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" id="div-4"> ， 。 。 。</div></div>
</body></html>これで、jqueryがそれらのスタイルを使っているのがよくわかりますが、最終的にこのラベルプラグインがどのように作られるかは、自分の好み次第です.