ch14-标签页（选项卡）和工具提示插件.pptVIP

第14章标签页和工具提示标签页(选项卡)工具提示教学内容标签页(选项卡)一、标签页(选项卡)：1.基本用法?!--选项卡效果start--ulclass=navnav-pills liclass=active ahref=#onedata-toggle=tab作品1/a /li liahref=#twodata-toggle=tab作品2/a/li liahref=#threedata-toggle=tab作品3/a/li/ul divclass=tab-contentstyle=padding:20px; divclass=tab-paneactivefadeinid=one imgsrc=images/b1.jpg/ /div divclass=tab-panefadeid=two imgsrc=images/b2.jpg/ /div divclass=tab-panefadeid=three imgsrc=images/b3.jpg/ /div/div!--选项卡效果end-- 2.可以设置淡入淡出效果fade，而in表示首选的内容默认显示divclass=tab-paneactivefadeinid=n1?3.也可以换成胶囊式ulclass=navnav-pills?4.使用JavaScript，直接使用tab方法。具体效果参见tabs-1.html?$(.nava).on(click,function(){ $(this).tab(show); });5.相关的事件事件类型描述show.bs.tab在tab显示之前触发shown.bs.tab 在tab显示之后触发事件案例：//调用tab方法时触发 $(.nava).on(show.bs.tab,function(){ alert(调用时弹出的信息);});?工具提示二、工具提示：工具提示就是通过鼠标移动选定在特定的元素上时，显示相关的提示语。1.基本实例1）html部分：ahref=#title=工具data-toggle=tooltiptool/a2）jq部分：scripttype=text/javascript $(a).tooltip(); /script2.工具提示有很多属性来配置提示的显示，具体如下：属性名描述data-animation 默认true，在tooltip上应用一个CSSfade（淡入淡出）动画。如果设置false，则不应用。data-html 默认false，不允许提示内容格式为html。如果设置为true，则可以设置html格式的提示内容。data-placement默认值top，还有bottom、left、right和auto。如果auto会自行调整合适的位置，如果是autoleft则会尽量在左边显示，但左边不行就靠右边。?data-original-title默认空字符串，提示语的内容。优先级比title低title默认字空符串，提示语的内容。data-trigger 默认值hoverfoucs，表示怎么触发tooltip，其他值为：click、manual。多个值用空格隔开，manual手动不能和其他同时设置。data-delay默认值0，延迟触发tooltip(毫秒)，如果传数字，那么表示show/hide的毫秒数，如果传对象，结构为：{show:500,hide:100}data-template 更改提示框的HTML提示语的模版，默认值为：divclass=tooltipdivclass=tooltip-arrow/divdivclass=tooltip-inner/div/div。data-selector默认false，可以选择绑定指定的选择器。data-container 默认值false，将tooltip附加到特定的元素上。比如组合按钮组提示，容器不够，可以附加body上。container:body?ahref=#rel=tooltipdata-toggle=tooltiptitle=超文本标识符data-animation=falsedata-html=truedata-placement=autodata-selector=a[rel=tooltip]data-trigger=cl