[Code] tùy chọn thêm cho hashtags

avatar

ngao382_cover38
55
5
Punbb
An toàn
Thành viên chính thức
Thành viên chính thức

Bài viết :
38
Points :
55
Like :
5
Punbb
An toàn
Vào thẳng không màu mè hoa lá hẹ Smile



Tạo 1 JS : chọn :  In all the pages

Code:
$(function() {
  var a = document.getElementsByTagName('A'), b = document.createElement('DIV'), i = 0, j = a.length, actif, t;
  b.className = 'fa_hashtag-options';
  b.style.display = 'none';
  document.body.appendChild(b);
 
  for (; i<j; i++) {
    if (a[i].title && /\/tags\//.test(a[i].href) && /^#/.test(a[i].innerHTML)) {
      a[i].className += ' fa_hashtag';
    
      a[i].onclick = function() {
      
        if (actif != this) {
          actif = this, t = this.innerHTML;
          t.length > 24 && (t = t.slice(0, 25).replace(/^\s+|\s+$/g, '') + '...');
        
          b.style.left = $(this).offset().left + 'px';
          b.style.top = $(this).offset().top + 'px';
          b.innerHTML = '<div class="fa_hashtag-title">Options for <span class="fa_hashtag-tag">' + t + '</span></div><b>• </b><a href="' + this.href + '">View tagged subjects</a>' + (_userdata.session_logged_in ? '<form method="post" name="addtag_form" action="/profile?mode=editprofile&page_profil=tags&start&submit=1"><b>• </b><a href="#" onclick="this.parentNode.submit();return false;">Follow <span class="fa_hashtag-tag">' + t + '</span></a><input name="addtag" type="hidden" value="' + this.innerHTML.slice(1) + '"></form><b>• </b><a href="/profile?mode=editprofile&page_profil=tags">Manage tags</a>' : '');
        
          /none/.test(b.style.display) && (b.style.display = 'block');
        } else {
          actif = null;
          b.style.display = 'none';
        }
      
        return false;
      };
    }
  }
});

khi xong phần JS, tiếp đến vào CSS cho code vào cuối :

Code:
/* options drop down */
.fa_hashtag-options {
  color:#666;
  font-size:11px;
  font-family:Verdana,Arial,Helvetica,sans-serif;
  line-height:14px;
  background:#EEE;
  border:1px solid #CCC;
  border-radius:3px;
  box-shadow:0 3px 6px rgba(0, 0, 0, 0.175);
  margin-top:20px;
  padding:3px;
  position:absolute;
  z-index:100;
}
 
/* options title */
.fa_hashtag-title {
  font-size:12px;
  border-bottom:1px solid #CCC;
  padding-bottom:3px;
  margin-bottom:3px;
}
 
/* option links */
.fa_hashtag-options a {
  color:#333;
  text-decoration:none;
  display:inline-block;
  padding:2px 6px 2px 0;
}
 
.fa_hashtag-options a:hover {
  color:#666;
  text-decoration:underline;
}
 
/* option bullets */
.fa_hashtag-options b {
  color:#333;
  padding-left:6px;
}
 
/* option tags */
.fa_hashtag-tag {
  color:#000;
  font-weight:bold;
}

Thế là xong  

bạn nào muốn thêm cho nó có phong cách tàu lá cuối thỳ thêm code sau vào CSS :

Code:
/* hashtag styles */
a.fa_hashtag {
  color:#666;
  text-decoration:none;
  background-color:#EEE;
  border:1px solid #CCC;
  border-radius:3px;
  display:inline-block;
  padding:3px;
}
 
a.fa_hashtag:hover {
  color:#333;
  background-color:#DDD;
  border-color:#999;
}

Code:
http://i19.servimg.com/u/f19/18/21/41/30/style10.png

Thế là xong.
_____________________________________________________________________________________

loại 2 :
Cái nay trong khung :

tạo 1 JS : In all the pages

Code:
$(function(){
  if (!$.sceditor || /\/privmsg/.test(window.location.pathname)) return;
  var storage = window.localStorage, s = document.createElement('SELECT'), tags = '';
 
  if (storage && storage.faTags && storage.faTagsExp > +new Date - 29*59*1000 && storage.faTagsUser == _userdata.username) s.innerHTML = storage.faTags;
  else {
    $.get('/profile?mode=editprofile&page_profil=tags', function(d) {
      var h = $('form[name="tag_list"] a', d);
  
      if (h.length) {
        for (var i = 0, j = h.length, txt; i<j; i++) {
          txt = h[i].innerHTML.replace(/^\s+|\s+$/g,'');
          if (/^#/.test(txt)) {
            !tags && (tags += '<option value="">Select a tag</option>');
            tags += '<option value="'+ txt.slice(1) +'">' + (txt.length > 24 ? txt.slice(0, 25) + '...' : txt) + '</option>';
          }
        }
        s.innerHTML = tags;
      }
  
      if (storage) {
        storage.faTags = tags ? tags : 0;
        storage.faTagsUser = _userdata.username;
        storage.faTagsExp = +new Date;
      }
    });
  }
  
 
  $.sceditor.command.set('hashtag', {
    dropDown : function(editor, caller, callback) {
      var a = document.createElement('DIV'), b = document.createElement('INPUT'), c = document.createElement('INPUT');
      b.type = 'button';
      b.value = 'Insert';
      b.className = 'button';
    
      c.type = 'text';
      c.id = 'fa_hashtag';
    
      a.innerHTML = '<div><label for="fa_hashtag">Hashtag :</label></div>' + ( s.innerHTML ? '<div><label>Followed tags :</label></div>' : '' ) + '<div></div>';
      a.firstChild.appendChild(c);
      a.lastChild.appendChild(b);
    
      if (s.innerHTML != 0) {
        s.value = '';
        a.getElementsByTagName('DIV')[1].appendChild(s);
        s.onchange = function() {
          c.value = s.value;
        };
      }
    
      b.onclick = function() {
        c.value && callback(c.value);
        editor.closeDropDown(true);
      };
 
      editor.createDropDown(caller, 'inserthashtag', a);
    },
 
    exec : function(c) { tag(c, this) },
    txtExec : function(c) { tag(c, this) },
  
    tooltip : 'Insert a hashtag'
  });
 
  toolbar = toolbar.replace(/quote,/,'hashtag,quote,');
 
  function tag(c, e) {
    $.sceditor.command.get('hashtag').dropDown(e, c, function(tag) {
      e.insertText('#' + tag.replace(/^#/,'').replace(/[\xD7\xF7\x00-\x2F\x3A-\x40\x5B-\x60\x7B-\xBF]/g, '_') + ' ');
    });
  }
});

Css :

Code:
/* button image */
.sceditor-button-hashtag div { background-image:url(http://i19.servimg.com/u/f19/19/06/98/92/scehas11.png) !important }
 
/* drop down input */
#fa_hashtag {
  background:url(http://i19.servimg.com/u/f19/19/06/98/92/scehas11.png) no-repeat 3px 50% #FFF;
  padding-left:22px;
}


Code:
http://i19.servimg.com/u/f19/18/21/41/30/editor10.png



#NGAO382


Được sửa bởi ngao382_cover ngày 6/9/2016, 12:08 pm; sửa lần 1.
 Trả lời bài viết
avatar

Admin252
511
88
Punbb
Quản trị
Việt đẹp trai
Founder
Founder

Bài viết :
252
Points :
511
Like :
88
Punbb
Quản trị
Việt đẹp trai
oài hay nhờ. nhưng sao xem hướng dẫn ko hiểu gì. loằng ngoằng thế
 Trả lời bài viết
avatar

ngao382_cover38
55
5
Punbb
An toàn
Thành viên chính thức
Thành viên chính thức

Bài viết :
38
Points :
55
Like :
5
Punbb
An toàn
làm cho đối phương bối rối tý ấy mà  

Dung 1 js và 1 css là dc rồi, bài viết có 2 loại nếu cho 2 css và 2 jss vao 1 chắc phải nổ tung cái forum Smile
 Trả lời bài viết
avatar

Giựt238
388
80
Punbb
Cẩn thận
Éo có đối thủ
Thành viên thân thiết
Thành viên thân thiết

Bài viết :
238
Points :
388
Like :
80
Punbb
Cẩn thận
Éo có đối thủ
ngao382_cover đã viết:làm cho đối phương bối rối tý ấy mà  

Dung 1 js và 1 css là dc rồi, bài viết có 2 loại nếu cho 2 css và 2 jss vao 1 chắc phải nổ tung cái forum Smile

 Trả lời bài viết
avatar

ngao382_cover38
55
5
Punbb
An toàn
Thành viên chính thức
Thành viên chính thức

Bài viết :
38
Points :
55
Like :
5
Punbb
An toàn
kiểu 1 và kiểu 2 minh đã ngắt dòng bằng _____________________________
 Trả lời bài viết
Điểm 4.6/5 dựa vào 87 đánh giá

Có Thể Bạn Quan Tâm

Đang tải...