DNN交互设计-提示Tooltips(九)
2013-11-27 19:17
387 查看
界面模式及使用
上图中展示了DNN的提示UI,通常提示信息的图标被放在一个标题以及输入框之间。它的作用就是为所编辑的字段除了标题之外提供更多的信息。这种界面形式可以在客户需要时再显示帮助信息同时不会扰乱表单的布局。当鼠标移到蓝色图标时帮助信息就是以动态弹出div的方式出现。当提示内容显示出来后你还可以将帮助信息锁定在界面上,当然你也可以移动它。
HTML
<div class="dnnForm"> <div class="dnnFormItem"> <dnn:Label runat="server" ControlName="NameTextBox" Text="This is a label for a tooltip example" HelpText="Use this area to provide short, descriptive and helpful information for users" /> </div> </div> <!-- ===================== You can also use the following markup for a standalone tooltip =======================--> <div class="dnnTooltip"> <label id="label" runat="server"> <asp:LinkButton ID="cmdHelp" TabIndex="-1" runat="server" CausesValidation="False" EnableViewState="False" CssClass="dnnFormHelp"> <asp:Label ID="lblLabel" runat="server" EnableViewState="False" /> </asp:LinkButton> <asp:Label ID="lblNoHelpLabel" runat="server" EnableViewState="False" Visible="false" /> </label> <asp:Panel ID="pnlHelp" runat="server" CssClass="dnnFormHelpContent dnnClear" EnableViewState="False" style="display:none;"> <asp:Label ID="lblHelp" runat="server" EnableViewState="False" class="dnnHelpText" /> <a href="#" class="pinHelp"></a> </asp:Panel> </div>
CSS
.dnnFormItem label, .dnnFormItem .dnnFormLabel, .dnnFormItem .dnnTooltip { display: block; width: 30%; text-align: right; margin-right: 16px; font-weight: bold; float: left; margin-top: 3px; } .dnnFormItem .dnnTooltip label { width: 100%; padding: 0; margin: 0; }
jQuery
$('.dnnTooltip').dnnTooltip();
相关文章推荐
- DHTML CSS+JavaScript设计网页链接提示ToolTips
- DNN交互设计-Tabs(三)
- 网站登录框的交互设计和报错提示
- DNN交互设计-确认对话框dnnConfirm(八)
- DNN交互设计-Panels可收缩界面(四)
- DNN交互设计-模块消息 (十)
- DNN交互设计-输入文本项(五)
- DNN交互设计-网格视图dnnGrid(十一)
- DNN交互设计-日期选择控件(六)
- DNN交互设计-警告对话框dnnAlert(七)
- DNN交互设计-介绍(一)
- DNN交互设计-基础设置(二)
- DNN交互设计-按钮(十二)
- DNN交互设计-综合使用界面模式
- DNN交互设计-CSS基础
- 交互设计七大定律
- 交互设计用户体验示意图[转]
- 从交互设计角度,聊聊WEB网站和移动APP的六大差异
- 手机社交游戏设计中交互理念的渗透
- 交互shell设置为/dev/console之后提示job control turned off(上)