代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 拖动(Draggable) - 视觉反馈</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
<style>
#draggable, #draggable2, #draggable3, #set div { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
#draggable, #draggable2, #draggable3 { margin-bottom:20px; }
#set { clear:both; float:left; width: 368px; height: 120px; }
p { clear:both; margin:0; padding:1em 0; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable({ helper: "original" });
$( "#draggable2" ).draggable({ opacity: 0.7, helper: "clone" });
$( "#draggable3" ).draggable({
cursor: "move",
cursorAt: { top: -12, left: -20 },
helper: function( event ) {
return $( "<div class='ui-widget-header'>I'm a custom helper</div>" );
}
});
$( "#set div" ).draggable({ stack: "#set div" });
});
</script>
</head>
<body>
<div id="accordion">
<h3>jQuery</h3>
<div>jQuery is a fast, small, and feature-rich JavaScript library.</div>
<h3>jQuery UI</h3>
<div>jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. </div>
<h3>jQuery Mobile</h3>
<div>jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices</div>
</div>
<script>
$( "#accordion" ).accordion({
active: 1
});
var active = $( "#accordion" ).accordion( "option", "active" );
$( "#accordion" ).accordion( "option", "active", 2 );
</script>
</body>
</html>
在脚本部分,您可以看到在初始化和选项方法之间写入的var active = $( "#accordion" ).accordion( "option", "active" );
。谁能解释这一步意味着什么?
根据jquery-ui accordion's
active
选项文档,active
选项的值指定当前打开的面板。
请在代码中查看以下代码和我的评论:
....
............
<script>
$( "#accordion" ).accordion({
active: 1//the currently acitve tab section of the accordion (the active one which is currently opened up). The index starts from 0
});
//Getter method
var active = $( "#accordion" ).accordion( "option", "active" );
alert('active = '+active);//here it will alert the index of the currently open panel
$( "#accordion" ).accordion( "option", "active", 2);//set the index of the accordion tab to be activated, currently set to "2" so the third tab would be activ and open
</script>
.......
....
...
希望你现在清楚提供的解释。