信息门户网站制作费用,客户管理软件app,专业做公司网页设计,合肥网站优化推广方案Bootstrap弹出框和警告框插件 学习要点#xff1a; 1.弹出框 2.警告框 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件。 一#xff0e;弹出框 弹出框即点击一个元素弹出一个包含标题和内容的容器。 基本用法 注意#xff1a;必须在js结合popover()方法使用 da… Bootstrap弹出框和警告框插件 学习要点 1.弹出框 2.警告框 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件。 一弹出框 弹出框即点击一个元素弹出一个包含标题和内容的容器。 基本用法 注意必须在js结合popover()方法使用 data-togglepopover弹出框事件绑定写在触发弹出框的元素里执行弹出框事件点击弹出或隐藏(Bootstrap)title设置弹出框标题写在弹出框元素里(Bootstrap)data-content设置弹出框内容写在弹出框元素里(Bootstrap) popover()弹出框方法将触发弹出框元素执行弹出框方法一般在button元素上使用(Bootstrap) button classbtn btn-lg btn-danger typebutton data-togglepopover title弹出框 data-content这是一个弹出框插件点击弹出/隐藏弹出框
/button js $(function () {$(button).popover();
}); 弹出框插件有很多属性来配置提示的显示具体如下 data-animation 默认 true在 popover 上应用一个 CSS fade 动画。如果设置 false则不应用。设置是否淡入淡出动画 data-html 默认 false不允许提示内容格式为 html。如果设置为 true则可以设置 html 格式的提示内容。设置内容或标题是否支持html标签 data-placement 默认值 top还有 bottom、left、right 和 auto。如果 auto 会自行调整合适的位置如果是 auto left则会尽量在左边显示但左边不行就靠右边。设置弹出框位置 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也就是如果提示信息被容器遮挡可以设置一个外层div将提示信息的容器重新指定到设置的div上 data-template 更改提示框的 HTML 提示语的模版默认值为设置提示框模板 div classpopover div classarrow/div h3 classpopover-title/h3 div classpopover-content/div /div data-content 默认值为空弹出框的内容。设置弹出框内容 data-viewport 设置外围容器的边际具体代码看示例。 div idviewbutton classbtn btn-lg btn-danger typebutton data-togglepopover title弹出框 data-content这是一个弹出框插件点击弹出/隐藏弹出框/button
/div js $(function () {$(button).popover({container:#view,viewport: {selector: #view,padding: 5,}});
}); 重点以上属性有两种使用方式1是在html标签里用属性的方式2是在js里用对象属性的方式 html标签里用属性的方式 button classbtn btn-lg btn-danger typebutton data-togglepopover title弹出框 data-content这是一个弹出框插件点击弹出/隐藏弹出框
/button 2是在js里用对象属性的方式将上面的属性去掉data就是js对象属性 $(function () {$(button).popover({animation:true, //设置弹出框支持淡入淡出placement:top //设置弹出框头部显示});
}); 弹出框方法 show弹出框方法参数显示弹出框(Bootstrap)hide弹出框方法参数隐藏弹出框(Bootstrap)toggle弹出框方法参数反转显示和隐藏弹出框(Bootstrap)destroy弹出框方法参数隐藏并销毁弹出框(Bootstrap) $(function () {$(button).popover({animation: true, //设置弹出框支持淡入淡出placement: top //设置弹出框头部显示});//显示$(button).popover(show);//隐藏$(button).popover(hide);//反转显示和隐藏$(button).popover(toggle);//隐藏并销毁// $(button).popover(destroy);
}); 弹出框事件 show.bs.popover 在调用 show 方法时触发(Bootstrap)shown.bs.popover 在显示整个弹窗时时触发(Bootstrap)hide.bs.popover 在调用 hide 方法时触发(Bootstrap)hidden.bs.popover 在完全关闭整个弹出时触发(Bootstrap) $(function () {$(button).popover({animation: true, //设置弹出框支持淡入淡出placement: top //设置弹出框头部显示});$(button).on(show.bs.popover, function () {alert(在调用 show 方法时触发);});$(button).on(shown.bs.popover, function () {alert(在显示整个弹窗时时触发);});$(button).on(hide.bs.popover, function () {alert(在调用 hide 方法时触发);});$(button).on(hidden.bs.popover, function () {alert(在完全关闭整个弹出时触发);});
}); 二警告框 警告框即为点击消失的信息框。 基本实例 alert样式class类写在div里声明一个警告框区块(Bootstrap)alert-danger样式class类写在div里设置警告框样式为红色(Bootstrap)close样式class类写在警告框里的button里设置警告框关闭按钮样式(Bootstrap)data-dismissalert警告框事件写在警告框里的button里点击后关闭警告框(Bootstrap) div classalert alert-dangerbutton classclose typebutton data-dismissalertspantimes;/span/buttonp警告您的浏览器不支持/p
/div 添加淡入淡出效果 fade样式class类写在警告框div里设置警告框淡入淡出效果(Bootstrap)in样式class类写在警告框div里设置警告框默认显示淡入淡出效果(Bootstrap) div classalert alert-danger fade inbutton classclose typebutton data-dismissalertspantimes;/span/buttonp警告您的浏览器不支持/p
/div 警告框方法 如果用 JavaScript可以代替 data-dismissalert事件 alert()警告框框方法将警告框元素执行警告框方法一般在警告框区块div元素上使用(Bootstrap) close警告框方法参数关闭警告框(Bootstrap) html div idalert classalert alert-danger fade inbutton classclose typebuttonspantimes;/span/buttonp警告您的浏览器不支持/p
/div js $(function () {$(.close).on(click, function () { //获取警告框按钮执行点击事件$(#alert).alert(close); //点击后关闭警告框})
}); 警告框事件 close.bs.alert 当 close 方法被调用后立即触发(Bootstrap)closed.bs.alert 当警告框被完全关闭后立即触发(Bootstrap) $(function () {$(.close).on(click, function () { //获取警告框按钮执行点击事件$(#alert).alert(close); //点击后关闭警告框});$(#alert).on(close.bs.alert, function () {alert(当 close 方法被触发时调用);});$(#alert).on(closed.bs.alert, function () {alert(当警告框被完全关闭后立即触发);});
}); 转载于:https://www.cnblogs.com/adc8868/p/6806543.html
