多语言展示
当前在线：1489今日阅读：27今日分享：41

jQuery EasyUI从入门到精通（4）
jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。             本经验是 【jQuery EasyUI从入门到精通】系列教程的第4部分，讲述 jQuery EasyUI Web Demos之Accordion（手风琴效果）。
工具/原料
1

笔记本电脑或是台式机

2

互联网

3

jQuery EasyUI

方法/步骤
1

Basic Accordion（基本的手风琴效果），Click on panel header to show its content（点击一个面板的头部显示它的内容）.        Basic Accordion - jQuery EasyUI Demo                       

Basic Accordion

   

Click on panel header to show its content.

   
   
       
           

Accordion for jQuery

           

Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.

       
       
           

The accordion allows you to provide multiple panels and display one or more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.

               
       
           
                   
  •                     Foods                   
                             
    •                             Fruits                           
                                       
      • apple
        •                                
      • orange
        •                            
                             
      •                        
    •                             Vegetables                           
                                       
      • tomato
        •                                
      • carrot
        •                                
      • cabbage
        •                                
      • potato
        •                                
      • lettuce
        •                            
                             
      •                    
                   
    •            
       
   

2

基本的手风琴效果，展示前，效果图如下。

3

基本的手风琴效果，展示后，效果图如下。

4

Accordion Tools（手风琴效果工具），Click the tools on top right of panel to perform actions（点击面板右上方的工具演示效果）.        Accordion Tools - jQuery EasyUI Demo                       

Accordion Tools

   

Click the tools on top right of panel to perform actions.

   
   
       
           

Accordion for jQuery

           

Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.

       
       
           

The accordion allows you to provide multiple panels and display one ore more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.

               
       
                                                                                                                                                                                                                                               
Item IDProduct IDList PriceUnit CostAttributeStatus
       
   

5

手风琴效果工具，运行效果图如下。

6

Loading Accordion Content with AJAX（通过AJAX加载手风琴内容），Click AJAX panel header to load content via AJAX（点击AJAX面板头部以AJAX的方式加载内容）.      Loading Accordion Content with AJAX - jQuery EasyUI Demo                  

Loading Accordion Content with AJAX

   

Click AJAX panel header to load content via AJAX.

   
   
       
           

Accordion for jQuery

           

Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.

       
       
           

The accordion allows you to provide multiple panels and display one or more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.

              
       
       
   

7

通过AJAX加载手风琴内容，运行效果图如下。

8

Accordion Actions（手风琴动作），Click the buttons below to add or remove accordion items（点击按钮增加或是移除手风琴项）.        Accordion Actions - jQuery EasyUI Demo                       

Accordion Actions

   

Click the buttons below to add or remove accordion items.

   
        Select        Add        Remove   
   
       
           

Accordion for jQuery

           

Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.

       
   
   

9

Accordion Actions，运行效果图如下。

10

Keep Expandable Panel in Accordion（在手风琴中保持可伸缩的面板），Keep a expandable panel and prevent it from collapsing（保持一个可扩展的面板，防止它崩溃）.        Keep Expandable Panel in Accordion - jQuery EasyUI Demo                       

Keep Expandable Panel in Accordion

   

Keep a expandable panel and prevent it from collapsing.

   
   
       
                   
       
           

Accordion for jQuery

           

Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.

       
       
           

Content1

       
       
           

Content2

       
   
 

11

Keep Expandable Panel in Accordion（在手风琴中保持可伸缩的面板），运行效果图如下。

12

Multiple Accordion Panels（多重手风琴面板），Enable 'multiple' mode to expand multiple panels at one time（启用“多重”模式，在同一时间展开多个面板）.        Multiple Accordion Panels - jQuery EasyUI Demo                       

Multiple Accordion Panels

   

Enable 'multiple' mode to expand multiple panels at one time.

   
   
       
           

A programming language is a formal language designed to communicate instructions to a machine, particularly a computer. Programming languages can be used to create programs that control the behavior of a machine and/or to express algorithms precisely.

       
       
           

Java (Indonesian: Jawa) is an island of Indonesia. With a population of 135 million (excluding the 3.6 million on the island of Madura which is administered as part of the provinces of Java), Java is the world's most populous island, and one of the most densely populated places in the world.

       
       
           

C# is a multi-paradigm programming language encompassing strong typing, imperative, declarative, functional, generic, object-oriented (class-based), and component-oriented programming disciplines.

       
       
           

A dynamic, reflective, general-purpose object-oriented programming language.

       
       
           

Fortran (previously FORTRAN) is a general-purpose, imperative programming language that is especially suited to numeric computation and scientific computing.

       
   

13

Multiple Accordion Panels（多重手风琴面板），运行效果图如下。

14

Fluid Accordion（流体手风琴），This example shows how to set the width of accordion to a percentage of its parent container（这个例子展示了如何设置手风琴的宽度通过其父容器的百分比）.        Fluid Accordion - jQuery EasyUI Demo                       

Fluid Accordion

   

This example shows how to set the width of accordion to a percentage of its parent container.

   
   
       
           

width: 100%

       
       
       
   
       
    
       
           

width: 50%

       
       
       
   

15

Fluid Accordion（流体手风琴），运行效果图如下。

注意事项
1

jQuery EasyUI插件依赖于JQuery，需要在easyui.min.js之前引入JQuery库

2

除了引入easyui.min.js文件之外，还引入相应的库文件。

推荐信息
网站地图 XML TXT RSS 隐私政策 服务条款 使用条款
Copyright ©1996-2025 www.onijiang.com Corporation, All Rights Reserved