JqueryUI入门

Jquery UI 是一套开源免费的、基于Jquery的插件,在这里记录下Jquery UI 的初步使用。

第一、下载安装

    下载Jquery,官网:http://jquery.com;  下载Jquery UI,官网:http://jqueryui.com/

    Jquery的部署就不说了,说下Jquery UI的部署;以jquery-ui-1.9.1为例,如果只是简单使用Jquery UI的话,导入jquery-ui-1.9.1.custom.min.js和jquery-ui-1.9.1.custom.min.css就够了,想更深入了解的话,建议使用theme方式:解压下载的Jquery UI后,找到themes目录,把它copy到项目中,然后找到ui目录,把ui目录copy到themes目录下。如图:

  基本准备完成。

第二、初步使用

  下面我们创建一个页面,演示一个手风琴的效果(accordion组件)

  1、引用css

<link rel="Stylesheet" type="text/css" href="themes/base/jquery.ui.all.css" />

 

  2、引用Js

<script type="text/javascript" src="themes/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="themes/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="themes/ui/jquery.ui.accordion.js"></script>

 

  3、实现代码

 

<!-- Html代码 -->
<div id="accordion" class="ui-widget-content"   style="height: 80%;">
     <h6><a href="#">用户管理</a></h6>
     <div>...</div>
     <h6><a href="#">商品管理</a></h6>
     <div>...</div>
     <h6><a href="#">订单管理</a></h6>
     <div>
       <ul>
          <li><a href="#">订单管理</a></li>
           <li><a href="#">收货地址管理</a></li>
           <li><a href="#">退货管理</a></li>
        </ul>
     </div>
     <h6><a href="#">统计</a></h6>
     <div>...</div>
</div>
<!-- JavaScript代码 -->
<SCRIPT type=text/javascript>
    //初始化手风琴
    function initAccordion(){
    $( "#accordion" ).accordion({
        collapsible: true
    });
    }
    
    $(document).ready(function() {
           //手风琴
        initAccordion();
        });
</SCRIPT>

   4、实现效果

第三、主题风格的使用

   可能有人说上面的例子做出来的色调和我的不一样,那是因为我们用的主题风格不一样。下面我们来做一个更换主题的应用。

  1、下载主题

    可以进官网的Themes页面选择需要的主题下载,如图:

  不过我个人不推荐这种方式(下载不方便、会有很多重复的东西)。我更喜欢一次性下载所有主题,简单快捷还没有重复的东西,一次性下载,可以进首页底端找到Themes下载,如图:

  2、部署

    下载完后解压,在themes目录下有各个主题对应的目录,打开这些目录,你会发现各个主题就是用了不同图片和jquery.ui.theme.css这个样式文件。好了,找到关键了,那我们看一下jquery.ui.theme.css文件是在哪里引用的呢?打开jquery.ui.all.css文件就知道是这里引用了

@import "jquery.ui.base.css";
@import "jquery.ui.theme.css";

    接下来就好办了,首先,我们在项目的themes目录下建立一个目录,把base目录下的除jquery.ui.theme.css、jquery-ui.css外的css样式文件全放进去

    然后打开jquery.ui.all.css文件,把@import "jquery.ui.theme.css";这句干掉;然后把各个主题的目录copy到themes目录下

    到此,部署完毕。

 

  3、实现更换主题代码

<link id="theme" rel=stylesheet type=text/css  href="themes/dot-luv/jquery.ui.theme.css">
<link rel=stylesheet type=text/css  href="themes/all/jquery.ui.all.css">

   

<!-- Html代码 -->
<select id="theme_changer">
    <option value="themes/dot-luv/jquery.ui.theme.css" selected="selected">Dot-luv Theme</option>
    <option value="themes/hot-sneaks/jquery.ui.theme.css" >Hot-sneaks Theme</option>
    <option value="themes/flick/jquery.ui.theme.css" >Flick Theme</option>
    <option value="themes/ui-darkness/jquery.ui.theme.css" >Ui-darkness Theme</option>
    <option value="themes/vader/jquery.ui.theme.css" >Vader Theme</option>
 </select>
JavaScript代码

<!-- JavaScript代码 -->    
  //更改主题
    function initTheme(){
         $('#theme_changer').change(function() {
            // alert("changer theme");
             var theme = $(this).find("option:selected").val();
            // alert(theme);
             $('#theme').attr('href', theme);
             });
    }
  $(document).ready(function() {
        //主题
        initTheme();
        //手风琴
        initAccordion();
  });

实现效果如下:

posted @ 2012-12-27 15:43  牧之丨  阅读(695)  评论(0编辑  收藏  举报