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

  • ngao382_cover
    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 06.09.16 12:08; sửa lần 1.

  • Admin
    2. Re: [Code] tùy chọn thêm cho hashtags
    avatar ACP
    oài hay nhờ. nhưng sao xem hướng dẫn ko hiểu gì. loằng ngoằng thế


    --Chữ ký--
    www.danganhviet.com


    • - Tránh đặt tiêu đề các dạng như: Giúp em với, Code này hay nè, Vào xem nè anh em,...
      - Đăng bài phải có ảnh demo hoặc viết mô tả rõ ràng, code phải bỏ vào khung code
      - Không comment vô nghĩa, không spam, không chữi tục, không post link độc hại, không hide bài viết
      - Hạn chế viết tắt, viết chữ màu, chữ to, chữ in đậm
  • ngao382_cover
    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

  • Giựt
    4. Re: [Code] tùy chọn thêm cho hashtags
    avatar MOD
    @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

  • ngao382_cover
    kiểu 1 và kiểu 2 minh đã ngắt dòng bằng _____________________________

  • Sponsored content

Thông tin tác giả
avatar
MEM LV1
Bài viết :
38
Points :
55
Like :
5
Punbb
An toàn
Xem lý lịch thành viên
Thông tin tác giả
avatar
ACP
Bài viết :
331
Points :
641
Like :
107
Punbb
Quản trị
Status :
test
Xem lý lịch thành viên http://hotrofm.forumvi.com
Thông tin tác giả
avatar
MEM LV1
Bài viết :
38
Points :
55
Like :
5
Punbb
An toàn
Xem lý lịch thành viên
Thông tin tác giả
avatar
MOD
Bài viết :
273
Points :
440
Like :
89
Punbb
Cẩn thận
Status :
Giựt đẹp trai
Xem lý lịch thành viên
Thông tin tác giả
avatar
MEM LV1
Bài viết :
38
Points :
55
Like :
5
Punbb
An toàn
Xem lý lịch thành viên
Thông tin tác giả
Sponsored content
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết