easyUI入门《十一、linkbutton基础：按钮》

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Insert title here</title><!--引入基本库--><script type="text/javascript" src="jquery-easyui-1.5.5.4/jquery.min.js"></script><script type="text/javascript" src="jquery-easyui-1.5.5.4/jquery.easyui.min.js"></script><script type="text/javascript" src="jquery-easyui-1.5.5.4/locale/easyui-lang-zh_CN.js"></script><link rel="stylesheet" href="jquery-easyui-1.5.5.4/themes/default/easyui.css" /><link rel="stylesheet" href="jquery-easyui-1.5.5.4/themes/icon.css" /></head><body><!--按钮跳转href：href="remote.html"按钮默认选中：selected:true按钮选中与不选择切换：toggle:true按钮图标位置：iconAlign:'right'按钮简单形式：plain:true按钮多选一：group:'g1',toggle:true--><div>基础菜单</div><a href="tree.html" class="easyui-linkbutton">text</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',selected:true">icon</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-clipart',iconAlign:'left'">icon</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-clipart',iconAlign:'left',size:'large'">icon</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-clipart',iconAlign:'top',toggle:true">icon</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-clipart',iconAlign:'top',toggle:true,plain:true">icon</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',group:'g1',toggle:true">icon1</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',group:'g1',toggle:true">icon2</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',group:'g1',toggle:true">icon3</a><!--菜单弹出对齐方式：menuAlign:'right'按钮什么情况弹出菜单：easyui-splitbuttoneasyui-menubutton--><br /><br /><div>菜单按钮</div><a href="tree.html" class="easyui-menubutton" data-options="iconCls:'icon-add',menu:'#mm1'">Add</a><a href="tree.html" class="easyui-menubutton" data-options="iconCls:'icon-help',menu:'#mm2',menuAlign:'left'">Help</a><a href="tree.html" class="easyui-splitbutton" data-options="iconCls:'icon-help',menu:'#mm3',menuAlign:'right'">Help2</a><div id="mm1" class="easyui-menu" style="width: 120px;"><div>New</div><div>Save</div><div>Exit</div></div><div id="mm2" class="easyui-menu" style="width: 120px;"><div data-options="iconCls:'icon-add',name:'new'">New</div><div data-options="iconCls:'icon-save',name:'save'">Saveqqqqqqqqqq</div><div data-options="name:'exit'">Exit</div></div><div id="mm3" class="easyui-menu" style="width: 120px;"><div data-options="iconCls:'icon-add',name:'new'">New</div><div data-options="iconCls:'icon-save',name:'save'">Saveqqqqqqqqqq</div><div data-options="name:'exit'">Exit</div></div><br /><br /><div>选项卡嵌套按钮</div><div style="margin:20px 0;"></div><div id="tt" style="width:700px;height:250px"><div title="About" style="padding:10px"></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" style="padding:10px">This is the help content.</div></div><div id="mm"><div>Welcome</div><div>Help Contents</div><div data-options="iconCls:'icon-search'">Search</div><div>Dynamic Help</div></div><script>$(function() {var p = $('#tt').tabs().tabs('tabs')[2];var mb = p.panel('options').tab.find('a.tabs-inner');mb.menubutton({menu: '#mm',iconCls: 'icon-help'}).click(function() {$('#tt').tabs('select', 2);});});</script><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><p>基础弹框</p><a href="#" class="easyui-linkbutton" onclick="show()">Show</a><script type="text/javascript">function show() {$.messager.show({title: 'My title',msg: 'this is message',showType: 'show'})}</script><a href="#" class="easyui-linkbutton" onclick="slide()">Slide</a><script type="text/javascript">function slide() {$.messager.show({title: 'My title',msg: 'this is message',showType: 'slide',timeout: 5000})}</script><a href="#" class="easyui-linkbutton" onclick="fade()">fade</a><script type="text/javascript">function fade() {$.messager.show({title: 'My title',msg: 'this is message',showType: 'fade'})}</script><a href="#" class="easyui-linkbutton" onclick="progress()">progress</a><script type="text/javascript">function progress() {$.messager.progress({title: 'progress哈哈哈',msg: 'loading...哈哈哈',});setTimeout(function() {$.messager.progress("close")}, 3000)}</script><p>位置弹框</p><p><a href="#" class="easyui-linkbutton" onclick="topLeft()">topLeft</a></p><script type="text/javascript">function topLeft(){$.messager.show({title:'My title',msg:'this is message',showType:'show',style:{right:"",left:0,top:document.body.scrollTop+document.documentElement.scrollTop,bottom:""}})}</script><p><a href="#" class="easyui-linkbutton" onclick="topCenter()">topCenter</a></p><script type="text/javascript">function topCenter(){$.messager.show({title:'My title',msg:'this is message',showType:'show',style:{right:"",//left:0,top:document.body.scrollTop+document.documentElement.scrollTop,bottom:""}})}</script><p><a href="#" class="easyui-linkbutton" onclick="topRight()">topRight</a></p><script type="text/javascript">function topRight(){$.messager.show({title:'My title',msg:'this is message',showType:'show',style:{right:0,left:'',top:document.body.scrollTop+document.documentElement.scrollTop,bottom:""}})}</script><p><a href="#" class="easyui-linkbutton" onclick="centerLeft()">centerLeft</a></p><script type="text/javascript">function centerLeft(){$.messager.show({title:'My title',msg:'this is message',showType:'show',style:{right:"",left:0,//top:document.body.scrollTop+document.documentElement.scrollTop,//bottom:""}})}</script><p><a href="#" class="easyui-linkbutton" onclick="centerRight()">centerRight</a></p><script type="text/javascript">function centerRight(){$.messager.show({title:'My title',msg:'this is message',showType:'show',style:{right:0,left:"",
//                      top:document.body.scrollTop+document.documentElement.scrollTop,
//                      bottom:""}})}</script><p><a href="#" class="easyui-linkbutton" onclick="center()">center</a></p><script type="text/javascript">function center(){$.messager.show({title:'My title',msg:'this is message',showType:'show',style:{
//                      right:0,
//                      left:'',
//                      top:document.body.scrollTop+document.documentElement.scrollTop,
//                      bottom:""}})}</script><p><a href="#" class="easyui-linkbutton" onclick="bottomLeft()">bottomLeft</a></p><script type="text/javascript">function bottomLeft(){$.messager.show({title:'My title',msg:'this is message',showType:'show',style:{right:"",left:0,top:"",bottom:document.body.scrollTop-document.documentElement.scrollTop}})}</script><p><a href="#" class="easyui-linkbutton" onclick="bottomRight()">bottomRight</a></p><script type="text/javascript">function bottomRight(){$.messager.show({title:'My title',msg:'this is message',showType:'show'})}</script><p><a href="#" class="easyui-linkbutton" onclick="bottomCenter()">bottomCenter</a></p><script type="text/javascript">function bottomCenter(){$.messager.show({title:'My title',msg:'this is message',showType:'show',style:{
//                      right:"",
//                      left:"",top:"",bottom:document.body.scrollTop-document.documentElement.scrollTop}})}</script><br /><br /><br /><br /><br /><br /><br /><br /><!--alertconfirmprompt--><p>交互联系框</p><p>注意函数名，不要调用了系统的函数</p><a class="easyui-linkbutton" onclick="myalert()">alert</a><a class="easyui-linkbutton" onclick="myconfirm()">myconfirm</a><a class="easyui-linkbutton" onclick="myprompt()">myprompt</a><script type="text/javascript">function myalert(){
//              $.messager.alert("title","context","info");
//              $.messager.alert("title","context","error");
//              $.messager.alert("title","context","question");$.messager.alert("title","context","warning");}function myconfirm(){$.messager.confirm("title","context",function(r){alert(r)});}function myprompt(){$.messager.prompt("title","context",function(r){if (r){alert('you type: '+r);}});}</script></body></html>

easyUI入门《十一、linkbutton基础：按钮》相关推荐

EasyUI入门（LinkButton，Tabs）
今天在来按照文档上的Demo写一下效果. 一.LinkButton(按钮) 按钮组件使用超链接按钮创建.它使用一个普通的<a>标签进行展示.它可以同时显示一个图标和文本,或只有图标或文字. ...
easyUI之LinkButton（按钮）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head ...
EasyUI Linkbutton 链接按钮
通过 $.fn.linkbutton.defaults 重写默认的 defaults. 链接按钮(linkbutton)用于创建一个超链接按钮.它是一个正常的 <a> 标记的表示.它可显示 ...
Easyui入门视频教程第11集---Window的使用
目录 Easyui入门视频教程第11集---Window的使用 Easyui入门视频教程第10集---Messager的使用 Easyui入门视频教程第09集---登录完善图标自定义 ...
html隐藏最大化按钮,easyui div 上下布局最大化按钮隐藏标题
背景:easyui在做上下布局的时候,上面是数据列表,下面是数据图表.如下图需要在上下面板右上角加上最大化按钮,以便可以全屏显示.逻辑就是当上面点击最大化时候,隐藏下面,主意:此时需要将下面的div ...
Easyui入门视频教程第01集---认识Easyui
认识EasyUI 目录 ----------------------- Easyui入门视频教程第09集---登录完善图标自定义 Easyui入门视频教程第08集---登录实现 ajax b ...
EasyUI入门教程整理与示例代码下载
场景 EasyUI环境搭建与入门基础语法 https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/90760947 EasyUI中拖动dra ...
[Python从零到壹] 四十一.图像处理基础篇之图像采样处理
欢迎大家来到"Python从零到壹",在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界.所有文章都将结合案例.代码和作者的经验讲 ...
JQuery EasyUI入门
JQuery EasyUI入门 @(JavaScript)[jQuery, EasyUI, 入门] JQuery EasyUI入门基本概述案例 Layout布局 Accordion手风琴 Tab选 ...
Membership三步曲之入门篇 - Membership基础示例
Membership 三步曲之入门篇 - Membership基础示例 Membership三步曲之入门篇 - Membership基础示例 Membership三步曲之进阶篇 - 深入剖析Pro ...

easyUI入门《十一、linkbutton基础：按钮》

easyUI入门《十一、linkbutton基础：按钮》相关推荐

最新文章

热门文章