Skip to content

bootstrap使用

Jump to bottom
jiang2016tao edited this page Jun 29, 2018 · 6 revisions

bootstrap下拉菜单

参考：https://v3.bootcss.com/components/#dropdowns
自己写的在页面上经常会出现点击菜单打不开的现象，代码如下：

  <li id="global_column_li" class="dropdown inline-block-li m-r-10" data-container="body">
                    <a href="javascript:void(0)" id="test" class="dropdown-toggle" data-toggle="dropdown" data-container="body" aria-expanded="false" aria-haspopup="true">
                        <i id="global_column_id" class="glyphicon wbk-glyphicon wbk-glyphicon-Layout3_Dft select-drown" data-toggle="tooltip" data-original-title="视图排列" data-container="body" ims-metric-mouseover="clumnMouse|over" ims-metric-mouseleave="clumnMouse|leave"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="global_column_li">
                        <li>
                            <span class="dropdown-menu-title">视图排列</span>
                        </li>
                        <li class="">
                            <a class="text-left" ims-metric-act="columnClick" value="3">
                                <i class="wbk-menu-graph-type-size wbk-glyphicon-Layout3_Dft"></i>3列
                            </a>
                            <a class="text-left" ims-metric-act="columnClick" value="2">
                                <i class="wbk-menu-graph-type-size wbk-glyphicon-Layout2_Dft"></i>2列
                            </a>
                            <a class="text-left" ims-metric-act="columnClick" value="1">
                                <i class="wbk-menu-graph-type-size wbk-glyphicon-Layout1_Dft"></i>1列
                            </a>
                        </li>
                    </ul>
                </li>

boostrap单选按钮问题


1分钟的时候，我只能选中count；其它维度时，默认选中sum。

<div class="col-sm-3">
                                <p class="c-dark-blue f-500 m-b-20">聚合方式</p>
                                <div class="m-t-30">
                                    <label class="radio radio-inline m-r-20">
                                        <input type="radio" name="valueType" value="0"/>
                                        <i class="input-helper"></i> count
                                    </label>
                                    <label class="radio radio-inline m-r-20">
                                        <input type="radio" name="valueType" value="1" disabled>
                                        <i class="input-helper"></i> avg
                                    </label>
                                    <label class="radio radio-inline m-r-20">
                                        <input type="radio" name="valueType" value="2" disabled>
                                        <i class="input-helper"></i> sum
                                    </label>
                                    <label class="radio radio-inline m-r-20">
                                        <input type="radio" name="valueType" value="3" disabled>
                                        <i class="input-helper"></i> max
                                    </label>
                                </div>
                            </div>

在进入页面时，我采用下面代码默认选中count，这样是可以的。

$('[name="valueType"]').eq(0).attr("checked","checked");

当下拉框切换时，我给它一个事件函数处理逻辑

var _val=$("#granularity_select").val();
            var $radios=$('[name="valueType"]');
            if(_val==0){
                $radios.attr("disabled","disabled");
                $radios.eq(0).removeAttr("disabled");
                $radios.removeAttr("checked");
                $radios.eq(0).attr("checked","checked");
            }
            else{
                $radios.removeAttr("disabled");
                $radios.eq(0).attr("disabled","disabled");
                $radios.removeAttr("checked");
                $radios.eq(2).attr("checked","checked");
            }

发现这样并不能达我的要求，就是$radios.eq(2).attr("checked","checked");并不能选中我要的选项。后来采用$radios[0].checked=true或$radios[0].checked=false解决的需求。就是不知道为什么会不行。

bootstrap的tooltip提示的使用

参考BootStrap tooltip提示框使用小结 在前端交互中，有这样的场景需求：有一个删除的图标，有tips提示“删除”，并且设置data-container="body"，点击删除就会将该节点删除，这样就会出现tips的节点一直在页面上显示，不会消失。这样的现象之前也有遇到过。
解决方法是在删除事件的代码里先调用tooltip("hide")来隐藏。

deletehtml:function(e,at,o){
            $(e.target).closest("i").tooltip("hide");
            var $row=$(e.target).closest(".mail-config-div");
            $row.remove();
        },

Clone this wiki locally