标签：
Jayer的使用:
下载Jayer:
官网:http://layer.layui.com/
直接代码:
1.一个简单的使用:
<link href="/layer/skin/layer.css" rel="stylesheet" type="text/css" /> <script src="/Scripts/jquery.min.js" type="text/javascript"></script> <script src="/layer/layer.js" type="text/javascript"></script> <script src="/layer/extend/layer.ext.js" type="text/javascript"></script> <script type="text/javascript"> layer.open({ type: 1, title: false, closeBtn: false, shade: [0], area: [‘340px‘, ‘215px‘], offset: ‘rb‘, //右下角弹出 time: 2000, //2秒后自动关闭 shift: 2, content: ‘<br/> <font color="red">你有最新公告!</font>‘, end: function () { //此处用于演示 layer.open({ type: 2, title: ‘最新公告。‘, shadeClose: true, shade: false, maxmin: true, //开启最大化最小化按钮 area: [‘1150px‘, ‘650px‘], content: ‘/Html/Publish.aspx?ID=1‘ }); } }); </script>
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="/Scripts/jquery.min.js" type="text/javascript"></script> <script src="/Scripts/ZYR/AjaxHelp.js" type="text/javascript"></script> <script src="/Scripts/ZYR/Yzr.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <div id="publish"> </div> </form> </body> </html> <script type="text/javascript"> var Template = { 1: "<h3>{0}</h3><p>{1}</p>" } //根据QueryString参数名称获取值 function getQueryStringByName(name) { var result = location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i")); if (result == null || result.length < 1) { return ""; } return result[1]; } var ID=getQueryStringByName("ID"); AjaxHelp.ProcessGet("/Publish/getPublish", function (ajaxObj) { if (ajaxObj.Status == 1) { var data = ajaxObj.Data; //alert(typeof data);==>String,因为后台传递过来的不是标准JSON字符串格式 var myAttr = data.split(","); var template = Template[1]; var innerhtml = ""; innerhtml = StringFormat.execute(template, myAttr[1].split(":")[1], myAttr[2].split(":")[1]); $("#publish").html(innerhtml); } else alert(ajaxObj.Msg); }); </script>
2.父子级弹出层之间的关系:
ThemeParamsConfig.aspx: <input id="btnThemeName" type="button" class="btn-lg" value="专题选择" onclick="funcThemeName()" /> <script src="/Style/JS/layer-v1.9.3/layer/layer.js"></script> <script type="text/javascript"> //选择专题 function funcThemeName() { //iframe层-父子操作 layer.open({ title: ‘专题选择‘, type: 2, area: [‘600px‘, ‘400px‘], fix: false, //不固定 maxmin: false, content: ‘ThemeSelected.aspx‘ }); } </script>
ThemeSelected.aspx:
<script type="text/javascript"> //操作列 function funcFmtTheme(value, row, index) { var a = ""; a += ‘<a onclick="funcSelected(‘ + index + ‘)">选择</a>‘; return a; } function funcSelected(index) { //关键 $("#grid").datagrid("selectRow", index); var row = $("#grid").datagrid("getSelected"); if (row) { funcSure(row.ThemeName, row.ThemeID); } } var index = parent.layer.getFrameIndex(window.name); //获取窗口索引 function funcSure(themeName, themeID) { //给父页面传值 parent.$(‘#btnThemeName‘).val(themeName); parent.$("#themeID").val(themeID); parent.funcGISLevel();//执行父页面的方法 parent.layer.close(index); } </script>
Jayer的功能还是很强大的,这里就不多写了.
END
标签：
原文地址：http://www.cnblogs.com/Francis-YZR/p/4868433.html
