jQuery UI 使用指南

开始之前,请下载好两个文件jquery-ui-1.11.4.customjquery-ui-themes-1.11.4


1、引入正确的CSS库文件和JS文件,如引入文件夹jquery-ui-1.11.4.custom下的jquery-ui.cssjquery-ui.js文件,此外还要引入jQuery的核心文件jquery.js

(注意要先引入jQuery库文件,再引入jQuery UI库文件,否则不会出现效果)


2、书写调用UI组件的代码(以选项卡面板为例)

<script type="text/javascript">

$(function(){

$("#tabs").tabs();

});

script>

<body>

<div id="tabs">

  <ul>

    <li><href="#tabs-1">选项卡1a>li>

    <li><href="#tabs-2">选项卡2a>li>

    <li><href="#tabs-3">选项卡3a>li>

  ul>

  <div id="tabs-1">

    <p>选项卡1  测试内容1 p>

  div>

  <div id="tabs-2">

    <p>选项卡2  测试内容2 p>

  div>

  <div id="tabs-3">

    <p>选项卡3  测试内容3 p>

  div>

div>

body>

3、效果如下:(图1)

 jQuery UI 使用指南_第1张图片

4、文件夹jquery-ui-1.11.4.custom下还有jquery-ui.structure.cssjquery-ui.theme.css,若将上述的jquery-ui.css替换掉,则分别有以下效果:实际上jquery-ui.cs包含了jquery-ui.structure.cssjquery-ui.theme.css这两个文件

jQuery UI 使用指南_第2张图片

  5、若不喜欢图1的颜色,可从文件夹jquery-ui-themes-1.11.4下的themes文件夹中任选一个你喜欢的颜色,将其中的jquery-ui.css文件复制到项目中替换以前的jquery-ui.css即可

  6、若不喜欢jquery-ui-themes-1.11.4下的themes文件夹中所有主题,还可以自定义样式,步骤如下:

      1、进入官网http://jqueryui.com/themeroller/,选中选项卡Roll Your Own

      2、第二步下面有很多可以设置的选项,设置完毕后到第三步下载所设置的主题即可

jQuery UI 使用指南_第3张图片

 

 

你可能感兴趣的:(Web前端开发,JavaScript学习笔记)