网站

最新推荐文章于 2020-02-25 09:51:09 发布

StarsRu丶星星茹

最新推荐文章于 2020-02-25 09:51:09 发布

阅读量260

点赞数

本文链接：https://blog.csdn.net/onlyru/article/details/80061659

版权

在国内网站中，包括三大门户，以及“引领”中国网站设计潮流的蓝色理想，ChinaUI等都是使用了px作为字体单位。只有百度好歹做了个可调的表率。而在大洋彼岸，几乎所有的主流站点都使用em作为字体单位，也就是可调的。没错，px比em更加容易使用，大部分读者不知道em为何物或者它相当于多少 px。国外人士如此重视网站易用性(Accessibility)，不仅因为其根生蒂固的人文精神，直接原因可能是因为有一部法律来约束他们—例如美国的Section 508，强制网站达到一定的易用性。

关键点：　　1. IE无法调整那些使用px作为单位的字体大小;
　　2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位;
　　3. Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核)。
　　px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
　　em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
　　任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明 Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
　　em有如下特点：
　　1. em的值并不是固定的;
　　2. em会继承父级元素的字体大小。
　　所以我们在写CSS的时候，需要注意两点：
　　1. body选择器中声明Font-size=62.5%;
　　2. 将你的原来的px数值除以10，然后换上em作为单位;
　　3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
　　也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。
　　但是12px汉字例外，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问题 Jorux已经解决，只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。不知道有没有其他的解释。

position:relative;
z-index:2;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(PIE.htc);

<div id="container">
<ul id="Menu">
<li><a href="javascript:" οnclick="change_bg(this)" class="current">Menu1</a></li>
<li><a href="javascript:" οnclick="change_bg(this)">Menu2</a></li>
<li><a href="javascript:" οnclick="change_bg(this)">Menu3</a></li>
<li><a href="javascript:" οnclick="change_bg(this)">Menu4</a></li>
<li><a href="javascript:" οnclick="change_bg(this)">Menu5</a></li>
</ul>
</div>

function change_bg(obj)
{
var a=document.getElementById("Menu").getElementsByTagName("a");
for(var i=0;i<a.length;i++)
{
a[i].className="";
}
obj.className="current";
}

未能找到类型或命名空间名称“XXXX”(是否缺少 using 指令或程序集引用?)

<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Shared Calendar in DateBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Shared Calendar in DateBox</h2>
<p>Multiple datebox components can share a calendar and use it to pick dates.</p>
<div style="margin:20px 0;"></div>
<table>
<tr>
<td>Start Date:</td>
<td>
<input class="easyui-datebox" data-options="sharedCalendar:'#cc'">
</td>
<td>End Date:</td>
<td>
<input class="easyui-datebox" data-options="sharedCalendar:'#cc'">
</td>
</tr>
</table>
<div id="cc" class="easyui-calendar"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Combo - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic Combo</h2>
<p>Click the right arrow button to show drop down panel that can be filled with any content.</p>
<div style="margin:20px 0"></div>
<select id="cc" style="width:150px"></select>
<div id="sp">
<div style="color:#99BBE8;background:#fafafa;padding:5px;">Select a language</div>
<div style="padding:10px">
<input type="radio" name="lang" value="01"><span>Java</span><br/>
<input type="radio" name="lang" value="02"><span>C#</span><br/>
<input type="radio" name="lang" value="03"><span>Ruby</span><br/>
<input type="radio" name="lang" value="04"><span>Basic</span><br/>
<input type="radio" name="lang" value="05"><span>Fortran</span>
</div>
</div>
<script type="text/javascript">
$(function(){
$('#cc').combo({
required:true,
editable:false
});
$('#sp').appendTo($('#cc').combo('panel'));
$('#sp input').click(function(){
var v = $(this).val();
var s = $(this).next('span').text();
$('#cc').combo('setValue', v).combo('setText', s).combo('hidePanel');
});
});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic DataGrid</h2>
<p>The DataGrid is created from markup, no JavaScript code needed.</p>
<div style="margin:20px 0;"></div>

<table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tab Position - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Tab Position</h2>
<p>Click the 'position' drop-down list and select an item to change the tab position.</p>
<div style="margin:20px 0;">
<span>Position:</span>
<select οnchange="$('#tt').tabs({tabPosition:this.value})">
<option value="top">Top</option>
<option value="bottom">Bottom</option>
<option value="left">Left</option>
<option value="right">Right</option>
</select>
</div>
<div id="tt" class="easyui-tabs" style="width:700px;height:250px">
<div title="About" style="padding:10px">
<p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
<ul>
<li>easyui is a collection of user-interface plugin based on jQuery.</li>
<li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
<li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
<li>complete framework for HTML5 web page.</li>
<li>easyui save your time and scales while developing your products.</li>
<li>easyui is very easy but powerful.</li>
</ul>
</div>
<div title="My Documents" style="padding:10px">
<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true"></ul>
</div>
<div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
This is the help content.
</div>
</div>

</body>
</html>

var jsonstr = '{"total":1,"rows":[{"id":"M000005","name":"检测设备","sortid":3,"valid":"1","handler":"系统管理员"}]}';
var data = $.parseJSON(jsonstr);
$('#goods_Type_Grid').datagrid('loadData', data); //将数据绑定到datagrid

之前用EasyUI都是在属性里面直接写url绑定数据，这次是必须手动绑定，点击超链接，后台ashx返回json数据绑定datagrid，用$("#dg").datagrid('loadData',json)试了半天不行，查了谷歌才知道得这么写$("#dg").datagrid('loadData',{ total: total, rows: json })，其中total是数据的总行数，因为现在我的ashx要返回两个数据：总行数和json，这个简单，ashx拼接字符串得到字符串res，到js用res.split('|')分割就行了。

正心想可以下班了，美了一把，改好之后再试，表格是画出来了，数据却没显示出来。用后台传过来的字符串直接放到json参数位置不行，折腾了半天才知道必须要转成json格式才能用。var json = JSON.parse(resdata); 搞定！

function commShow(MessageId) {
var url = "../ashx/Ploy.ashx";
var data = { MessageId: MessageId };
$.post(url, data, function (res) {
var arr = res.split('￥');
var total = arr[0];
var resdata = arr[1];
var json = JSON.parse(resdata);
var datasource = { total: total, rows: json };
$("#dg").datagrid('loadData', datasource);
$('#dlg').dialog('open');
})
}

function getMoreRecent(){
$('#filedGrid').datagrid({
title:"立案秘书收到的案子",
url:"/arbcase/api/pageClickLog/recentCaseTopList",
columns:[[
{field:'collectNo',title:'案号',width:100,
formatter: function(value,row,index){
return '<a style="color:blue" href="/arbcase/case-'+row.id+'">'+row.collectNo+'</a>';
} },
{field:'nature',title:'案由',width:100},
{field:'accuserListText',title:'申请人',width:100},
{field:'appelleListText',title:'被申请人',width:100},
{field:'createdDatetimeText',title:'录入时间',width:50}
]]
});
}

<th width="165" data-options="field:'aa',formatter:go">操作</th>

之后写个方法：

function go(val,row){
return '<a href="#" οnclick="constructionManager(\'' + row.id+ '\')">查看</a> '

}

<div align="right"><img src="http://www.beian.gov.cn/img/ghs.png"/><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44040202000432" target="_blank">粤公网安备44040202000432号</a> | 版权所有?1998-2017 珠海优特电力科技股份有限公司

<!DOCTYPE?html>
<html>
???
??<head>
????<meta?charset="utf-8">
????<title>demo</title>
????<script?type="text/javascript"?src="jquery-1.8.3.min.js"></script>
????<script?type="text/javascript"?src="aesst/style.js"></script>
????<link?rel="stylesheet"?type="text/css"?href="aesst/style.css"?/></head>
???
??<body>
????<input?type="button"?name=""?id="btn"?value="弹窗"?οnclick="pop({width:500,width:500});"?/>
????<script?type="text/javascript">$(function()?{
????????pop({
??????????width:?500,
??????????//提示窗口的宽度
??????????height:?500,
??????????//提示窗口的高度
??????????title:?'这是标题',
??????????//提示窗口的标题
??????????content:?'这是提示信息'?//提示窗口的内容
????????});
??????});</script>
??</body>
?
</html>

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index9</title>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/jquery-easyui/jquery.easyui.min.js"></script>
<script src="~/jquery-easyui/jquery.easyui.min.js"></script>
<script src="~/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<link href="~/jquery-easyui/themes/default/easyui.css" rel="stylesheet" />
<link href="~/jquery-easyui/themes/icon.css" rel="stylesheet" />
</head>
<body>


<table id="Cse_Bespeak_Log" class="easyui-datagrid" style="width: auto; height: 350px;">
<thead>
<tr>

@*<th data-options="field:'Id'" align="center" width="100" sortable="true">
编号
</th>
<th field="UserName" align="center" width="120" sortable="true">
用户名
</th>
<th field="Name" align="center" width="80" sortable="true">
姓名
</th>
<th field="Age" align="center" width="80" sortable="true">
年龄
</th>
<th field="Email" align="center" width="80" sortable="true">
邮箱
</th>*@
@*<th align="center" width="120px">操作</th>*@
</tr>
</thead>
</table>


<div id="dlg" class="easyui-dialog" style="width: 600px; height: auto; padding: 10px 20px"
data-options="closed:true,buttons:'#dlg-buttons'">
<table id="datagrid" class="easyui-datagrid" style="width:600px;height:150px">
<thead>
<tr>
<th data-options="field:'Id'" align="center" width="100" sortable="true">
编号
</th>
<th field="UserName" align="center" width="120" sortable="true">
用户名
</th>
<th field="Name" align="center" width="80" sortable="true">
姓名
</th>
<th field="Age" align="center" width="80" sortable="true">
年龄
</th>
<th field="Email" align="center" width="80" sortable="true">
邮箱
</th>

</tr>
</thead>
</table>
</div>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" οnclick="saveUser()">保存</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" οnclick="javascript:$('#dlg').dialog('close')">关闭</a>
</div>
<input type="button" value="查询详情" οnclick="" />
</body>
</html>
<script type="text/javascript">
$(function () {



$("#Cse_Bespeak_Log").datagrid({
url: "/Home/getData",
iconCls: "icon-add",
fitColumns: false,
loadMsg: "数据加载中......",
pagination: true,
rownumbers: true,
nowrap: false,
showFooter: true,
singleSelect: true,
pageList: [100, 50, 20, 10],

columns: [[
{
field: 'Id', title: '编号', width: 50, align: 'center',
},
{
field: 'UserName', title: '用户名', width: 50, align: 'center',
},
{
field: 'Name', title: '姓名', width: 50, align: 'center',
},
{
field: 'opt', title: '操作', width: 100, align: 'center',
formatter: function (value, row,index) { //参数row表示当前行, 参数index表示当前行的索引值

//row.Id表示这个button按钮所在的那一行的Id这个字段的值
var btn = '<input type="button" id='+index+' value="查询详情" οnclick="return LoadUserInfo('+row.Id+')"/>';
return btn;
}
}]]

})

})

function LoadUserInfo(row) {

/*获取选中行*/
//var row = $('#Cse_Bespeak_Log').datagrid('getSelected'); //获取选中行

$("#datagrid").datagrid({
url: "/Home/getUserInfo?id=" + row,
iconCls: "icon-add",
fitColumns: false,
loadMsg: "数据加载中......",
pagination: true,
rownumbers: true,
nowrap: false,
showFooter: true,
singleSelect: true,
pageList: [100, 50, 20, 10],
})


$('#dlg').window('open'); //弹出这个dialog框
};

</script>

jQuery('#user-grid').datagrid({
url: basePath + 'user-manager-list.html',
width: 870,
height: 338,
fitColumns: true,
pagination:true,
rowIndex:'login_name',
singleSelect:true,
toolbar:
[
{text:'添加',iconCls :'icon-add',handler:newUser} ,
{text:'编辑, iconCls:'icon-edit', handler:editUser },
{text:'删除, iconCls:'icon-remove',handler:removeUser }
],
//　双击函数
onDblClickRow:function() {
editUser();
},
columns:[
[
{field:'login_name',title:'登录名称,width:120},
{field:'employ_id',title:'员工号码,width:80},
{field:'email',title:'邮件地址,width:200,align:'right'},
{field:'status',title:'状态,width:200,align:'center'},
{field:'expiry_date',title:'到期日期',width:160},
{field:'create_date',title:'创建日期,width:160,align:'center'}
]
]
});

}

</script>

var customOBJ;
$('#customobjList').datagrid({
width:500,
height:200,
pageSize:5,
pageList:[5,15,20,25,30,35,40],
singleSelect:true,
nowrap:false,
url:'${basePath}/marketPlat/addDataServlet?method=seachOwnCustomobj',
onLoadSuccess:function(data){
//alert(data.rows.length);
},
//　双击函数
onDblClickRow:function(rowIndex, rowData){
customOBJ=new Object();
customOBJ.customobjId=rowData.customObjId;
customOBJ.customobjName=rowData.name;
setCustomobjName(customOBJ);
//其中rowData.customObjId 对应后天的json数据
show(customOBJ.customobjId);
},
columns:[[
{field:'name',title:'客户单位全称',width:180,align:'left',
formatter:function(value,rowData,rowIndex){
//alert(value);
return value;
}
},
{field:'industry',title:'所属行业',width:150,align:'center'},
{field:'regionType',title:'客户类别',width:150,align:'center'}
]],
pagination:true
});
function show(id)
{
var url='${basePath}/page/marketPlat2/addData/seachProduct_list.jsp?type='+id;
var productWin=$('#product-window').window({
href:url,
title:'选择产品',
closed: true,
minimizable:false,
collapsible:false,
maximizable:false,
cache:false,
shadow:false
});
productWin.window('open');
}

做项目的时候因为需求,要在表格的最后添加一列操作列,easyUI貌似没有提供这种功能,不过没关系,我们可以自定义来实现
版本:jQuery easyUI 1.3.2
这里我的实现方式是采用HTML形式,js方式暂时还没用到
首先是HTML部分
<table id="dg" title="学生信息" class="easyui-datagrid"
url="${ctx}listStudent.do"
toolbar="#toolbar" pagination="true"
rownumbers="false" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th data-options="field:'stuNo',sortable:true,width:20">学号</th>
<th data-options="field:'name',width:20">姓名</th>
<th data-options="field:'gender',width:20,formatter:formatGender">性别</th>
<th data-options="field:'nationality',width:20">名族</th>
<th data-options="field:'address',width:50,formatter:formatAddr">家庭地址</th>
<th data-options="field:'mobile',width:20">手机号</th>
<th data-options="field:'birthday',width:20">出生日期</th>
<th data-options="field:'registDate',sortable:true,width:20">入学时间</th>
<th data-options="field:'_operate',width:80,align:'center',formatter:formatOper">操作</th>
</tr>
</thead>
</table>
<th data-options="field:'_operate',width:80,align:'center',formatter:formatOper">操作</th>
注意红色部分,就是我们的操作列,field的名字随便取,我这里是_operate,关键是formatOper函数
function formatOper(val,row,index){
return '<a href="#" οnclick="editUser('+index+')">修改</a>';
}

formatOper()函数中有三个参数,val指当前单元格的值,row,当前行对象,index当前行的索引.这里我们就需要这个index
我把这个index传入了一个叫editUser的函数中,为什么要传这个index呢,我们在来看下这个editUser函数
function editUser(index){
$('#dg').datagrid('selectRow',index);// 关键在这里
var row = $('#dg').datagrid('getSelected');
if (row){
$('#dlg').dialog('open').dialog('setTitle','修改学生信息');
$('#fm').form('load',row);
url = '${ctx}updateStudent.do?id='+row.id;
}
}
翻阅easyUI文档可以发现datagrid有一个方法叫selectRow
selectRow index Select a row, the row index start with 0.
它的作用就是手动选中表格的行,参数就是index值,从0开始
这样,我们就能实时获取到鼠标点击行所对应的数据了

$('#dg').datagrid('selectRow',index);
var row = $('#dg').datagrid('getSelected');
这两句话就是获取选中的行

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>layer-更懂你的web弹窗解决方案</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script src="layer/layer.js"></script>
<script src="layer/extend/layer.ext.js"></script>
</head>

<body>
<script>
function func1() {
layer.alert('内容');
}

function func2() {
layer.alert('内容', {
icon: 1,
skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
});
}

function func3() {
//询问框
layer.confirm('您是如何看待前端开发？', {
btn: ['重要','奇葩'] //按钮
}, function(){
layer.msg('的确很重要', {icon: 1});
}, function(){
layer.msg('也可以这样', {
time: 2000, //2s后自动关闭
btn: ['明白了', '知道了']
});
});
}

function func4() {
//提示层
layer.msg('玩命提示中');
}

function func5() {
//墨绿深蓝风
layer.alert('墨绿风格，点击确认看深蓝', {
skin: 'layui-layer-molv' //样式类名
,closeBtn: 0
}, function(){
layer.alert('偶吧深蓝style', {
skin: 'layui-layer-lan'
,closeBtn: 0
,shift: 4 //动画类型
});
});
}

function func6() {
//捕获页
layer.open({
type: 1,
shade: false,
title: false, //不显示标题
content: $('.layer_notice'), //捕获的元素
cancel: function(index){
layer.close(index);
this.content.show();
layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 2000, icon:6});
}
});
}

function func7() {
//页面层
layer.open({
type: 1,
skin: 'layui-layer-rim', //加上边框
area: ['420px', '240px'], //宽高
content: 'html内容'
});
}

function func8() {
//自定页
layer.open({
type: 1,
skin: 'layui-layer-demo', //样式类名
closeBtn: 0, //不显示关闭按钮
shift: 2,
area: ['420px', '240px'], //宽高
shadeClose: true, //开启遮罩关闭
content: '内容'
});
}

function func9() {
//tips层
layer.tips('Hi，我是tips', $("#tips"));
}

function func10() {
//iframe层
layer.open({
type: 2,
title: 'layer mobile页',
shadeClose: true,
shade: 0.8,
area: ['380px', '90%'],
content: 'http://m.baidu.com' //iframe的url
});
}

function func11() {
//iframe窗
layer.open({
type: 2,
title: false,
closeBtn: 0, //不显示关闭按钮
shade: [0],
area: ['340px', '215px'],
offset: 'auto', //右下角弹出
time: 2000, //2秒后自动关闭
shift: 2,
content: ['test/guodu.html', 'no'], //iframe的url，no代表不显示滚动条
end: function(){ //此处用于演示
layer.open({
type: 2,
title: '百度一下，你就知道',
shadeClose: true,
shade: false,
maxmin: true, //开启最大化最小化按钮
area: ['1150px', '650px'],
content: 'http://www.baidu.com'
});
}
});
}

function func12() {
//加载层
var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
}

function func13() {
//loading层
var index = layer.load(1, {
shade: [0.1,'#fff'] //0.1透明度的白色背景
});
}

function func14() {
//小tips
layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', $('#tips2'), {
tips: [1, '#3595CC'],
time: 4000
});
}

function func15() {

//prompt层
layer.prompt({
title: '输入任何口令，并确认',
formType: 1 //prompt风格，支持0-2
}, function(pass){
layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text){
layer.msg('演示完毕！您的口令：'+ pass +' 您最后写下了：'+ text);
});
});
}

function func16() {
//tab层
layer.tab({
area: ['600px', '300px'],
tab: [{
title: 'TAB1',
content: '内容1'
}, {
title: 'TAB2',
content: '内容2'
}, {
title: 'TAB3',
content: '内容3'
}]
});
}

function openpage() {
layer.config({
extend: 'extend/layer.ext.js'
});
//页面一打开就执行，放入ready是为了layer所需配件（css、扩展模块）加载完毕
layer.ready(function() {
//官网欢迎页
layer.open({
type: 2,
skin: 'layui-layer-lan',
title: 'layer弹层组件',
fix: false,
shadeClose: true,
maxmin: true,
area: ['1000px', '500px'],
content: 'https://www.baidu.com'
});
layer.msg('欢迎使用layer');
});
}
</script>

<div class="layer_notice">hello,i'm layer!</div>
<button id="func1" οnclick="func1();">初体验</button>
<button id="func2" οnclick="func2();">皮肤</button>
<button id="func3" οnclick="func3();">询问框</button>
<button id="func4" οnclick="func4();">提示层</button>
<button id="func5" οnclick="func5();">蓝色风格</button>
<button id="func6" οnclick="func6();">捕捉页</button>
<button id="func7" οnclick="func7();">页面层</button>
<button id="func8" οnclick="func8();">自定义</button>
<button id="func9" οnclick="func9();">tips层</button>
<button id="func10" οnclick="func10();">iframe层</button>
<button id="func11" οnclick="func11();">iframe窗</button>
<button id="func12" οnclick="func12();">加载层</button>
<button id="func13" οnclick="func13();">loading层</button>
<button id="func14" οnclick="func14();">小tips</button>
<button id="func15" οnclick="func15();">prompt层</button>
<button id="func16" οnclick="func16();">tab层</button>
<button id="openpage" οnclick="openpage();">openpage</button>
<button id="tips">tips</button>
<button id="tips2">tips2</button>
</body>

</html>

<html>
<SCRIPT LANGUAGE="javascript">

</SCRIPT>
<b>www.wangye8.com</b>
</body>
</html>
<html>
<SCRIPT LANGUAGE="javascript">

</SCRIPT>
<b>http://www.wangye8.com</b>
</body>
</html>

showModalDialog()或是showModelessDialog() 来调用网页对话框，至于showModalDialog()与showModelessDialog()的区别，在于showModalDialog()打开的窗口（简称模式窗口），置在父窗口上，必须关闭才能访问父窗口(建议尽量少用，以免招人反感)；showModelessDialog()
dialogHeight: iHeight 设置对话框窗口的高度。
dialogWidth: iWidth 设置对话框窗口的宽度。
dialogLeft: iXPos 设置对话框窗口相对于桌面左上角的left位置。
dialogTop: iYPos 设置对话框窗口相对于桌面左上角的top位置。
center: {yes | no | 1 | 0 } 指定是否将对话框在桌面上居中，默认值是“yes”。
help: {yes | no | 1 | 0 } 指定对话框窗口中是否显示上下文敏感的帮助图标。默认值是“yes”。
resizable: {yes | no | 1 | 0 } 指定是否对话框窗口大小可变。默认值是“no”。
status: {yes | no | 1 | 0 } 指定对话框窗口是否显示状态栏。对于非模式对话框窗口，默认值是“yes”；对于模式对话框窗口，默认值是 “no”。

function isIE() { //ie?
if (!!window.ActiveXObject || "ActiveXObject" in window)
return true;
else
return false;
}

StarsRu丶星星茹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网站

在国内网站中，包括三大门户，以及“引领”中国网站设计潮流的蓝色理想，ChinaUI等都是使用了px作为字体单位。只有百度好歹做了个可调的表率。而在大洋彼岸，几乎所有的主流站点都使用em作为字体单位，也就是可调的。没错，px比em更加容易使用，大部分读者不知道em为何物或者它相当于多少 px。国外人士如此重视网站易用性(Accessibility)，不仅因为其根生蒂固的人文精神，直接原因可能是因
复制链接

扫一扫

网站

“相关推荐”对你有帮助么？