easyui Panel的add,remove,select

来源:互联网 发布:淘宝首页滚动图片尺寸 编辑:程序博客网 时间:2024/06/03 03:22
<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>demo-accordion-action</title><link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../../themes/icon.css"><link rel="stylesheet" type="text/css" href="../demo.css"><script type="text/javascript" src="../../js/jquery.min.js"></script><script type="text/javascript" src="../../js/jquery.easyui.min.js"></script></head><!-- action.jsp文件是对于Panel的add,remove,select的演示 --><body><div style="margin:20px 0 10px 0;"><a href="javascript:void(0)" class="easyui-linkbutton" onclick="selectPanel()">Select</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="addPanel()">Add</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="removePanel()">Remove</a></div><div id="aa" class="easyui-accordion" style="width:500px;height:300px;"><div title="关于" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">           这是我的第一个easyui-accordion页面     </div></div><script type="text/javascript">//addPanelvar idx = 1;function addPanel(){  $('#aa').accordion('add',{title:'addPanel'+idx,content:'<div style="padding:10px">addPanel'+idx+'</div>'});idx++; } //removePanelfunction removePanel(){var pp = $('#aa').accordion('getSelected');if (pp){var index = $('#aa').accordion('getPanelIndex',pp);$('#aa').accordion('remove',index);} } //selectPanelfunction selectPanel(){$.messager.prompt('Prompt','请输入一个panle标题:',function(s){if (s){$('#aa').accordion('select',s);}});}</script></body></html>