jquery插件之面板

最新推荐文章于 2024-03-15 00:15:00 发布

coder_up

最新推荐文章于 2024-03-15 00:15:00 发布

阅读量2.3k

点赞数

分类专栏： jquery 文章标签： jquery插件 jquery stylesheet javascript xhtml div

本文链接：https://blog.csdn.net/wjc19911118/article/details/7404685

版权

jquery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1、在学习jquery插件之前首先我们来看一下该怎样开始布置工作

jquery ui使用前提：

           第一步：引入类库文件
                   包括：
                       js类库             js库引入要有顺序首先第一个引入的是jquery核心文件（jquery-1.7.1.min.js），然后在引入jquery-ui核心文件（jquery-ui-1.8.18.custom.min.js）
                        css样式类库    jquery-ui-1.8.18.custom.css

第二步：模拟实现

面板效果实现：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery-ui-面板</title>

<script type="text/javascript" language="javascript" src="../js/jquery-1.7.1.min.js"></script>

<script type="text/javascript" language="javascript" src="../js/jquery-ui-1.8.18.custom.min.js"></script>


<link type="text/css" rel="stylesheet" href="../css/ui-lightness/jquery-ui-1.8.18.custom.css" />
<script type="text/javascript">
   $(function (){
           $("#tabs").tabs({
                   //改变出发动作，默认触发动作click
                   event:"mouseover",
                   //设置第一个出现的
                   selected:1,
                   //设置弄否被用到
                   disabled:[2,3],
                   //透明度
                   fx:{
                           opacity:"toggle"
                       },
               }).sortable({ //同样可以排序
                       axis:"x,y"
                   });
               //添加
               $("#tabs").tabs("add","../dialog.html","我是新来的啊");
               //参数1：要执行的动作
               //参数2：内容(注意：这里的内容必须是一个文件，文本不会显示，并且在火狐下也不会显示该文件中的内容，在IE下则可以，解决在火狐下的显示问题可以在服务器下面运行)
               //参数3：标题


               //删除
               $("#tabs").tabs("remove",2);
       });
</script>
</head>

<body>
        <h1>模拟tabls效果</h1>
        <div id="tabs">
           <ul>
               <li><a href="#tab-1">面板1</a></li>
                <li><a href="#tab-2">面板2</a></li>
                <li><a href="#tab-3">面板3</a></li>
                <li><a href="./tab4.html">面板4</a></li>
            </ul>
            <div id="tab-1">111111111111</div>
            <div id="tab-2">222222222222</div>
            <div id="tab-3">333333333333</div>
        </div>

</body>
</html>