Стилизация флажка с шрифтом awesome и bootstrap

-1

Я пытаюсь установить флажок, используя шрифт awesome с bootstrap. Я использую два шрифтовых удивительных значка fa-circle-thin и fa-check-circle.Стилизация флажка с шрифтом awesome и bootstrap

При наведении указателя мыши он должен переключать класс на основе этого флажка/снят с отметки, и при щелчке на флажке функция javascript должна вызываться.

При попытке привязать модель как список, если свойство конкретной модели False, следует применить «fa-circle-thin», и если он установлен, тогда применяется «fa-check-circle».

Любая помощь по этому признанию!

источник

2016-12-28 Rohit

Это будет более полезным, если вы создали jsfiddle или somethi ng похоже на то, что вы пытались. – Karthik

Я пробовал из этого http://output.jsbin.com/noqiwi/ – Rohit

ваш код jsbin не имеет флажка, а не какой-либо функции javascript – Deep

Я надеюсь, что это поможет:

HTML:

<ul> 
    <li> 
    <label> 
     <input type="checkbox" checked /><i class="icon-fixed-width icon-check"></i> One 
    </label> 
    </li> 
    <li> 
    <label> 
     <input type="checkbox" checked /><i class="icon-fixed-width icon-check"></i> Two 
    </label> 
    </li> 
    <li> 
    <label> 
     <input type="checkbox" checked /><i class="icon-fixed-width icon-check"></i> Three 
    </label> 
    </li> 
</ul>

CSS:

[type=checkbox] { 
    display: none; 
} 

label { 
    cursor: pointer; 
} 

[class*=icon-].icon-fixed-width { 
    text-align: left; 
}

JavaScript:

$("[type=checkbox]").change(function() { 
    $checkbox = $(this) 
    $icon = $checkbox.siblings("[class*=icon-]") 

    checked = $checkbox.is(":checked") 

    $icon.toggleClass('icon-check', checked) 
    .toggleClass('icon-check-empty', !checked) 
});

Примечание: fontawesome должны быть включены на странице. (Шрифт-awesome.css/шрифта awesome.min.css)

JSFiddle: https://jsfiddle.net/nikdtu/mLuubpaq/

источник

2016-12-28 04:49:21

Можно ли это сделать при наведении мыши? если он не установлен, тогда на мыши наведите указатель мыши на отмеченную иконку и наоборот – Rohit

Да, немного наведите курсор, обработчики манипулятора. –

См., Если это может вам помочь. Я пробовал в вашем jsbin-коде. HTML:

<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 

</head> 
<body> 
    <div class="divclass"> 
    <i class="fa fa-circle-o"></i> 
    </div> 
</body> 
</html>

CSS:

.divclass{ 
    font-size:5em; 
    color:grey; 
    cursor:pointer; 
}

JS:

$('.divclass').click(function(){ 

    var ele = $(this).find('i'); 
    if($(ele).hasClass('fa-circle-o')){ 
    $(ele).removeClass('fa-circle-o'); 
    $(ele).addClass('fa-check-circle'); 
    }else{ 
    $(ele).addClass('fa-circle-o'); 
    $(ele).removeClass('fa-check-circle'); 

    } 
});

источник

2016-12-28 04:48:13

Я создал JS бен here. Флажок скрыт, поэтому он будет выглядеть так, как если бы флажок был шрифтом. Вы можете отобразить этот флажок, чтобы увидеть эффект.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 

    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
</head> 
<body> 
    <div class="divclass"> 
    <i class="fa fa-circle-o"> 
     <input id='chk1' type='checkbox' style='display:none'/> 
    </i> 
    </div> 

</body> 
</html>

CSS

.divclass{ 
    font-size:5em; 
    color:grey; 
    cursor:pointer; 
} 

.divclass:hover .fa-circle-o:before{ 
    content:"\f05d"; 
    color:green; 
    opacity:0.4; 
}

JavaScript

$(function(){ 
    $(".divclass").hover(function(){ 
    //Execute code on hover in 
    $("#chk1").prop('checked', true); 
    },function(){ 
    //Execute code on hover out 
    $("#chk1").prop('checked', false); 
    }); 

    //Below call back is used on click of the checkbox 
    $(".divclass").click(function(){ 
    alert("checkbox clicked"); 
    }); 
})

источник

2016-12-28 05:00:41 Karthik

Стилизация флажка с шрифтом awesome и bootstrap

ответ

Смежные вопросы