jQuery UI使用

「已注销」

于 2013-03-11 20:07:37 发布

阅读量2.3k

点赞数

本文链接：https://blog.csdn.net/lidatgb/article/details/8545861

版权

接触jQuery UI，是因为当初想给页面加一个日期控件，可以点击获取日期，本想着使用ASP.NET自带的Calendar控件，但是使用比较复杂：页面加载时控件隐藏，文本框获取焦点时，控件显示，点击日期控件的日期时，获取日期再赋值给文本框。我只想获得一个日期，要不要这么艰难？

终于，找到了jQuery UI，实际上就是使用javascript封装好的控件或是效果代替ASP.NET自带的。下面来介绍一下使用到的jQuery UI控件及使用方法。

使用方法

引用jquery.js
引用jquery-ui.js
应用jquery.css
给控件添加指定属性

jQuery UI控件

DatePicker

使用方法

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker" /></p>
 
 
</body>
</html>

效果：点击文本框自动出现日期控件，选择日期自动填充到文本框中。

datapicker控件和Calendar控件：

ToolTip

使用方法类似，能产生更柔和的效果(第一个为jquery ui tooltip，第二个为asp.net tooltip)，如图：

使用方法：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="新文件夹1/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="新文件夹1/jquery1.9.0.js" type="text/javascript"></script>
    <script src="新文件夹1/jquery-ui.js" type="text/javascript"></script>
    <script type="text/javascript">
          $(function () {
              $(document).tooltip();
          });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server" title="I'm a textbox"></asp:TextBox>
    </div>
    </form>
</body>
</html>

其它jQuery UI使用方法类似，且效果更炫，参见http://jqueryui.com/。

用户往往只关心他所见到的界面，同时也很大程度上减少了程序员的代码量，最重要的是不用再考虑浏览器的兼容问题，所以，开始使用jQuery UI吧。

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
12
评论
jQuery UI使用

接触jQuery UI，是因为当初想给页面加一个日期控件，可以点击获取日期，本想着使用ASP.NET自带的Calendar控件，但是使用比较复杂：页面加载时控件隐藏，文本框获取焦点时，控件显示，点击日期控件的日期时，获取日期再赋值给文本框。我只想获得一个日期，要不要这么艰难？终于，找到了jQuery UI，实际上就是使用javascript封装好的控件或是效果代替ASP.NET
复制链接

扫一扫