Facebook Twitter LinkedIn E-mail
magnify
Home 2013 四月

jQuery 入门教程:总结

前面介绍了jQuery ,jQuery UI的基本用发,详细的教程可以访问http://jquery.com/http://jqueryui.com/,为便与查询,给出本教程的链接。

  1. jQuery 入门教程(1): 概述
  2. jQuery 入门教程(2): 基本语法
  3. jQuery 入门教程(3): Selectors
  4. jQuery 入门教程(4): Events
  5. jQuery 入门教程(5): 显示/隐藏内容
  6. jQuery 入门教程(6): 淡入淡出效果
  7. jQuery 入门教程(7): 滑动效果
  8. jQuery 入门教程(8): 动画效果
  9. jQuery 入门教程(9):终止动画
  10. jQuery 入门教程(10): 回调函数
  11. jQuery 入门教程(11): 方法链
  12. jQuery 入门教程(12): HTML Get
  13. jQuery 入门教程(13): HTML Set
  14. jQuery 入门教程(14): 添加HTML元素
  15. jQuery 入门教程(15): 删除HTML元素
  16. jQuery 入门教程(16): 设置或取得元素的CSS class
  17. jQuery 入门教程(17): 读写HTML元素的css 属性
  18. jQuery 入门教程(18): 操作HTML元素的大小
  19. jQuery 入门教程(19): jQuery UI 概述
  20. jQuery 入门教程(20): jQuery UI 基本工作过程
  21. jQuery 入门教程(21): jQuery UI 示例
  22. jQuery 入门教程(22): jQuery UI Accordion示例
  23. jQuery 入门教程(23): jQuery UI Autocomplete示例(一)
  24. jQuery 入门教程(24): jQuery UI Autocomplete示例(二)
  25. jQuery 入门教程(25): jQuery UI Autocomplete示例(三)
  26. jQuery 入门教程(26): jQuery UI Button示例(一)
  27. jQuery 入门教程(27): jQuery UI Button示例(二)
  28. jQuery 入门教程(28): jQuery UI Datepicker 示例(一)
  29. jQuery 入门教程(29): jQuery UI Datepicker 示例(二)
  30. jQuery 入门教程(30): jQuery UI Datepicker 示例(三)
  31. jQuery 入门教程(31): jQuery UI Datepicker 示例(四)
  32. jQuery 入门教程(32): jQuery UI Datepicker 示例(五)
  33. jQuery 入门教程(33): jQuery UI Dialog 示例(一)
  34. jQuery 入门教程(34): jQuery UI Dialog 示例(二)
  35. jQuery 入门教程(35): jQuery UI Dialog 示例(三)
  36. jQuery 入门教程(36): jQuery UI Menu 示例
  37. jQuery 入门教程(37): jQuery UI Progressbar 示例
  38. jQuery 入门教程(38): jQuery UI Slider 示例(一)
  39. jQuery 入门教程(39): jQuery UI Slider 示例(二)
  40. jQuery 入门教程(40): jQuery UI Spiner 示例
  41. jQuery 入门教程(41): jQuery UI Tab 示例(一)
  42. jQuery 入门教程(42): jQuery UI Tab 示例(二)
  43. jQuery 入门教程(43): jQuery UI Tooltip 示例
 

jQuery 入门教程(43): jQuery UI Tooltip 示例

JQuery tooltip 的基本用法,可以把所有元素的的 title 属性做为Toolbar显示,比如:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Demos</title>
    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
    <script src="scripts/jquery-1.9.1.js"></script>
    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
    <script>
        $(function () {
            $(document).tooltip();
        });
  </script>
  <style>
  label {
    display: inline-block;
    width: 5em;
  }
  </style>
</head>
<body>
 
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
<p>Hover the field to see the tooltip.</p>
 
 
</body>
</html>

20130426001

此外,可以通过CSS修改缺省Tooltip的显示风格,或是自定义Tooltip 显示内容(比如地图,图像等等),这里就不一一介绍了。

 

jQuery 入门教程(42): jQuery UI Tab 示例(二)

支持收缩和展开
缺省情况下,标签页是展开的,可以通过设置collapsible为true使得标签页支持收缩和展开。

<script>
	$(function () {
		$("#tabs").tabs({
			collapsible: true
		});
	});
</script>

20130424001

Ajax支持
jQuery 的标签页也支持通过Ajax方法来加载页面,这是通过设置href属性来实现,href指向其它页面,这是jQuery通过Ajax方法读取指定页面,如果加载时间过长,则页面显示Loading(加载中),如果无法加载,也可以通过配置beforeLoad 设置错误信息。

<script>
  $(function() {
    $( "#tabs" ).tabs({
      beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
          ui.panel.html(
            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
            "If this wouldn't be a demo." );
        });
      }
    });
  });
  </script>
</head>
<body>
 
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Preloaded</a></li>
    <li><a href="ajax/content1.html">Tab 1</a></li>
    <li><a href="ajax/content2.html">Tab 2</a></li>
    <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
    <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commod</p>
  </div>
</div>

鼠标移动自动激活页面
可以通过设置 event:mouseover 来实现,这样当鼠标移动到某个页面,该页面则自动展开。

<script>
  $(function() {
    $( "#tabs" ).tabs({
      event: "mouseover"
    });
  });
</script>

在底部和左边显示标签头

通过CSS和一些JavaScript可以把标签页的标题显示在底部或是左边

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Demos</title>
    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
    <script src="scripts/jquery-1.9.1.js"></script>
    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
    <script>
        $(function () {
            $("#tabs").tabs();

            // fix the classes
            $(".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *")
              .removeClass("ui-corner-all ui-corner-top")
              .addClass("ui-corner-bottom");

            // move the nav to the bottom
            $(".tabs-bottom .ui-tabs-nav").appendTo(".tabs-bottom");
        });
    </script>
    <style>
        /* force a height so the tabs don't jump as content height changes */
        #tabs .tabs-spacer {
            float: left;
            height: 200px;
        }

        .tabs-bottom .ui-tabs-nav {
            clear: left;
            padding: 0 .2em .2em .2em;
        }

            .tabs-bottom .ui-tabs-nav li {
                top: auto;
                bottom: 0;
                margin: 0 .2em 1px 0;
                border-bottom: auto;
                border-top: 0;
            }

                .tabs-bottom .ui-tabs-nav li.ui-tabs-active {
                    margin-top: -1px;
                    padding-top: 1px;
                }
    </style>
</head>
<body>

    <div id="tabs" class="tabs-bottom">
        <ul>
            <li><a href="#tabs-1">Nunc tincidunt</a></li>
            <li><a href="#tabs-2">Proin dolor</a></li>
            <li><a href="#tabs-3">Aenean lacinia</a></li>
        </ul>
        <div id="tabs-1">
            <p>Proin elit arcu, rutrum commodo, vehicula tempus, </p>
        </div>
        <div id="tabs-2">
            <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, </p>
        </div>
        <div id="tabs-3">
            <p>Mauris eleifend est et turpis. Duis id erat. </p>
            <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, </p>
        </div>
    </div>


</body>
</html>

20130424002

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Demos</title>
    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
    <script src="scripts/jquery-1.9.1.js"></script>
    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
    <script>
        $(function () {
            $("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
            $("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
        });
    </script>
    <style>
        .ui-tabs-vertical {
            width: 55em;
        }

            .ui-tabs-vertical .ui-tabs-nav {
                padding: .2em .1em .2em .2em;
                float: left;
                width: 12em;
            }

                .ui-tabs-vertical .ui-tabs-nav li {
                    clear: left;
                    width: 100%;
                    border-bottom-width: 1px !important;
                    border-right-width: 0 !important;
                    margin: 0 -1px .2em 0;
                }

                    .ui-tabs-vertical .ui-tabs-nav li a {
                        display: block;
                    }

                    .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
                        padding-bottom: 0;
                        padding-right: .1em;
                        border-right-width: 1px;
                        border-right-width: 1px;
                    }

            .ui-tabs-vertical .ui-tabs-panel {
                padding: 1em;
                float: right;
                width: 40em;
            }
    </style>
</head>
<body>

    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Nunc tincidunt</a></li>
            <li><a href="#tabs-2">Proin dolor</a></li>
            <li><a href="#tabs-3">Aenean lacinia</a></li>
        </ul>
        <div id="tabs-1">
            <p>Proin elit arcu, rutrum commodo, vehicula tempus, </p>
        </div>
        <div id="tabs-2">
            <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, </p>
        </div>
        <div id="tabs-3">
            <p>Mauris eleifend est et turpis. Duis id erat. </p>
            <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, </p>
        </div>
    </div>


</body>
</html>

20130424003

 

jQuery 入门教程(41): jQuery UI Tab 示例(一)

Tab  显示多个标签页,每个标签含有一个标签头和一个Panel(显示标签的内容)。

基本用法

首先使用HTML定义用来作为Tab,一般使用列表(ul ,li) 来定义标签页的标题,每个标题使用href 链接到每个页面的内容页,比如下例定义了三个标签页:

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="#tabs-2">Proin dolor</a></li>
		<li><a href="#tabs-3">Aenean lacinia</a></li>
	</ul>
	<div id="tabs-1">
		<p>Proin elit arcu, rutrum commodo, vehicula tempus, </p>
	</div>
	<div id="tabs-2">
		<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, </p>
	</div>
	<div id="tabs-3">
		<p>Mauris eleifend est et turpis. Duis id erat. </p>
		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, </p>
	</div>
</div>

然后使用jQuery 的 tabs()方法把这部分Html元素变为标签页

<script>
	$(function () {
		$("#tabs").tabs();
	});
</script>

20130423001