accordion

最新推荐文章于 2023-12-27 12:03:12 发布

wangyijun1

最新推荐文章于 2023-12-27 12:03:12 发布

阅读量588

点赞数

本文链接：https://blog.csdn.net/wangyijun1/article/details/8860055

版权

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>My JSP 'jqueryUI.jsp' starting page</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<link href="web/css/ui-lightness/jquery-ui-1.9.0.custom.css"
			rel="stylesheet">
		<link href="web/css/jqueryStudy.css" rel="stylesheet">

		<script src="web/js/jquery-1.8.2.js"></script>

		<script src="web/js/jquery-ui-1.9.0.custom.js"></script>
		<script type="text/javascript">
		$(document).ready(function()
		{ 
			  //这个方法disable进程条，并修改其Style使其看起来无效。
			  //$( "#progress" ).progressbar({ value: 100, disabled: true }); 
			  //设置滚动条能用
			 //$( "#progress" ).progressbar( "enable" ); 
			  //某些UI组件创建一个wrapper元素或者和原先元素无关联的新元素。在这种情况下，widget方法返回生成的新元素。 
			  //对于Progressbar来说，没有生成的HTML元素，这个方法返回原先的HTML元素
			  //$( "#progress" ).progressbar( "widget" ); 
			  $( "#progress" ).progressbar();
			  //绑定click事件
			  $( "#progress" ).bind("click",function()
			  { 
			  	  $("#progress").addClass("span_color_red");
	          });
			  $( "#progress2" ).progressbar(
			  { 
			  	  click: function()
			      { 
					$("#progress2").addClass("span_color_green"); 
		          }	          
			 }); 
			 //定义图标对象
			 var icons = { 
		         header: "ui-icon-circle-arrow-e", 
		         activeHeader: "ui-icon-circle-arrow-s" 
			   }; 
		     //
		     $( "#accordion" ).accordion({
		     		icons: icons,  
		     		collapsible: true,
		     		heightStyle: "content",
		     		//缺省情况下，打开Accordion某个部分内容，是点击该部分标题，如果需要实现移动鼠标到该部分自动展开内容，可以设置event属性
		     		event: "mouseover" 
		     	 }); 
		     //重置accordion的大小
		     $("#accordion-resizer").resizable({ 
                   minHeight: 140,        
                   minWidth: 200, 
                   resize: function () 
                   { 
                     $("#accordion").accordion("refresh"); 
                   } 
             }); 

		     
		     //可以自定义Accordion 组件标题前的图标，缺省的图标为箭头（未展开是箭头向右，展开时向下），	  
		     //使用jQuery CSS框架中定义的类或是通过自定义背景图像类，可以重新配置这两个图标
			 $( "#toggle" ).button().click(function()
             { 
			      if ( $( "#accordion" ).accordion( "option", "icons" ) ) 
			      { 				
			        $( "#accordion" ).accordion( "option", "icons", null ); 				
			      } 
			      else { 				
			        $( "#accordion" ).accordion( "option", "icons", icons ); 				
			      } 	
	   		 }); 
	   		 //使用sortable方法允许重新调整Accordion每个部分的顺序，可以通过拖放的方法调整顺序：
	   		  $("#accordion").accordion(
	   		  { 
		          header: "> div > h3", 
		          collapsible: true  
		       }).sortable(
		       { 
		              axis: "y", 
		              handle: "h3", 
		              stop: function (event, ui) 
		              { 
		                  // IE doesn't register the blur when sorting 
		                  // so trigger focusout handlers to remove .ui-state-focus 
		                  ui.item.children("h3").triggerHandler("focusout"); 
		              } 
               	});
		});
	
	</script>

	</head>

	<body>
		<span id="progress">滚动条</span>
		<span id="progress2">滚动条的事件 </span>
		<h3 class="docs">
			Resize the outer container:
		</h3>
		<div id="accordion-resizer" class="ui-widget-content">


			<div id="accordion">
				<h3>
					Section 1
				</h3>
				<div>
					<p>
						Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.
						Integer ut neque. Vivamus nisi metus, molestie vel, gravida in,
						condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam
						mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a
						velit eu ante scelerisque vulputate.
					</p>
				</div>
				<h3>
					Section 2
				</h3>
				<div>
					<p>
						Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit
						amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris
						turpis porttitor velit, faucibus interdum tellus libero ac justo.
						Vivamus non quam. In suscipit faucibus urna.
					</p>
				</div>
				<h3>
					Section 3
				</h3>
				<div>
					<p>
						Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque
						lobortis. Phasellus pellentesque purus in massa. Aenean in pede.
						Phasellus ac libero ac tellus pellentesque semper. Sed ac felis.
						Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu
						iaculis leo purus venenatis dui.
					</p>
					<ul>
						<li>
							List item one
						</li>
						<li>
							List item two
						</li>
						<li>
							List item three
						</li>
					</ul>
				</div>
				<h3>
					Section 4
				</h3>
				<div>
					<p>
						Cras dictum. Pellentesque habitant morbi tristique senectus et
						netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum
						primis in faucibus orci luctus et ultrices posuere cubilia Curae;
						Aenean lacinia mauris vel est.
					</p>
					<p>
						Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat
						lectus. Class aptent taciti sociosqu ad litora torquent per
						conubia nostra, per inceptos himenaeos.
					</p>
				</div>
			</div>
		</div>
		<button id="toggle">
			click
		</button>
	</body>
</html>

wangyijun1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
accordion

<% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";%>
复制链接

扫一扫