博客

EasyUI jQuery标签小工具

  • Post category:jquery

EasyUI jQuery标签小工具

简介

EasyUI jQuery标签小工具是一款基于jQuery和EasyUI框架的标签工具，支持自定义颜色、尺寸等属性。

使用方法

加载资源

在使用之前，需要先加载jQuery和EasyUI框架及相关样式和脚本文件。

<head>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.0/themes/bootstrap/easyui.css">
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.0/themes/icon.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.10.0/jquery.easyui.min.js"></script>
</head>

HTML结构

在HTML中定义标签的结构，需要一个div标签和span标签，其中span标签用来显示标签上的文字，div标签用来包含整个标签。

<div id="tag"></div>

<script>
$('#tag').append('<span>标签文字</span>');
</script>

设置属性

设置标签的颜色、尺寸等属性。

<script>
$('#tag').css({
  'background-color': '#f5f5f5',
  'border-radius': '4px',
  'color': '#555',
  'display': 'inline-block',
  'font-size': '14px',
  'line-height': '20px',
  'margin': '0 10px 10px 0',
  'padding': '3px 7px'
});
</script>

示例说明1

下面演示如何创建一个带关闭按钮的标签：

<div id="tag"></div>

<script>
$('#tag').css({
  'background-color': '#ceecf5',
  'border-radius': '4px',
  'color': '#2e4453',
  'display': 'inline-block',
  'font-size': '14px',
  'line-height': '20px',
  'margin': '0 10px 10px 0',
  'padding': '3px 7px'
}).append('<span>标签文字</span>').append('<a href="#" class="tag-close"></a>');
$('.tag-close').click(function(){
  $('#tag').remove();
});
</script>

示例说明2

下面演示如何创建一个带图标的标签：

<div id="tag"></div>

<script>
$('#tag').css({
  'background-color': '#f5f5f5',
  'border-radius': '4px',
  'color': '#555',
  'display': 'inline-block',
  'font-size': '14px',
  'line-height': '20px',
  'margin': '0 10px 10px 0',
  'padding': '3px 7px'
}).append('<span>标签文字</span>').prepend('<i class="icon-tag"></i>');
</script>

总结

EasyUI jQuery标签小工具是一款轻量级的标签工具，具有高度可定制的特性，可以很方便地嵌入到任何网页中。只需通过设置一些简单的属性，就可以轻松地实现多样化的标签样式。

Tags: