弹出蒙层

点击下面的按钮会触发一个模态对话框。

Example

点我

  
                                        点我 // Modal
                                        
                                            
                                                模态框-标题
                                            
                                            请在此处加载具体内容...
                                            
                                                
                                                
                                            
                                            ×

1. 调用方法

Example

1.1 通过data属性

在一个主控元素，例如按钮，上设置data-toggle="modal"，然后再设置data-target="#foo"或href="#foo" 以指向某个将要被启动的对话框。关闭对话框则需要给关闭按钮添加data-dismiss="modal"即可。

1.2 通过JavaScript触发

                                            $('#myModal').modal(options)

2. 选项

Example

上面的选项都可以通过data属性或JavaScript代码传递给组件。对于data属性，将选项名称附着于data-字符串之后，就像data-backdrop=""一样。

名称	类型	默认值	描述
backdrop	boolean	true	为模态对话框添加一个背景元素。另外，为背景指定`static`时，点击模态对话框的外部区域不会将其关闭。
keyboard	boolean	true	按下esc键时关闭模态对话框
show	boolean	true	初始化时即显示模态对话框
remote	path	false	如果提供了远程url地址，就会通过 jQuery的load方法加载内容并注入到.modal-body中。如果你使用的是data属性api，你还可以使用href标签指定远程数据源。案例如下： click me

3. 方法

Example

modal('show') - 手动打开一个模态对话框
modal('hide') - 手动隐藏一个模态对话框

                         $('#myModal').modal('show');$('#myModal').modal('hide');

提示tips

鼠标停悬可查看工具提示：

Example

上方说明信息右方说明信息下方说明信息左方说明信息

1. 调用方法

Example

通过JavaScript触发工具提示：

                                            $('#example').tooltip(options)

2. 选项

Example

可以通过data属性或JavaScript传递参数。对于data属性，将参数名附着到data-后面即可，例如, data-animation=""。

名称	类型	默认值	描述
title	string \| function	''	设置提示内容
animation	boolean	true	应用渐变的动画效果
html	boolean	false	插入html进入工具提示
placement	string \| function	'top'	工具提示的位置 - top \| bottom \| left \| right
trigger	string	'hover focus'	触发事件 - click \| hover \| focus \| manual
delay	number \| object	0	延迟显示或隐藏工具提示的时间(ms)，例如：delay: { show: 500, hide: 100 }
container	string \| false	false	把工具提示插入到具体的节点,例如：container: 'body'

3. 方法

Example

$().tooltip(options)
对一组页面元素绑定一个工具提示处理器。
.tooltip('show')
弹出某个页面元素的工具提示。
.tooltip('hide')
隐藏某个页面元素的工具提示。
.tooltip('toggle')
打开或隐藏某个页面元素的工具提示。
.tooltip('destroy')
隐藏并销毁某个页面元素的工具提示。

                         $('#element').tooltip('show');

                         $('#element').tooltip('hide') ;

                     
                                          $('#element').tooltip('toggle')  ;

                        $('#element').tooltip('destroy')

tabs

静态结构

Example

选项一 选项二 选项三 选项四

web交互效果（注意结构和相应的类）更多

Example

选项一
选项二
选项三

我是选项一内容

                                    $('.demo1').Tabs();

另外常见tab切换

Example

选项一 选项二 选项三

我是选项一内容

CuTe UI

web组件

弹出蒙层

点击下面的按钮会触发一个模态对话框。

1. 调用方法

2. 选项

3. 方法

提示tips

鼠标停悬可查看工具提示：

1. 调用方法

2. 选项

3. 方法

tabs

静态结构

选项一 选项二 选项三 选项四

选项一 选项二 选项三 选项四

web交互效果（注意结构和相应的类）更多

另外常见tab切换

选项一 选项二 选项三

选项一 选项二 选项三

CuTEUI是什么