jquery eaayui 學習（一） panel

時間 2019-11-13

原文原文鏈接

1.樣式導入及文件結構 javascript

<script type="text/javascript" src="./easyui/jquery-1.9.1.js"></script>
<script type="text/javascript" src="./easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="./easyui/easyui.css">
<link rel="stylesheet" type="text/css" href="./easyui/icon.css">

<!-- test scrict/css --> 
<link rel="stylesheet" type="text/css" href="./images/testCss.css">
<script type="text/javascript" src="./js/testJs.js"></script>

2. html: css

<body>
	<input type="button" id="btn" value="Test"/>
	<div id="p">p</div>
</body>

3.js: html

$(function() {
	$("#p").panel({
		title:'我是面板',
		width:500,
		height:300,
		collapsible:true,
		minimizable:true,
		maximizable:true,
		closable:true,
		iconCls:'icon-save',   //title 左邊的panel圖標
		tools:[{               // 右邊的工具圖標
			iconCls:'icon-add',
			handler:function(){alert("add");}
		},{
			iconCls:'icon-save',
			handler:function(){alert("save");}
		}],
		href:'data.jsp',      //數據來源,該屬性與content屬性相剋
		cache:false,          //緩存href的數據，默認true
		onLoad:function(){alert("data loaded from data.jsp");},   //數據加載完成後觸發事件
		loadingMessage:'loading data...',
		cls:'pCls',             //分別給panel、header、body 添加CSS類 。驗證：【alert($(".hCls").text());】
		headerCls:'hCls',   
		bodyCls:'bCls',
		//style:{width:500,height:500}   //添加自定義樣式
		//fit:true                        //填充父容器
		//doSize:true                    //搞不清楚？？？？？？？？？？？？
		noheader:false,
		//content:'hello world'         //
		collapsed:true  
		//extractor:function(result){}    //從異步Ajax 返回數據中抽取指定內容
		//onBeforeOpen:function(){alert("going to open panel");}
	});
	/// 
	$("#btn").click(function(){
		
		// 方法調用示例：方法名refresh做爲panel 的參數
		$("#p").panel("refresh");
		//屬性獲取示例：獲取panel的title 屬性
		var ca = $("#p").panel("options").title;
		
		
	});
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。