控件使用
1. 交互型对话框
<link href="${ ctx}/scripts/jquery/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
$("a[type=deleteWeibo]").live('click',function()
{
var weiboId= $(this).attr('rel');
var parent = $(this).parent().parent();
$( "#dialog-confirm" ).dialog({
resizable: false,
height:200,
modal: true,
buttons: {
"YES": function() {
yqrpc("jdbcTemplate.update")("delete from t_weibo_atme where f_weibo_id="+weiboId);
yqrpc("jdbcTemplate.update")("delete from t_weibo_reply where f_weibo_id="+weiboId);
yqrpc("jdbcTemplate.update")("delete from t_weibo where f_id="+weiboId);
parent.remove();
$( this ).dialog( "close" );
},
"NO": function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
<body>
<!-- 提醒框 -->
<div id="dialog-confirm"title="提醒框" style="display: none;">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
确定删除？YES|NO</p>
</div>
<a rel='${weibo.id }' class="outter-box" type="deleteWeibo">删除</a>
</body>
效果如下：
2.个人信息弹出窗口(仿效新浪微博)
<script type=”text/javascript” >
$('a[rel=weibo-username]').live('mouseenter',function() { ajax1(this,'${ctx }'); });
$('a[rel=weibo-username]').live('mouseleave',function () { $('#profileWindow_show').hide(); });
$('#profileWindow_show').mouseenter(function() { $('#profileWindow_show').show(); });
$('#profileWindow_show').mouseleave(function (){ $('#profileWindow_show').hide(); });
function ajax1(weibo_name,ctx)
{
//将$('#profileWindow_show').html();的内容修改为你想要的
$('#profileWindow_show').show();
//set the position, the box should appearunder the link and centered
$('#profileWindow_show').css({'top':top,'left':left});
}
</script>
<body>
<!-- 悬浮框显示,防止信息的重复-->
<div id="profileWindow_show"style="left: 331px; top: 1032px; display: none;"
class="yj-tooltip yj-tooltip-under-header-bar yj-hovercardyj-balloon yj-bottom">
</div>
<!-- 悬浮框-->
<div id="profileWindow"style="left: 331px; top: 1032px; display: none;">
//设置悬浮框显示的样式
</div>
</body>
效果如下：
3.alert弹出框(嵌套可以html)
参考文档：http://www.jscode.cn/js/demo/16562/
jAlert('This is a custom alert box', 'Alert Dialog');
jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
jAlert('Confirmed: ' + r, 'Confirmation Results');
});
jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
if( r ) alert('You entered ' + r);
});
jAlert('欢迎访问网页设计爱好者www.html.org.cn, and underline!');
