jquery-dialog对话框的实现

原创 2012年03月28日 17:39:25
<!--引入jquery类库文件-->
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js"></script>
<!--引入css样式类库-->
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.18.custom.css"  
/>
/*juqery代码部分*/
<script>
$(function (){
   //注册对话框
  $('#dialog').dialog({
    autoOpen:false,  //设置对话框打开方式 不是自动打开
    show:'blind',    //打开时的动画效果
    hide:'explode',  //关闭时的动画效果
    modal:ture,      //遮罩效果 false:非遮罩效果
    title:'添加用户操作界面',  //对话框标题
    position:'top',   //打开对话框的位置  top left rigth
    width:200,        //代表的是对话框的宽度
    height:200,       //代表的是对话框的高度
    drag:function(event,ui){
     //可以测试 对话框当前的坐标位置
     $('#dialog').html('我来拽哈!');
      }
   });
//触发连接事件 当你点击 连接 打开一个对话框
 $('#dialog_link').click(function (){
   $('#dialog').dialog('open');
   });
});
</script>

/*html代码部分*/
<h1>模拟dialog对话框效果</h1>
<!--创建一个连接-->
<a href="#" id="dialog_link" class="ui-state-default "><span></span>open  
dialog</a>
<!--div对话框 $('#dialog').dialog(); 它就成了一个对话框 在页面中就会隐藏-->
<div id="dialog" title='hi'>嘿嘿</div>

效果图:1.  
       2.  
3. 
 
当拖动时显示3

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

jquery+css实现自定义对话框功能(不使用插件)

当今网络上各种jquery对话框插件层出不穷,可是我为什么要放弃这些插件选择自己使用jquery和css来自定义对话框的呢?有两方面的原因,一个是有利于自己更加深入的了解css和jquery的特性,另...

jquery 对话框(Dialog)插件

jQuery 对话框(Dialog) - 模态

jQuery实现自定义样式的弹出窗口和确认框

(function () { $.MsgBox = { Alert: function (title, msg) { GenerateHtml("ale...

jQuery ui 翻译汇总之对话框(dialog)二

继续对话框dialog的第一部分 三、对话框的事件 注意:有些事件之间是相互排斥的,想测试那个,可以把其他的注释掉,效果明显,避免事件间相互触发 create 对话框创建的时候触发的...

jQuery Dialog 弹出层对话框插件--功能全面

网上这种插件很多,但是没一个合适的,大部分都做得很大,功能齐全。于是自己做了这个小插件,顺便学习下jQuery插件的写法。 具体的演示程序在这里:演示程序。 原理很简单,通过JS动态构建一个div...

jQuery Dialog 弹出层对话框插件--功能全面

jQuery Dialog 弹出层对话框插件--功能全面   网上这种插件很多,但是没一个合适的,大部分都做得很大,功能齐全。于是自己做了这个小插件,顺便学习下jQuery插件的写法。 ...

jQuery插件2(拖拽draggable/放置droppable/排序sortable/面板折叠accordion/横向选项卡tabs/对话框dialog/menu/微调spinner/框提示)

1、拖曳插件——draggable 通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(selector). draggable({options}) options...

jquery用ajax取得数据的dialog对话框

1.usermanage.jsp /* 查看用户信息 */ //对话框样式可以去网上找找,也可以去改jquery的源码      $('#dialogSelect').dialog({  ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)