仿新浪qing文章发布时为文章添加标签

效果如图:
0130715141645
可以通过点击下面的 常用标签 添加 也可以通过文本框输入添加,回车后标签就会被贴上,添加时会自动判断当前标签是否已经添加,如果添加过刚不重复添加..没有则添加,限定最多添加5个标签。
HTML:

 <div id="page">
            文章标签:
            <div class="tagbox">
                <div id="tags">
                </div>
                <div class="clearfix"></div>
                <input type="text" value="" name="tag" style="border:none;outline:none"/>
 
                <div class="old">
                    常用标签:
                    <div class="clearfix"></div>
                    <span class="tag" id="234" name="标签">标签</span><span class="tag" id="34" name="风景">风景</span><span class="tag" id="21" name="音乐">音乐</span>
                </div>
            </div>
 
        </div>

CSS:

 *{
                margin: 0;
                padding: 0;
            }
            html,body{
                background:#fff;
            }
            #page{
                padding: 20px;
            }
            .clearfix{
                clear:both;
            }
            .tagbox{
                border: 1px solid #ccc;
                width: 200px;
 
                height: 200px;
                padding: 10px;
                position: relative;
            }
            .tag{
                background:lightblue;
                color: #fff;
                padding: 2px 5px;
                display: block;
                float: left;
                margin:5px 5px 5px 0;
            }
            #tags{
                margin-bottom: 10px;
                overflow-y: auto;
            }
            .old{
                position: absolute;
                bottom: 5px;
                left: 5px;
            }
            .tagbox span{
                cursor: pointer;
            }

JS:

 $(function(){
                $('.tagbox').click(function(){
                    $("input[name='tag']").focus();
                })
                $(document).on("click", "#tags span", function(){
                    $(this).remove();
                });
                $('.old span').click(function(){
                    ids=new Array();
                    var txt=$(this).attr('name');
                    var id=$(this).attr('id')
                    $('#tags .tag').each(function(){
                        ids+=$(this).attr('id')+','
                    });
                    if(ids==''){
                        ids=new Array();
                    }else{
                        ids = ids.split(",");
                    }
                    if(ids.length>5){
                        alert('标签最多添加5个哦!');
                        return false;
                    };
                    var exist=$.inArray(id,ids);
                    if(exist<0){
                        $('#tags').append('<span id='+id+' name='+txt+' class="tag">'+txt+'</span>')
                    }
                })
                $("input[name='tag']").bind('keyup',function(event){ 
                    if(event.keyCode==13){  
                        var txt=$(this).val();
                        if(txt!=''){
                            txts=new Array();
                            $('#tags .tag').each(function(){
                                txts+=$(this).attr('name')+','
                            });
                            if(txts==''){
                                txts=new Array();
                            }else{
                                txts = txts.split(",");
                            }
                            if(txts.length>5){
                                alert('标签最多添加5个哦!');
                                return false;
                            };
                            var exist=$.inArray(txt,txts);
                            if(exist<0){
                                $('#tags').append('<span name='+txt+' class="tag">'+txt+'</span>')
                                $(this).val('');
                            }else{
                                $(this).val('');
                            }
                        }
                    }     
                });   
            })

jquery 实现回到顶部

CSS:

<style>
            /**回到顶部按钮样式**/
            #top_btn{
                position:fixed;
                border-radius: 6px;
                right:140px;
                bottom:150px;
                padding:5px 10px;
                background:red;
                z-index: 50000; 
                display: block;
            }
 
        </style>

Jquery:

<script type="text/javascript">
            //回到顶部按钮
            $(document).ready(function(){
                var $top_btn = $('#top_btn');
 
                $top_btn.hide();
 
                $top_btn.click(function(){
                    $("body, html").animate({
                        scrollTop: "0px"
                    });
                })
 
                var $window = $(window);
 
                $window.scroll(function() {
                    if ($window.scrollTop() > 0) {
                        $top_btn.fadeIn();
                    } else {
                        $top_btn.fadeOut();
                    }
                });
            });
        </script>

所有代码:

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Jquery</title>
        <!--[if lt IE 9]><script src="http://cdn.outsiderla.me/js/html5.js" type="text/javascript"></script><![endif]-->
        <script src="http://cdn.outsiderla.me/js/jquery-1.10.2.min.js"></script>
        <style>
            /**回到顶部按钮样式**/
            #top_btn{
                position:fixed;
                border-radius: 6px;
                right:140px;
                bottom:150px;
                padding:5px 10px;
                background:red;
                z-index: 50000; 
                display: block;
            }
 
        </style>
    </head>
    <body>
        <br/>
 
        <div id="top_btn">top</div>
        <script type="text/javascript">
            //回到顶部按钮
            $(document).ready(function(){
                var $top_btn = $('#top_btn');
 
                $top_btn.hide();
 
                $top_btn.click(function(){
                    $("body, html").animate({
                        scrollTop: "0px"
                    });
                })
 
                var $window = $(window);
 
                $window.scroll(function() {
                    if ($window.scrollTop() > 0) {
                        $top_btn.fadeIn();
                    } else {
                        $top_btn.fadeOut();
                    }
                });
            });
        </script>
    </body>
</html>

jquery 常用网页效果 tabs 回到顶部…

html + css + jquery:

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Jquery</title>
        <!--[if lt IE 9]><script src="http://cdn.outsiderla.me/js/html5.js" type="text/javascript"></script><![endif]-->
        <script src="http://cdn.outsiderla.me/js/jquery-1.10.2.min.js"></script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            body{
                height: 1520px;
            }
            /**回到顶部按钮样式**/
 
            #top_btn{
                cursor: pointer;
                position:fixed;
                right:150px;
                bottom:50px;
                padding:5px 10px;
                background:#000;
                color: #fff;
                z-index: 50000; 
                display: block;
            }
            .tabs li{
                display: block;
                float: left;
                padding: 5px 10px;
                cursor:pointer;
            }
            .active{
                background: #000;
                color: #fff;
            }
            .botton_pan{
                cursor: pointer;
                background:#000;
                color: #fff;
                width: 200px;
                position: fixed;
                bottom:5px;
                left:5px;
                height:20px;
                padding: 20px;
            }
            .pan_active{
                bottom: 5px;
                left:5px;
                height: 100px; 
            }
 
        </style>
    </head>
    <body>
        <br/>
        <div style="margin:20px;">
            <ul class="tabs">
                <li class="active" cid="content1">24小时排行</li>
                <li class="" cid="content2">本周排行</li>
                <li class="" cid="content3">本月排行</li>
            </ul>
            <div style="clear:both;"></div>
            <div style="padding:10px;">
                <div id="content1" class="t_content" style="display: block;">24小时排行</div>
                <div id="content2" class="t_content" style="display:none;">本周排行</div>
                <div id="content3" class="t_content" style="display: none;">本月排行</div>
            </div>
        </div>
 
        <div class="botton_pan" id="bottom-pan">
            点击我......
            <p style="margin-top: 30px;">OK,好了,就一起看电影吧!</p>
        </div>
 
        <div id="top_btn" title="点击我回到顶部">top</div>
        <script type="text/javascript">
 
            $(document).ready(function(){
                //左下角显示隐藏
 
                $('#bottom-pan').click(function(){
                    if($(this).hasClass('pan_active')){
                        $(this).removeClass('pan_active');
                    }else{
                        $(this).addClass('pan_active');
                    }
                })
 
 
                //tabs 切换卡
                $('.tabs li').mouseover(function(){
                    $(this).addClass('active');
                    $(this).siblings('li').removeClass('active');
                    var content=$(this).attr('cid');
                    $('.t_content').css('display','none');
                    $('#'+content).css('display','block');
                }).mouseout(function(){
 
                })
 
                //回到顶部按钮
                var $top_btn = $('#top_btn');
 
                $top_btn.hide();
 
                $top_btn.click(function(){
                    $("body, html").animate({
                        scrollTop: "0px"
                    });
                })
 
                var $window = $(window);
 
                $window.scroll(function() {
                    if ($window.scrollTop() > 0) {
                        $top_btn.fadeIn();
                    } else {
                        $top_btn.fadeOut();
                    }
                });
            });
        </script>
    </body>
</html>

使用jquery获取表单数据

Jquery 获取表单数据

function get_form_value(){ 
/*获得TEXT.AREATEXT的值*/ 
   var textval = $("#text_id").attr("value");//或者
   var textval = $("#text_id").val(); 
/*获取单选按钮的值*/ 
   var valradio = $("input[@type=radio][@checked]").val(); 
/*获取复选框的值*/ 
var checkboxval = $("#checkbox_id").attr("value");
/*获取下拉列表中所有的值*/ 
   var selectval = $('#select_id').val();
//获取下拉列表选取中的值,此方法针对所有下拉框都起作用的
//此方法针对所有下拉框都起作用的
   //如果针对某ID进行获取,$(‘#id>option’).each()即可
 
 $('select>option').each(function(){
    if($(this).attr('selected')==true)
    {
    alert($(this).text());
    }
  })
}

jquery 幻灯片

jquery 实现的图片幻灯片
HTML:

<div id="focus">
                        <ul id="show">
                            <li  class="item">
                                <div style="left:0; top:0; width:260px; height:400px;"> 
                                    <a href="">
                                        <img src="/c/zhuanti/mre/Apps/Modules/Index/Tpl/Public/zhuanti/topic3/images/js_img.jpg" width="260" height="400" />
                                    </a> 
                                </div>
                            </li>
                            <li  class="item">
                                <div style="left:0; top:0; width:260px; height:400px;"> 
                                    <a href="">
                                        <img src="/zhuanti/topic3/images/js_img.jpg" width="260" height="400" />
                                    </a> 
                                </div>
                            </li>
                        </ul>
                    </div>

JS:

$(function() {
    var sWidth = $("#focus").width(); 
    var len = $("#focus ul#show li.item").length; 
    var index = 0;
    var picTimer;
 
    var btn = "<div class='btnBg'></div><div class='btn'>";
    for(var i=0; i < len; i++) {
        btn += "<span>" + (i+1) + "</span>";
    }
    btn += "</div>"
    $("#focus").append(btn);
    $("#focus .btnBg .btn").css("opacity",0.5);   
    $("#focus .btn span").live("click",function(){
        index = $("#focus .btn span").index(this);
        showPics(index);
        $(this).trigger("hover")
    //        setTimeout(1000000000000);
    }).eq(0).trigger("click");
    $("#focus ul#show").css("width",sWidth * (len + 1));
 
    $("#focus").hover(function() {
        clearInterval(picTimer);
    },function() {
        picTimer = setInterval(function() {
            if(index == len) { 
                showFirPic();
                index = 0;
            } else {
                showPics(index);
            }
            index++;
        },10000); 
    }).trigger("mouseleave");
 
    function showPics(index) { 
        var nowLeft = -index*sWidth; 
        $("#focus ul#show").stop(true,false).animate({
            "left":nowLeft
        },500); 
        $("#focus .btn span").removeClass("on").eq(index).addClass("on") 
 
    }
 
    function showFirPic() { 
        $("#focus ul#show").append($("#focus ul#show li.item:first").clone());
        var nowLeft = -len*sWidth;
        $("#focus ul#show").stop(true,false).animate({
            "left":nowLeft
        },500,function() {
            $("#focus ul#show").css("left","0");
            $("#focus ul#show li.item:last").remove();
        }); 
        $("#focus .btn span").removeClass("on").eq(0).addClass("on");
    }
});

css:

#focus {width:260px; height:400px; overflow:hidden; position:relative;margin: 0 auto;z-index: 0;}
#focus ul#show {height:400px; position:absolute;}
#focus ul#show li.item {float:left; width:260px; height:400px; overflow:hidden; position:relative;}
#focus ul#show li.item div {position:absolute; overflow:hidden;}
#focus ul#show li.item div img {margin: 0 auto;display: block;}
/*            #focus .btnBg {position:absolute; width:180px; height:40px; left:25px; bottom:25px; background:#000;}*/
#focus .btn {position:absolute; width:1000px; height:24px; left:20px; bottom:10px; padding-left:10px;}
#focus .btn span {display:inline-block; _display:inline; _zoom:1; width:20px; height:20px; line-height:20px; text-align:center; font-size:14px; font-family:"Microsoft YaHei",SimHei; margin-right:10px; cursor:pointer; color:#fff;background: #666666;}
#focus .btn span:hover{ background-color:#33CCFF;}
#focus .btn span.on {background:#000; color:#fcc;}

jQuery load用法

jquery的load函数是请求另一个文件并加载到当前DOM里的调用,load方法的完整格式是:load( url, [data], [callback] )(注意没有参数是GET方式请求,有参数则是 POST方法)。

url:是指要导入文件的地址。
data:可选参数;因为Load不仅仅可以导入静态的html文件,还可以导入动态脚本,例如PHP文件,所以要导入的是动态文件时,我们可以把要传递的参数放在这里。
callback:可选参数;是指调用load方法并得到服务器响应后,再执行的另外一个函数。
继续阅读“jQuery load用法”

Jquery 停止事件冒泡和阻止默认行为

jquery 停止事件冒泡

$(function(){
$("#sub").click(function(event){
var username=$("#username").val()
if(username==""){
$("#msg").html("用户名不能为空")
event.stopPropagation()
}
})
})

继续阅读“Jquery 停止事件冒泡和阻止默认行为”