ch13-弹出框和警告框插件.ppt

第13章弹出框和警告框插件弹出框警告框教学内容弹出框一、弹出框：弹出框即点击一个元素弹出一个包含标题和内容的容器。1.基本用法buttonclass=btnbtn-lgbtn-dangertype=buttondata-toggle=popovertitle=弹出框data-content=这是一个弹出框插件点击弹出/隐藏弹出框/button//JavaScript初始化$(button).popover();弹出框插件有很多属性来配置提示的显示，具体如下：?属性名描述data-animation默认true，在popover上应用一个CSSfade动画。如果设置false，则不应用。data-html默认false，不允许提示内容格式为html。如果设置为true，则可以设置html格式的提示内容。?data-placement默认值top，还有bottom、left、right和auto。如果auto会自行调整合适的位置，如果是autoleft则会尽量在左边显示，但左边不行就靠右边。?data-selector默认false，可以选择绑定指定的选择器。data-original-title默认空字符串，弹出框的标题。优先级比title低title默认字空符串，弹出框的标题。data-trigger默认值click，表示怎么触发popover，其他值为：hover、focus、manual。多个值用空格隔开，manual手动不能和其他同时设置。data-delay默认值0，延迟触发popover(毫秒)，如果传数字则，表示show/hide的毫秒数，如果传对象，结构为：{show:500,hide:100}?data-container默认值false，将popover附加到特定的元素上。比如组合按钮组提示，容器不够，可以附加body上。container:body?data-template更改提示框的HTML提示语的模版，默认值为：divclass=popoverdivclass=arrow/divh3class=popover-title/h3divclass=popover-content/div/div?data-content默认值为空，弹出框的内容。data-viewport设置外围容器的边际。$(button).popover({container:body,viewport:{selector:#view,padding:10,}});通过JavaScript执行的方法有四个。//显示$(button).popover(show);//隐藏$(button).popover(hide);//反转显示和隐藏$(button).popover(toggle);//隐藏并销毁$(button).popover(destroy);Popover插件中事件有两种。事件类型 描述show.bs.popover 在调用show方法时触发shown.bs.popover 在显示整个弹窗时时触发hide.bs.popover 在调用hide方法时触发hidden.bs.popover 在完全关闭整个弹出时触发?//事件，其他雷同$(button).on(show.bs.tab,function(){alert(调用show方法时触发！);});警告框二、警告框：警告框即为点击时的信息框。1.基本实例divclass=alertalert-warningbuttonclass=closetype=buttondata-dismiss=alertspantimes;/span/buttonp警告：您的浏览器不支持！/p/div2.添加淡入淡出效果divclass=alertalert-warningfadein如果用JavaScript，可以代替data-dismiss=alert//JavaScript方法$(.close).on(click,function(){$(#alert).alert(close);})Alert插件中事件有四种。事件类型 描述close.bs.alert 当close方法被调用后立即触发closed.bs.alert 当警告框被完全关闭后立即触发?3.事件，其他