Jquery UI 学习笔记（一）

一：在HTML页面中应该引入那些文件

1：JavaScript文件（如：jquery-ui-1.10.4.custom.min.js）

2：CSS文件（如：jquery-ui-1.10.4.custom.min.css）

引入文件遇到的问题和解决方法：

问题：实现一个简单的选项卡，用IE查看的时候，一直提示“Jquery未定义”的错误。

原因：百度后，发现在引用Jquery的js文件时，顺序不对。

解决方法：将Jquery.js这个引用放在最前面（必须在最前面，不然就会出错）　　

 

二：学习选项卡的基本用法

选项卡的基本组成要素：

1：一个包含整个选项卡的<div>块；

2：一个构成选项卡栏的<ul>元素；

3：每个选项卡对应的一个<li>元素；

4：每个选项卡的窗口对应的一个<div>元素；

5：调用jQuery UI的tabs（）方法。（该方法遍历了HTML代码，并给相关的元素添加了新的CSS类。赋予他们适当的样式。）

  
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="jQueryUI/js/jquery-1.10.2.js"></script>

    <script src="jQueryUI/js/jquery-ui-1.10.4.custom.min.js"></script>

    <link rel="Stylesheet" href="jQueryUI/css/ui-lightness/jquery-ui-1.10.4.custom.min.css" />
    <style type="text/css">
        li.ui-state-default
        {
            font-size: 10px;
        }
        div.ui-tabs-panel
        {
            font-size: 15px;
            font-family: Georgia;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div id="tabs">
        <ul>
            <li><a href="#tab1">Tab 1</a></li>
            <li><a href="#tab2">Tab 2</a></li>
        </ul>
        <div id="tab1">
            Contents of first tab</div>
        <div id="tab2">
            Contents of second tab</div>
    </div>
</body>
</html>

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

 

 添加样式时，需要注意的事项： 

1：自己添加的样式，必须放在jQuery UI样式的后面。否则根据CSS的优先级规则，自己添加的样式就会被jQuery UI的样式覆盖。

 

三：tabs()方法

1：两种使用形式

1.1:$(selector,context).tabs(options);

　　options:是一个对象，用来指定选项卡的外观及行为。

1.2:$(selector,context).tabs("action",param)

　　能在创建选项卡后修改选项卡的行为。

第一个参数是一个字符串，指定是什么操作，随后的是和这个操作有关的参数。

 

 四：学习折叠菜单的基本用法

折叠菜单的基本组成要素：

1：一个包含整个折叠菜单的<div>元素

2：一个作为菜单标题的元素（如：<h1>、......、<h6>等等），它包含一个<a>链接，用来作为菜单的名称（该链接不需要href属性。基本不用）

3：一个作为菜单内容的<div>元素

4：调用accordion()方法来管理全局的<div>

 

五：accordion()方法

1：两种使用形式：

1.1：$(selector,context).accordion(options)

　　options:是一个对象，用来指定菜单的外观及行为。

1.2:$(selector,context).accordion("action",params)

　　此方法允许操作菜单，比如选中或取消选中。

　　第一个参数是一个字符串，指定是什么操作；第二个是个该操作有关的参数。

posted on 2014-03-11 15:17  Shirley_hu  阅读(295)  评论(0)  编辑  收藏  举报

导航