Search found 2 matches for jquery

 26.07.14 0:04

Cập nhật mod Topic prefixes cũ của Việt K. Mod này sẽ tạo ra một danh mục các tiền tố (prefix) cho người dùng lựa chọn khi họ đăng bài viết.

Topics tagged under jquery on DEVs forumvi 3GS5LhP

Thay code prefix của ViệtK bằng code này:
Code:
var prefixes = ["Thông báo", "Tài liệu", "Bàn luận", "Chia sẻ", "Giải trí", "Truyện", "Tin tức", "Video - Clip", "Âm nhạc", "Bầu chọn", "Kiến thức", "Kĩ năng", "Tranh luận"]; //danh sách các prefix
var _pm = false; //true: cho phép dùng prefix khi gửi tin nhắn
/*!
 * Topic prefixes - Copyright © 2011 by Viet K - chinhphuc.info
 * Fix by Zzbaivong - devs.forumvi.com
 */
$(function() {
    var chk = false;
    if (_pm) chk = /\privmsg/.test(location.href);
    if (/\/post/.test(location.href) || chk) {
        var $select = $("<select>", {
            id: "prefix",
            style: "margin-top: 2px; margin-right:5px; height: 21px",
            size: 1,
            html: '<option value="">(Chọn tiền tố)</option>'
        });
        $.each(prefixes, function(i, val) {
            $("<option>", {
                value: val,
                text: val
            }).appendTo($select);
        });
        var $subject = $("input[name='subject']");
        $select.insertBefore("input[name='subject']");
        $subject.width($subject.width() - $select.width() - 5);
        var testPrefix = new RegExp("^\\[(" + prefixes.join("|") + ")\\]");
        var title = $subject.val();
        if (testPrefix.test(title)) {
            var prefix = title.match(/^\[([^\[\]]+)\]\s*(.*)/);
            $select.find("option[value='" + prefix[1] + "']").attr("selected", true);
            console.log($select.find("option[value='" + prefix[1] + "']"));
            $subject.val(prefix[2]);
        }
        $("input[name='post']").click(function() {
            if ($subject.val().trim() !== "" && $select.val() !== "") $subject.val("[" + $select.val() + "] " + $subject.val())
        });
    }
});

Tags: #mod #javascript #jquery #prefix

[Hỏi đáp] Slideshow đơn giản cho mod_new

Diễn đàn: Đã giải đápTrả lời: 12Lượt xem: 2464

 29.03.14 19:39

Demo


http://jsfiddle.net/baivong/WP5Sg/show/


Source


HTML


Code:
<div id="zzSlide">
    <div class="zzContent">
        <div class="zzItem">
            <div class="zzImage" style="background-image:url(http://i57.servimg.com/u/f57/16/18/15/10/xcv11.jpg)"></div>
            <div class="zzCaption">Divide and Fight 2.21</div>
        </div>
        <div class="zzItem">
            <div class="zzImage" style="background-image:url(http://i57.servimg.com/u/f57/16/18/15/10/cfb10.jpg)"></div>
            <div class="zzCaption">Divide and Fight 2.20d</div>
        </div>
        <div class="zzItem">
            <div class="zzImage" style="background-image:url(http://i57.servimg.com/u/f57/16/18/15/10/1136.jpg)"></div>
            <div class="zzCaption">Divide and Fight 2.19c</div>
        </div>
        <div class="zzItem">
            <div class="zzImage" style="background-image:url(http://i57.servimg.com/u/f57/16/18/15/10/cv_bmp10.jpg)"></div>
            <div class="zzCaption">Divide and Fight 2.19b</div>
        </div>
        <div class="zzItem">
            <div class="zzImage" style="background-image:url(http://i72.servimg.com/u/f72/16/18/15/10/untit250.jpg)"></div>
            <div class="zzCaption">Divide and Fight 2.18e</div>
        </div>
    </div>
    <div class="zzBullets"></div>
</div>


CSS


Code:
#zzSlide {
    margin: 0 auto;
    width: 235px;
}
#zzSlide > div.zzContent {
    position: relative;
    width: inherit;
    height: 200px;
}
#zzSlide div.zzItem {
    position: absolute;
    left: 0;
    top: 0;
    width: inherit;
}
#zzSlide div.zzImage {
    background: none no-repeat center center/100% 100% #333;
    height: 155px;
    width: inherit;
    border: 5px solid #FFF;
    outline: 1px solid #DDD
}
#zzSlide div.zzCaption {
    background: #FFF;
    padding: 5px 0;
}
#zzSlide > div.zzBullets {
    text-align: center;
}
#zzSlide .zzBullet {
    display: none;
}
#zzSlide .zzBullet + label {
    width: 7px;
    height: 7px;
    outline: 1px solid #DDD;
    background: #FFF;
    display: inline-block;
    outline-offset: 2px;
    margin: 0 7px;
    cursor: pointer;
}
#zzSlide .zzBullet:checked + label {
    background: #666;
}


Javascript


Code:
/*!
  zzSlide v0.2.0
  A Simple jQuery Slideshow
  Copyleft (c) 2014+ Zzbaivong
  http://devs.forumvi.com  
*/
var zzSlide = {
    start: function() {
        zzSlide.run = setInterval(function() {
            zzSlide.current++;
            zzSlide.current == zzSlide.size && (zzSlide.current = 0);
            $("#zzSlide .zzItem").fadeOut('slow');
            $("#zzSlide .zzItem").eq(zzSlide.current).fadeIn('slow');
            $("#zzSlide .zzBullet").eq(zzSlide.current).prop("checked", true);
        }, 3000);
    },
    current: 0,
    size: $("#zzSlide .zzItem").length,
    run: "",
    init: function() {
        $("#zzSlide .zzItem").each(function(index) {
            $(this).attr({
                "data-bullet": index
            });
            $("#zzSlide .zzBullets").append('<input type="radio" class="zzBullet" name="zzbullet" value="' + index + '" id="zzbullet' + index + '" /><label for="zzbullet' + index + '"></label></div>');
        });
        $("#zzSlide .zzItem:gt(0)").hide();
        $("#zzSlide .zzBullet:eq(0)").prop("checked", true);
        zzSlide.start();
        $("#zzSlide").hover(function() {
            clearInterval(zzSlide.run);
        }, function() {
            zzSlide.start();
        });
        $("#zzSlide .zzBullet").on("change", function() {
            $("#zzSlide .zzItem").fadeOut(1E3);
            $("#zzSlide .zzItem[data-bullet='" + this.value + "']").fadeIn('slow');
            zzSlide.current = this.value;
        });
    }
};
$(function() {
    zzSlide.init();
});

Tags: #jquery #snippet


Back to top