Zhiqim UI是一套集成Javascript库、Css库、Font库、常用ico图标等,并在其上开发的大量UI组件组成的前端开发套件。
tooltip.htm11KB
<#def title = "提示框"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = " 提示框是当鼠标移入或点击到重要的标志时,主动冒泡出一个浮动层,对该标志作解释的提示信息框。当前支持鼠标移入和点击两种事件,提示框在设计中有箭头、对齐方式、边框等属性。"/>
<#def prevUrl = "stepbar.htm"/>
<#def nextUrl = "dropdown.htm"/>
${zhiqim_com_header()}
${zhiqim_com_topnav()}
<script>
Z.onload(function()
{
Z(".example").each(function(elem)
{
Z(elem).next("td > pre").html(Z(elem).htmlt());
});
Z.Tooltip.load();
});
function doKeyup(elem, param)
{
if (elem.value < 5)
{
var tooltip = Z.Tooltip(elem, param);
tooltip.$content.css("overflow-y", "auto");
tooltip.$content.css("height", "50px");
}
else
{
Z.Tooltip.close(elem);
}
}
function doUpdateTooltipText()
{
Z("#t-updateTooltipText").find(".z-content").html("我被改成新的数据了");
}
</script>
<!--容器开始 -->
<div id="container" class="container">
<!--边导航-->
${zhiqim_com_ui("tutorial", "ui", "nav", "tooltip")}
<!--主体-->
<div id="mainbody" class="mainbody">
${zhiqim_com_breadcrumb("文库", "教程", "提示框")}
<div class="content">
<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
<p class="z-text-blue">提示框:</p>
<p class="z-color-333" style="text-indent:38px;">
提示框是当鼠标移入或点击到重要的标志时,主动冒泡出一个浮动层,对该标志作解释的提示信息框。当前支持鼠标移入和点击两种事件,提示框在设计中有箭头、对齐方式、边框等属性。
</p>
</div>
<#-- 一、鼠标移入事件 -->
<div class="tutorial title">一、鼠标移入事件,文本下方显示提示框</div>
<table class="z-table z-bordered z-pd10 z-bd-rd8">
<tr bgcolor="#f5f5f5">
<td width="15%">类型</td>
<td width="20%">效果预览</td>
<td width="*">代码</td>
</tr>
<tr>
<td>靠左对齐</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-options="align:left;top:10;width:200px;"
data-text="提示内容显示在文本下面,箭头左对齐,可以自定义选择背景或边框">移动鼠标到我上面</span>
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
<td>居中对齐</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-options="align:center;top:10;width:200px;"
data-text="提示内容显示在文本下面,箭头居中对齐,可以自定义选择背景或边框">移动鼠标到我上面</span>
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
<td>靠右对齐</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-options="align:right;top:10;width:200px;"
data-text="提示内容显示在文本下面,箭头右对齐,可以自定义选择背景或边框">移动鼠标到我上面</span>
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
</table>
<#-- 二、鼠标移入事件 -->
<div class="tutorial title">二、鼠标移入事件,文本上方显示提示框(边框红色)</div>
<table class="z-table z-bordered z-pd10 z-bd-rd8">
<tr bgcolor="#f5f5f5">
<td width="15%">类型</td>
<td width="20%">效果预览</td>
<td width="*">代码</td>
</tr>
<tr>
<td>靠左对齐</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-options="placement:top;align:left;top:10;border-color:#ff0000;width:200px;"
data-text="提示内容显示在文本下面,箭头左对齐,可以自定义选择背景或边框">移动鼠标到我上面</span>
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
<td>居中对齐</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-options="placement:top;align:center;top:10;border-color:#ff0000;width:200px;"
data-text="提示内容显示在文本下面,箭头居中对齐,可以自定义选择背景或边框">移动鼠标到我上面</span>
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
<td>靠右对齐</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-options="placement:top;align:right;top:10;border-color:#ff0000;width:200px;"
data-text="提示内容显示在文本下面,箭头右对齐,可以自定义选择背景或边框">移动鼠标到我上面</span>
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
</table>
<#-- 三、鼠标移入事件 -->
<div class="tutorial title">三、鼠标移入事件,文本右方显示提示框(无箭头,无边框,默认宽度)</div>
<table class="z-table z-bordered z-pd10 z-bd-rd8">
<tr>
<td class="text-cyan z-px16" colspan="3">文本右方显示提示框(无箭头,无边框,默认宽度)</td>
</tr>
<tr bgcolor="#f5f5f5">
<td width="15%">类型</td>
<td width="20%">效果预览</td>
<td width="*">代码</td>
</tr>
<tr>
<td>靠上对齐</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-options="placement:right;align:bottom;arrow:false;"
data-text="提示内容显示在文本下面,箭头右对齐,可以自定义选择背景或边框">移动鼠标到我上面</span>
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
<td>居中对齐</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-options="placement:right;align:center;arrow:false;"
data-text="提示内容显示在文本下面,箭头右对齐,可以自定义选择背景或边框">移动鼠标到我上面</span>
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
<td>靠下对齐</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-options="placement:right;align:top;arrow:false;"
data-text="提示内容显示在文本下面,箭头右对齐,可以自定义选择背景或边框">移动鼠标到我上面</span>
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
</table>
<#-- 四、鼠标移入事件 -->
<div class="tutorial title">四、鼠标移入事件,文本左方显示提示框(背景红色,字白色)</div>
<table class="z-table z-bordered z-pd10 z-bd-rd8">
<tr>
<td class="text-cyan z-px16" colspan="3">文本左方显示提示框(背景红色,字白色)</td>
</tr>
<tr bgcolor="#f5f5f5">
<td width="15%">类型</td>
<td width="20%">效果预览</td>
<td width="*">代码</td>
</tr>
<tr>
<td>靠上对齐</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-options="placement:left;align:top;top:10;color:#fff;border-color:#f00;background-color:#f00;width:200px;"
data-text="提示内容显示在文本下面,箭头左对齐,可以自定义选择背景或边框">移动鼠标到我上面</span>
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
<td>居中对齐</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-options="placement:left;align:center;top:10;color:#fff;border-color:#ff0000;background-color:#f00;width:200px;"
data-text="提示内容显示在文本下面,箭头居中对齐,可以自定义选择背景或边框">移动鼠标到我上面</span>
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
<td>靠下对齐</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-options="placement:left;align:right;top:10;color:#fff;border-color:#f00;background-color:#f00;width:200px;"
data-text="提示内容显示在文本下面,箭头右对齐,可以自定义选择背景或边框">移动鼠标到我上面</span>
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
</table>
<#-- 五、点击事件 -->
<div class="tutorial title">五、点击事件,文本下方显示提示框</div>
<table class="z-table z-bordered z-pd10 z-bd-rd8">
<tr bgcolor="#f5f5f5">
<td width="15%">类型</td>
<td width="20%">效果预览</td>
<td width="*">代码</td>
</tr>
<tr>
<td>靠左对齐</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-options="event:click;align:left;top:10;width:200px;"
data-text="提示内容显示在文本下面,箭头左对齐,可以自定义选择背景或边框">点击我打开,点其他地方关闭</span>
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
<td>居中对齐</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-options="event:click;align:center;top:10;width:200px;"
data-text="提示内容显示在文本下面,箭头居中对齐,可以自定义选择背景或边框">点击我打开,点其他地方关闭</span>
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
<td>靠右对齐</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-options="event:click;align:right;top:10;width:200px;"
data-text="提示内容显示在文本下面,箭头右对齐,可以自定义选择背景或边框">点击我打开,点其他地方关闭</span>
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
</table>
<#-- 六、点击事件 -->
<div class="tutorial title">六、点击事件,文本下方显示提示框</div>
<table class="z-table z-bordered z-pd10 z-bd-rd8">
<tr bgcolor="#f5f5f5">
<td width="15%">类型</td>
<td width="20%">效果预览</td>
<td width="*">代码</td>
</tr>
<tr>
<td>指定data-id修改:</td>
<td class="example"><span class="z-pointer" data-role="z-tooltip"
data-id="t-updateTooltipText"
data-options="event:click;align:left;top:10;width:200px;"
data-text="原本内容:提示内容显示在文本下面,有箭头,左对齐"
onclick="Z('#t-updateTooltipText').find('.z-content').html('改成新内容:提示内容显示在文本下面,有箭头,左对齐');" >点击我打开,点其他地方关闭</span>
<td><pre class="z-text-preline"></pre></td>
</tr>
</table>
<#-- 七、输入控制事件 -->
<div class="tutorial title">七、输入控制事件</div>
<table class="z-table z-bordered z-pd10 z-bd-rd8">
<tr bgcolor="#f5f5f5">
<td width="15%">类型</td>
<td width="25%">效果预览</td>
<td width="*">代码</td>
</tr>
<tr>
<td>靠左对齐</td>
<td class="example"><input data-options="type:Integer;paste:true;" class="z-input z-blue z-w50 z-h30"
onkeyup="doKeyup(this, {event:'show', top:10, width:50, height:20, align:'left', text:'当前值低于5当前值低于5当前值低于5当前值低于5当前值低于5当前值低于5当前值低于5当前值低于5'});">
小于5提示,>=5关闭
<td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
<td>居中对齐</td>
<td class="example"><input data-options="type:Integer;paste:true;" class="z-input z-blue z-w50 z-h30"
onkeyup="doKeyup(this, {event:'show', top:10, width:200, height:10, align:'center', borderColor:'#ff0000', text:'当前值低于5'});">
小于5提示,>=5关闭
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
<td>靠右对齐</td>
<td class="example"><input data-options="type:Integer;paste:true;" class="z-input z-blue z-w50 z-h30"
onkeyup="doKeyup(this, {event:'show', top:10, width:200, height:10, align:'right', color: '#fff', borderColor:'#f00', backgroundColor:'#f00', text:'当前值低于5'});">
小于5提示,>=5关闭
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
</table>
${zhiqim_com_chapter()}
</div>
<!-- 主体结束 -->
</div>
<!-- 容器结束 -->
</div>
${zhiqim_com_footer()}