jquery UI 학습
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<style type="text/css">
#drag { background:red;width:100px;height:100px}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#drag").draggable({ disabled: false });
// draggable false true
//alert($("#drag").draggable("option","disabled"));
// draggable
$("#drag").resizable({disabled: false });
$("#sortable").sortable();
$("#dialog").dialog({
autoOpen:false,//
buttons: {" ":function(){$(this).dialog("close");}," ":function(){$(this).dialog("close");}},//
closeOnEscape: true,// ESC ， dialog true ，false
draggable: true,//
height: 300,
width: 400,
show: "scale",// dialog
hide: "scale",// dialog
modal: true,//true dialog
position: "center",// dialog
resizable: true,//
title: " ",
bgiframe: true
});
$("#dialogBtn").click(function(){
$("#dialog").dialog("open");
});
//
$("#tabs").tabs();
//
var divHtml ="";
$(":button:first").click(function(){
divHtml += $("#name").val();
divHtml += "</br>";
$("#write").html(divHtml);
});
})
</script>
</head>
<body>
<table>
<tr>
<td valign="top">
<div>
<input type="text" id="name">
<input type="button" value="input_click">
<div id="write"></div>
</div>
</td>
<td valign="top" style="width:100px;height:100px;">
<div id="drag">draw me</div>
</td>
<td valign="top">
<div>
<ul id="sortable">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
</td>
<td valign="top">
<input type="button" value="dialog" id="dialogBtn">
<div id="dialog">
<table>
<tr>
<td> ：</td>
<td><input type="text" name="id"></td>
</tr>
<tr>
<td> ：</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td> ：</td>
<td><input type="text" name="age"></td>
</tr>
<tr>
<td> ：</td>
<td>
<select>
<option> </option>
<option> </option>
<select>
</td>
</tr>
</table>
</div>
</td>
<td align="top">
<div id="tabs" style="height:300px;width:400px;">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$('#example').tabs();</code></pre>
</div>
<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
</td>
</tr>
</table>
</body>
</html>마지막 으로 원본 파일 을 첨부 하면 관심 있 는 친구 가 다운로드 해 볼 수 있 습 니 다.http://download.csdn.net/source/3536967
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
