从零开始学习jQuery (十) jQueryUI常用功能实战

2020-05-23 06:11:38易采站长站整理

</div>
<script type=”text/javascript”>
/*==========用户自定义方法==========*/

/*==========事件绑定==========*/
$(function()
{
//静态提示类弹出层
$(“span[id^=spanShowTip]”).css(“cursor”, “pointer”).click(function(event)
{
$(“*”).stop();
event.stopPropagation();
var top = $(event.target).offset().top + 20;
var left = $(event.target).offset().left;
$(“#divTip”).dialog(“option”, “position”, [left, top]);
$(“#divTip”).dialog(“open”);
});
//动态提出类弹出层
$(“span[id^=spanShowDataTip]”).css(“cursor”, “pointer”).click(function(event)
{
$(“*”).stop();
$(“#divTip”).dialog(“close”);
event.stopPropagation();
var top = $(event.target).offset().top + 20;
var left = $(event.target).offset().left;
$(“#divTip”).html($(event.target).attr(“data”));
$(“#divTip”).dialog(“option”, “position”, [left, top]);
$(“#divTip”).dialog(“open”);
});
//遮罩类弹出层
$(“#btnShowIframe”).click(function(event)
{
event.preventDefault();
event.stopPropagation();
$(“#divIframe”).dialog(“open”);
});

//单击自身取消冒泡
$(“#divTip, #divIframe”).bind(“click”, function(event)
{
event.stopPropagation();
});

//document对象单击隐藏所有弹出层
$(document).bind(“click”, function(event)
{
$(“#divTip”).dialog(“close”);
$(“#divIframe”).dialog(“close”);
});
});

/*==========加载时执行的语句==========*/
$(function()
{

//初始化提示类弹出层
$(“#divTip”).dialog({
show: null,
bgiframe: false,
autoOpen: false
});

//初始化遮罩类弹出层
$(“#divIframe”).dialog({
show: null,
bgiframe: false,
autoOpen: false,
width: 500,
height: 300,
draggable: true,
resizable: false,
modal: true
});
});
</script>
</body>
</html>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;