Trang Chính
Tìm kiếm![[All ver] BBcode Tooltip cho SCEditor Userbar-sep](https://2img.net/h/i1327.photobucket.com/albums/u661/quanligerv/skin4fmm/userbar-sep.png)
Bài gửi
point
Được cảm ơn
Tham Gia : - Xóa bài viết
- Sửa bài viết
Demo :
Tool :
![[All ver] BBcode Tooltip cho SCEditor Tool10](https://i.servimg.com/u/f35/15/64/85/86/tool10.png)
Hover :
![[All ver] BBcode Tooltip cho SCEditor Toolti10](https://i.servimg.com/u/f35/15/64/85/86/toolti10.png)
Ưu điểm :
- Nhẹ , gọn , hiển thị rõ ràng cho người xem
- Sử dụng với nhiều chức năng khác
Với BBcode tooltip bạn có thể :
1. Hover hiện chú thích
2. Hover hiện ảnh, avatar (Cho vào thẻ img)
...
Hướng dẫn :
Bước 1 : ACP --> Display --> CSS :
Title : BBcode tooltip for SCEditor
Place : In the topic
Tool :
Hover :
Ưu điểm :
- Nhẹ , gọn , hiển thị rõ ràng cho người xem
- Sử dụng với nhiều chức năng khác
Với BBcode tooltip bạn có thể :
1. Hover hiện chú thích
2. Hover hiện ảnh, avatar (Cho vào thẻ img)
...
Hướng dẫn :
Bước 1 : ACP --> Display --> CSS :
- Code:
.tooltip {cursor : help;}[color=#222222][/color]
datatip {[color=#222222][/color]
-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.1);[color=#222222][/color]
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.1);[color=#222222][/color]
background: #fff;[color=#222222][/color]
border: 1.5px solid #D5D5D5;[color=#222222][/color]
box-shadow: 0 2px 2px rgba(0,0,0,0.1);[color=#222222][/color]
position: absolute;[color=#222222][/color]
padding: 12px ;[color=#222222][/color]
border-radius: 3px;[color=#222222][/color]
margin-top: 25px;[color=#222222][/color]
margin-left: -20px;[color=#222222][/color]
display: none;[color=#222222][/color]
width : auto;[color=#222222][/color]
color:black; [color=#222222][/color]
}[color=#222222][/color]
texttip { color:green;font-weight:bold;}
Title : BBcode tooltip for SCEditor
Place : In the topic
- Code:
$(document).on('ready', function () {[color=#222222][/color]
$(".sceditor-container").append('<div class="sceditor-dropdown sceditor-tooltip" style="display:none;margin-top: 27px;"><div><label for="tooltiptext" style="text-align:left;" >Text : </label><input type="text" id="tooltiptext" style = "float:left" placeholder="Nhập text...">[color=#222222][/color]
<label for="tooltipnote" style="text-align:left;">Note : </label><input type="text" id="tooltipnote" style = "float:left" placeholder="Nhập chú thích..."><input type="button" style = "margin-top: 15px;"class="button" value="insert"></div></div>'); [color=#222222][/color]
$('<a class= "sceditor-button bbcode-tooltip" title= "BBCode Tooltip"><div style="background-image:url(http://i12.servimg.com/u/f12/17/70/81/78/commen10.png)">BBCode Tooltip</div></a>').insertAfter('.sceditor-button-fahide').click(function () {[color=#222222][/color]
var f = $(".sceditor-tooltip").css("display");[color=#222222][/color]
if(f =='none') {$(".sceditor-tooltip").css({"left": $(this).position().left , "top": $(this).position().top, }).show(); }[color=#222222][/color]
else {$(".sceditor-tooltip").hide(); }[color=#222222][/color]
});[color=#222222][/color]
$(".sceditor-tooltip .button").click(function () { [color=#222222][/color]
var a = $(".sceditor-tooltip #tooltiptext").val();[color=#222222][/color]
var b = $(".sceditor-tooltip #tooltipnote").val();[color=#222222][/color]
$('#text_editor_textarea').sceditor("instance").insert('[tooltip='+b+']'+a+'[/tooltip]');[color=#222222][/color]
});[color=#222222][/color]
$('.post').each(function(){[color=#222222][/color]
var m = $(this).html().replace(/\[tooltip=(.*?)\](.*?)\[\/tooltip]/gi, '<span class="tooltip"><datatip>$1</datatip><texttip>*$2</texttip></span>');[color=#222222][/color]
$(this).html(m);[color=#222222][/color]
});[color=#222222][/color]
$('.post ').find('.tooltip').each(function(){[color=#222222][/color]
var s = $(this);[color=#222222][/color]
$(s).hover(function(){[color=#222222][/color]
$(s).find('datatip').show();[color=#222222][/color]
},function(){[color=#222222][/color]
$(s).find('datatip').hide();[color=#222222][/color]
});[color=#222222][/color]
});[color=#222222][/color]
});
