JQuery EasyUI(7)

最新推荐文章于 2025-08-11 13:57:57 发布

翻译最新推荐文章于 2025-08-11 13:57:57 发布 · 194 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://study.163.com/course/courseMain.htm?courseId=943002

WEB - jQuery EasyUI 专栏收录该内容

55 篇文章

订阅专栏

本文详细介绍了EasyUI框架中的LinkButton组件，包括其加载方式、属性列表和方法列表。通过实例展示了如何使用LinkButton创建按钮，并配置其外观、状态和行为。适合初学者快速上手。

第七章：LinkButton（按钮）组件

学习要点：

加载方式
属性列表
方法列表

一、加载方式：

1.class加载方式：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body style="margin:100px;">
      <!--
      <a href="###" class="easyui-linkbutton">按钮</a> 
      -->
      
      <a href="###" id="#box">按钮</a>
       
  </body>
</html>

2.JS调用：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body style="margin:100px;">
      <!--
      <a href="###" class="easyui-linkbutton">按钮</a> 
      -->
      
      <a href="###" id="#box">按钮</a>
       
  </body>
</html>

$(function(){

  $('#box').linkbutton({

});

二、属性列表：

linkButton属性
属性名	值	说明
id	string	组件的ID属性。默认为null
disabled	boolean	设置true则禁止按钮。默认为false
toggle	boolean	设置true则允许用户切换其状态是否被选中，可实现checkbox复选效果。默认为false
selected	boolean	定义按钮初始的选择状态，true是别选中，false为未选中，默认为false。
group	string	指定相同组名的按钮同属于一个组，可实现radio单选效果，默认为null。
plain	boolean	设置true时显示简洁效果，默认为false。
text	string	按钮文字。默认为空字符串。
iconCls	string	显示在按钮文字左侧的图标（16*16）的css类ID。默认为null
iconAlign	string	按钮图标位置，默认为left，还有right。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body style="margin:100px;">
      <!--
      <a href="###" class="easyui-linkbutton">按钮</a> 
      -->
      
      <a href="###" id="#box">按钮</a>
      <a href="###" id="#pox">按钮</a>
       
  </body>
</html>

$(function(){

  $('#box').linkbutton({
      id:'pox',
      disable:true,
      toggle:true,
      selected:true,
      group:'sex',
      plain:true,
      text:'文字',
      iconCls:'icon-add',
   });

  $('#pox').linkbutton({
      id:'pox',
      disable:true,
      toggle:true,
      group:'sex',
      iconCls:'icon-mini-add',
      iconAlign:'right',
   });

});

三、方法列表：

linkButton方法
方法名	传参	说明
options	none	返回属性对象
disable	none	禁止按钮
enable	none	启用按钮
select	none	选择按钮
unselect	none	取消选择按钮

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body style="margin:100px;">
      <!--
      <a href="###" class="easyui-linkbutton">按钮</a> 
      -->
      
      <a href="###" id="#box">按钮</a>
      <a href="###" id="#pox">按钮</a>
       
  </body>
</html>

$(function(){

  $.fn.linkbutton.defaultes.iconCls = 'icon-add';

  $('#box').linkbutton({
      //id:'pox',
      //disable:true,
      //toggle:true,
      //selected:true,
      //group:'sex',
      //plain:true,
      text:'文字',
      //iconCls:'icon-add',
      //iconAlign:'right',
   });

  $('#pox').linkbutton({
      //id:'pox',
      //disable:true,
      //toggle:true,
      //group:'sex',
      //iconCls:'icon-mini-add',
   });

   //console.log($('#box').linkbutton('options'));

   $('#box').linkbutton('disable');
   $('#box').linkbutton('enable');

   $('#box').linkbutton('select');
   $('#box').linkbutton('unselect');
});

PS：我们可以使用$.fn.linkbutton.defaultes重写默认值对象。

作者：Roger_CoderLife

链接：https://blog.youkuaiyun.com/Roger_CoderLife/article/details/102838525

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载！