jQuery UI的初学示例教程
jQuery
Mike_Dalisay
Software Developer
1人收藏 2805次学习

jQuery UI的初学示例教程

 开始使用jQuery UI?你来对地方了!该教程将一步一步教导你如何使用jQuery UI。你可能知道jQuery是什么,想进一步了解jQuery UI,这真棒!

   jQuery用户界面使我们的应用程序能更快地拥有一个酷炫的用户界面(甚至动画)。你不必强迫自己在CSS上花大量的时间,只是为你的网络应用程序制作一个体面的用户界面。这很有趣,也很时尚,它可以让我们选择不同的可用主题,你甚至可以创建自己的主题!但 是,这篇文章只包含了在你的网页浏览器上运行非常简单的jQuery UI脚本的方法。

1.运行jQuery UI的6个简单步骤

1.运行jQuery UI的6个简单步骤

下面的步骤将在jQuery UI中做出很棒的日期选择器。让我们来写代码!

第1步:准备好你的HTML文件,只需它的基本结构。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
         
    </head>
<body>
 
</body>
</html>

第2步:在标签内添加一个文本框。用户随后将能够点击并显示一个jQuery UI日历选择器。

<input type="text" id="myDatepicker" placeholder="Click to pick date" />

第3步:在结束标签之前添加jQuery库。这是因为jQuery UI是基于jQuery库之上的。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

第4步:在步骤3的代码下添加jQuery UI库。这实际上是使jQuery UI在你的页面起作用的第一步。

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

第5步:通过CSS的外部链接添加jQuery UI的主题,把它放入标签内,在标签之后。这CSS将使我们的UI更时尚。

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" />

步骤6:启用在步骤1中生成的jQuery UI的日期选择期,在步骤5的代码下,增加下列代码,这是如何在一个简单的文本框中添加jQuery UI日期选择器的步骤。

<script>
$( "#myDatepicker" ).datepicker();
</script>

小提示:一定要使用精缩版。例如,使用jquery-ui.min.css,而不是仅仅使用jQuery ui.css

继续阅读,你会看到上述步骤的完整代码。

2. jQuery UI的示例代码和在线演示

在演示页面,你必须点击“选择日期”的文本框,来看jQuery UI不同主题的行动。

顺便说一句,2.1和2.2中的示例使用了谷歌的内容交付网络来运行jQuery用户界面,这意味着你将不必下载jQuery和jQuery UI库,你仅需要包含它。

2.1 jQuery UI的Smoothness主题承载在谷歌CDN内

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Tutorial for Beginners - smoothness theme - by codeofaninja.com</title>
         
        <!-- step 4 - include you jquery ui theme -->
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" />
         
    </head>
<body>
 
<!-- step 1 -->
<input type="text" id="myDatepicker" placeholder="Click to pick date" />
 
<!-- step 2 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 
<!-- step 3 -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
 
<script>
/* step 5 */
$( "#myDatepicker" ).datepicker();
</script>
 
</body>
</html>

2.2 jQuery UI的Vader主题也承载在谷歌内

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Tutorial for Beginners - vader theme - by codeofaninja.com</title>
         
        <!-- step 4 - include you jquery ui theme -->
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/vader/jquery-ui.min.css" />
         
    </head>
<body>
 
<!-- step 1 -->
<input type="text" id="myDatepicker" placeholder="Click to pick date" />
 
<!-- step 2 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 
<!-- step 3 -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
 
<script>
/* step 5 */
$( "#myDatepicker" ).datepicker();
</script>
 
</body>
</html>

2.3如果我不想要CDN怎么办?我想拥有我自己的jQuery UI库?没问题,你可以随时到jQuery UI的下载生成器,你可以使用页面下部的下拉来选择你喜欢的主题。

在下面的示例代码中,jQuery UI的库是自托管。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Tutorial for Beginners - vader theme - by codeofaninja.com</title>
         
        <!-- step 4 - include you jquery ui theme -->
        <link rel="stylesheet" href="jquery-ui-1.10.3.custom/css/le-frog/jquery-ui-1.10.3.custom.min.css" />
         
    </head>
<body>
 
<!-- step 1 -->
<input type="text" id="myDatepicker" placeholder="Click to pick date" />
 
<!-- step 2 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 
<!-- step 3 -->
<script src="jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
 
<script>
/* step 5 */
$( "#myDatepicker" ).datepicker();
</script>
 
</body>
</html>

 

3.参考

想看更多的 jQuery UI演示?你可以经常访问jQuery UI官方演示:jQuery UI LIVE DEMOS

加入1KE学习俱乐部

1KE学习俱乐部是只针对1KE学员开放的私人俱乐部
标签:
UI jQuery