2012-07-18

推荐大家一款jQuery插件jQuery UI

这款插件是基于jQuery运行的，所以语法跟jQuery类似，这款插件集合了多种功能，如浮窗，日期选择等等，自己可以到官网看看都有哪些功能。

下载地址

【国内直连ChatGPT 29元起】
国内直连ChatGPT，Plus会员每月29元起，支持最新o1模型探索更多领域，无需注册OpenAI账号。

http://jqueryui.com/download/jquery-ui-1.8.21.custom.zip

下载后得到以下文件夹

full

我们需要js与css文件夹里的内容，把它拷贝到桌面jquery ui文件夹内，并新建一个demo.html

full

demo.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jQuery UI 实例 - 琼台博客 www.qttc.net</title>
    <link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
    <script type="text/javascript">   
    $(document).ready(function(){
      // 弹窗
      $('button').click(function(){$('#dialog').dialog()});
      
      // 日期输入框
      $('#date').datepicker();

      // 标签卡
      $('#tab').tabs();
    });
    </script>
  </head>
  <body>
    <div id="dialog" style="display:none">这里是弹窗的内容</div>        
    <p><button>点这里弹窗</button></p>
    <p>点这里输入日期<input type="text" id="date" /></p>
    <p>
    <div id="tab">
      <ul>
        <li><a href="#tab-1">标签一</a></li>
        <li><a href="#tab-2">标签二</a></li>
        <li><a href="#tab-3">标签三</a></li>
      </ul>
      <div id="tab-1">这里是标签一的内容</div>
      <div id="tab-2">这里是标签二的内容</div>
      <div id="tab-3">这里是标签三的内容</div>
    </div>
    </p>
    <p><a href="https://www.qttc.net">琼台博客</a></p>
  </body>
</html>

以上DEMO实现了弹窗，日期输入，标签切换功能, 运行效果图

full

推荐大家一款jQuery插件jQuery UI

推荐文章