zoukankan      html  css  js  c++  java
  • jQuery新浪微博表情插件教程

    1、引入css文件

    <link rel="stylesheet" type="text/css" href="jquery.sinaEmotion.css">

    2、引入jQuery.js 和jQuery.sinaEmotion.js

    <script src="jquery.min.js"></script>
    <script src="jquery.sinaEmotion.js"></script>

    3、html代码

      <form class="publish">
            <div id="result"></div>
            <textarea class="content" id="content">欢迎使用jQuery Sina Emotion[呵呵]</textarea><br>
            <input class="face" type="button" value="表情">
            <input class="submit" type="button" value="解析">
        </form>

    其中

    <div id="result"></div>

    是用来显示解析后的表情。

    <textarea class="content" id="content">欢迎使用jQuery Sina Emotion[呵呵]</textarea>

    textarea用来显示发送表情的文本域(也可以使用input type="text")

    有一点需要注意的是:显示表情的文本域或者文本框需要和发送表情按钮处于同一个form表单中。因为在jQuery.sinaEmotion.js中,是通过查找target所在的form表单中的textarea或者input,来显示表情的。

    $.fn.sinaEmotion = function(target) {
    
            target = target
                    || function() {
                        return $(this).parents('form').find(
                                'textarea,input[type=text]').eq(0);
                    };

    接下来是通过绑定".face"类名为表情按钮添加点击事件。

    $('.submit').bind({
                click : function(){
                    var content = $('#content').val();
                    $('#result').html(content).parseEmotion();
                }
            });
            $('.face').bind({
                click: function(event){
                    if(! $('#sinaEmotion').is(':visible')){
                        $(this).sinaEmotion();
                        event.stopPropagation();
                    }
                }    

     demo地址:

    http://pan.baidu.com/s/1bnnr1tt

  • 相关阅读:
    static关键字总结
    C、C++的内存分区与存储
    new、delete、malloc、free、realloc的区别
    Python3连接MySQL数据库之mysql-client
    Linux系统配置
    Windows环境下进行socket编程
    jQuery学习-事件之绑定事件(七)
    jQuery学习-事件之绑定事件(六)
    jQuery学习-事件之绑定事件(五)
    jQuery学习-事件之绑定事件(四)
  • 原文地址:https://www.cnblogs.com/superman66/p/4688610.html
Copyright © 2011-2022 走看看