动态创建表格案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02-jQuery-动态创建表格案例</title> <script src="jquery-1.11.3.js"></script> <style> * { padding: 0; margin: 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; } th,td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微软雅黑"; color: #fff; } td { font: 14px "微软雅黑"; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } </style> <script> var data = [{ name: "传智播客", url: "http://www.itcast.cn", type: "IT最强培训机构" },{ name: "黑马程序员", url: "http://www.itheima.com", type: "大学生IT培训机构" },{ name: "传智前端学院", url: "http://web.itcast.cn", type: "前端的黄埔军校" }]; $(function(){ //第一种:动态创建表格的方式,使用拼接html的方式 (推荐) // var html = ""; // for( var i = 0; i < data.length; i++ ) { // html += "<tr>"; // html += "<td>" + data[i].name + "</td>" // html += "<td>" + data[i].url + "</td>" // html += "<td>" + data[i].type + "</td>" // html += "</tr>"; // } // $("#J_TbData").html(html); //第二种: 动态创建表格的方式,使用动态创建dom对象的方式 //清空所有的子节点 $("#J_TbData").empty(); //自杀 // $("#J_TbData").remove(); for( var i = 0; i < data.length; i++ ) { //动态创建一个tr行标签,并且转换成jQuery对象 var $trTemp = $("<tr></tr>"); //往行里面追加 td单元格 $trTemp.append("<td>"+ data[i].name +"</td>"); $trTemp.append("<td>"+ data[i].url +"</td>"); $trTemp.append("<td>"+ data[i].type +"</td>"); // $("#J_TbData").append($trTemp); $trTemp.appendTo("#J_TbData"); } }); </script> </head> <body> <table> <thead> <tr> <th>标题</th> <th>地址</th> <th>说明</th> </tr> </thead> <tbody id="J_TbData"> </tbody> </table> <br> <!-- 整个表格:table --> <table> <thead> <tr> <!-- tr:table row:表格的行 --> <th>一个格</th> <th>一个格</th> <th>一个格</th> </tr> </thead> <tbody> <tr> <!-- rowspan:跨度两个行 --> <td rowspan="2">一个格</td> <!-- clospan:跨度两个列 --> <td colspan="2">一个格</td> <!-- <td>一个格</td> --> </tr> <tr> <!-- <td>sd</td> --> <td>ss</td> <td>ss</td> </tr> </tbody> </table> </body> </html>
回到顶部案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>05-jQuery- 回到顶部案例</title> <style> .bk-top-box { position: fixed; bottom: 40px; right: 10px; cursor: pointer; } </style> <script src="jquery-1.11.3.js"></script> <script> $(function(){ $("#J-bk-top").on('click',function(){ $(window).scrollTop(0); $(window).scrollLeft(0); }); $("#J_Box").on('click','h1',function(){ //this jQuery的事件响应方法中,this指向被点击的 dom对象 this.innerHTML += '-'; //dom对象转换成 jQuery对象 $(this).text($(this).text() + 1); }); }); </script> </head> <body> <div class="bk-top-box" id="J-bk-top"> <img src="imgs/bk-top3.jpg" height="44" width="44" alt=""> </div> <!-- ctrl + shift + g 自动包裹标签 --> <div id="J_Box"> <h1>测试1</h1> <h1>测试2</h1> <h1>测试3</h1> <h1>测试</h1> <h1>测试</h1> </div> </body> </html>
城市选择案例【权限管理】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>04-jQuery-城市选择案例</title> <style type="text/css" media="screen"> select { width: 200px; background-color: teal; height: 200px; font-size: 20px; } .btn-box { width: 30px; display: inline-block; vertical-align: top; } </style> <script src="jquery-1.11.3.js"></script> <script> // $(function(){ // $("#btn-sel-none").on('click',function(){ // $("#tar-city option").appendTo('#src-city'); // }); // $("#btn-sel-all").on('click',function(){ // $("#src-city option").appendTo('#tar-city'); // }); // $("#btn-sel").on('click',function(){ // $("#src-city option:selected").appendTo('#tar-city'); // }); // $("#btn-back").on('click',function(){ // $("#tar-city option:selected").appendTo('#src-city'); // }); // }); $(function(){ $("#btn-sel-all").on('click',function(){ //把所有的 城市从左边 移动到右边select中 $("#src-city option").appendTo("#tar-city"); }); $("#btn-sel-none").on('click',function(){ //把所有的 城市从左边 移动到右边select中 $("#tar-city option").appendTo("#src-city"); }); $("#btn-sel").on('click',function(){ //把所有的 城市从左边 移动到右边select中 $("#src-city option:selected").appendTo("#tar-city"); }); $("#btn-back").on('click',function(){ //把所有的 城市从左边 移动到右边select中 $("#tar-city option:selected").appendTo("#src-city"); }); }); </script> </head> <body> <select id="src-city" name="src-city" multiple> <option value="1">北京</option> <option value="2">上海</option> <option value="3">深圳</option> <option value="4">广州</option> <option value="5">西红柿</option> </select> <div class="btn-box"> <button id="btn-sel-all"> >> </button> <button id="btn-sel-none"> << </button> <button id="btn-back"> < </button> <button id="btn-sel"> ></button> </div> <select id="tar-city" name="tar-city" multiple> </select> </body> </html>
省市选择
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>06-jQuery-省市选择</title> <style> select { width: 200px; font-size: 14px; } </style> <script src="jquery-1.11.3.js"></script> <script> var CITYS = { "北京": ["北京"], "上海": ["上海"], "天津": ["天津", "塘沽"], "重庆": ["重庆", "涪陵", "江津", "巫山"], "河北": ["石家庄", "张家口", "承德", "秦皇岛", "唐山", "廊坊", "保定", "沧州", "衡水", "邢台", "邯郸", "张北", "蔚县", "丰宁", "围场", "怀来", "遵化", "青龙", "坝县", "乐亭", "饶阳", "黄骅", "南宫"], "山西": ["太原", "大同", "朔州", "阳泉", "长治", "晋城", "忻州", "晋中", "临汾", "运城", "吕梁", "右玉", "河曲", "五台山", "五寨", "兴县", "原平", "离石", "榆社", "隰县", "介休", "候马", "阳城"], "内蒙古": ["呼和浩特", "包头", "乌海", "赤峰", "通辽", "呼伦贝尔", "鄂尔多斯", "乌兰察布", "巴彦淖尔", "兴安盟", "锡林郭勒盟", "阿拉善盟", "额尔古纳右旗", "图里河", "满州里", "海拉尔", "小二沟", "新巴尔虎右旗", "新巴尔虎左旗", "博克图", "扎兰屯", "科前旗阿尔山", "索轮", "乌兰浩特", "东乌珠穆沁旗", "额济纳旗", "拐子湖", "巴音毛道", "阿拉善右旗", "二连浩特", "那仁宝力格", "满都拉", "阿巴嘎旗", "苏尼特左旗", "海力素", "朱日和", "乌拉特中旗", "百灵庙", "四子王旗", "化德", "集宁", "吉兰太", "临河", "鄂托克旗", "东胜", "伊金霍洛旗", "阿拉善左旗", "西乌珠穆沁旗", "扎鲁特旗", "巴林左旗", "锡林浩特", "林西", "开鲁", "多伦", "翁牛特旗", "宝国图"], "辽宁": ["沈阳", "朝阳", "阜新", "铁岭", "抚顺", "本溪", "辽阳", "鞍山", "丹东", "大连", "营口", "盘锦", "锦州", "葫芦岛", "彰武", "开原", "清原", "叶柏寿", "新民", "黑山", "章党", "桓仁", "绥中", "兴城", "岫岩", "宽甸", "瓦房店", "庄河"], "吉林": ["长春", "白城", "松原", "吉林", "四平", "辽源", "通化", "白山", "延吉", "乾安", "前郭尔罗斯", "通榆", "长岭", "三岔河", "双辽", "蛟河", "敦化", "汪清", "梅河口", "桦甸", "靖宇", "东岗", "松江", "临江", "集安", "长白"], "黑龙江": ["哈尔滨", "齐齐哈尔", "黑河", "大庆", "伊春", "鹤岗", "佳木斯", "双鸭山", "七台河", "鸡西", "牡丹江", "绥化", "大兴安岭", "漠河", "塔河", "新林", "呼玛", "嫩江", "孙吴", "北安", "克山", "富裕", "海伦", "明水", "富锦", "泰来", "安达", "铁力", "依兰", "宝清", "肇州", "通河", "尚志", "虎林", "绥芬河"], "江苏": ["南京", "徐州", "连云港", "宿迁", "淮安", "盐城", "扬州", "泰州", "南通", "镇江", "常州", "无锡", "苏州", "赣榆", "盱眙", "淮阴", "射阳", "高邮", "东台", "吕泗", "溧阳", "吴县东山"], "浙江": ["杭州", "湖州", "嘉兴", "舟山", "宁波", "绍兴", "衢州", "金华", "台州", "温州", "丽水", "平湖", "慈溪", "嵊泗", "定海", "嵊县", "鄞县", "龙泉", "洪家", "玉环"], "安徽": ["合肥", "宿州", "淮北", "阜阳", "亳州", "蚌埠", "淮南", "滁州", "马鞍山", "芜湖", "铜陵", "安庆", "黄山", "六安", "巢湖", "池州", "宣城", "砀山", "宿县", "寿县", "霍山", "桐城", "芜湖县", "宁国", "屯溪"], "福建": ["福州", "南平", "三明", "莆田", "泉州", "厦门", "漳州", "龙岩", "宁德", "邵武", "武夷山市", "浦城", "建瓯", "福鼎", "泰宁", "长汀", "上杭", "永安", "屏南", "平潭", "崇武", "东山"], "江西": ["南昌", "九江", "景德镇", "鹰潭", "新余", "萍乡", "赣州", "上饶", "抚州", "宜春", "吉安", "修水", "宁冈", "遂川", "庐山", "波阳", "樟树", "贵溪", "玉山", "南城", "广昌", "寻乌"], "山东": ["济南", "聊城", "德州", "东营", "淄博", "潍坊", "烟台", "威海", "青岛", "日照", "临沂", "枣庄", "济宁", "泰安", "莱芜", "滨州", "菏泽", "惠民县", "羊角沟", "长岛", "龙口", "成山头", "朝城", "泰山", "沂源", "莱阳", "海阳", "石岛", "兖州", "莒县"], "河南": ["郑州", "三门峡", "洛阳", "焦作", "新乡", "鹤壁", "安阳", "濮阳", "开封", "商丘", "许昌", "漯河", "平顶山", "南阳", "信阳", "周口", "驻马店", "济源", "卢氏", "孟津", "栾川", "西峡", "宝丰", "西华", "固始"], "湖北": ["武汉", "十堰", "襄樊", "荆门", "孝感", "黄冈", "鄂州", "黄石", "咸宁", "荆州", "宜昌", "随州", "仙桃", "天门", "潜江", "神农架", "恩施", "郧西", "房县", "老河口", "枣阳", "巴东", "钟祥", "广水", "麻城", "五峰", "来风", "嘉鱼", "英山"], "湖南": ["长沙", "张家界", "常德", "益阳", "岳阳", "株洲", "湘潭", "衡阳", "郴州", "永州", "邵阳", "怀化", "娄底", "吉首", "桑植", "石门", "南县", "沅陵", "安化", "沅江", "平江", "芷江", "双峰", "南岳", "通道", "武冈", "零陵", "常宁", "道县"], "广东": ["广州", "清远", "韶关", "河源", "梅州", "潮州", "汕头", "揭阳", "汕尾", "惠州", "东莞", "深圳", "珠海", "中山", "江门", "佛山", "肇庆", "云浮", "阳江", "茂名", "湛江", "南雄", "连县", "佛冈", "连平", "广宁", "增城", "五华", "惠来", "南澳", "信宜", "罗定", "台山", "电白", "徐闻"], "广西": ["南宁", "桂林", "柳州", "梧州", "贵港", "玉林", "钦州", "北海", "防城港", "崇左", "百色", "河池", "来宾", "贺州", "融安", "凤山", "都安", "蒙山", "那坡", "靖西", "平果", "桂平", "龙州", "灵山", "东兴", "涠洲岛"], "海南": ["海口", "三亚", "文昌", "琼海", "万宁", "东方", "澄迈", "定安", "儋县", "琼中", "陵水", "西沙", "昌江", "乐东", "白沙", "临高"], "四川": ["成都", "广元", "绵阳", "德阳", "南充", "广安", "遂宁", "内江", "乐山", "自贡", "泸州", "宜宾", "攀枝花", "巴中", "达川", "资阳", "眉山", "雅安", "阿坝", "甘孜", "西昌", "石渠", "若尔盖", "德格", "色达", "道孚", "马尔康", "红原", "小金", "松潘", "都江堰", "平武", "巴塘", "新龙", "理塘", "稻城", "康定", "峨眉山", "木里", "九龙", "越西", "昭觉", "雷波", "盐源", "会理", "万源", "阆中", "奉节", "梁平", "万县市", "叙永", "酉阳"], "贵州": ["贵阳", "六盘水", "遵义", "安顺", "毕节", "铜仁", "凯里", "都匀", "兴义", "威宁", "盘县", "桐梓", "习水", "湄潭", "思南", "黔西", "三穗", "兴仁", "望谟", "罗甸", "独山", "榕江"], "云南": ["昆明", "曲靖", "玉溪", "保山", "昭通", "丽江", "思茅", "临沧", "德宏", "怒江", "迪庆", "大理", "楚雄", "红河", "文山州", "德钦", "贡山", "中甸", "维西", "华坪", "会泽", "腾冲", "元谋", "沾益", "瑞丽", "景东", "泸西", "耿马", "澜沧", "景洪", "元江", "勐腊", "江城", "蒙自", "屏边", "广南", "勐海"], "西藏": ["拉萨", "那曲", "昌都", "林芝", "山南", "日喀则", "阿里", "狮泉河", "改则", "班戈", "安多", "普兰", "申扎", "当雄", "拉孜", "尼木", "泽当", "聂拉木", "定日", "江孜", "错那", "隆子", "帕里", "索县", "丁青", "嘉黎", "洛隆", "波密", "左贡", "察隅"], "陕西": ["西安", "延安", "铜川", "渭南", "咸阳", "宝鸡", "汉中", "榆林", "安康", "商洛", "定边", "吴旗", "横山", "绥德", "长武", "洛川", "武功", "华山", "略阳", "佛坪", "镇安", "石泉"], "甘肃": ["兰州", "嘉峪关", "金昌", "白银", "天水", "武威", "酒泉", "张掖", "庆阳", "安西", "陇南", "临夏", "甘南", "马鬃山", "敦煌", "玉门镇", "金塔", "高台", "山丹", "永昌", "民勤", "景泰", "靖远", "榆中", "临洮", "环县", "平凉", "西峰镇", "玛曲", "夏河合作", "岷县", "定西"], "青海": ["西宁", "海东", "海北", "海南", "黄南", "果洛", "玉树", "海西", "茫崖", "冷湖", "祁连", "大柴旦", "德令哈", "刚察", "门源", "格尔木", "都兰", "共和县", "贵德", "民和", "兴海", "同德", "同仁", "杂多", "曲麻莱", "玛多", "清水河", "达日", "河南", "久治", "囊谦", "班玛"], "宁夏": ["银川", "石嘴山", "吴忠", "固原", "中卫", "惠农", "陶乐", "中宁", "盐池", "海源", "同心", "西吉"], "新疆": ["乌鲁木齐", "克拉玛依", "石河子", "阿拉尔", "喀什", "阿克苏", "和田", "吐鲁番", "哈密", "克孜勒", "博尔塔拉", "昌吉", "库尔勒", "伊犁", "塔城", "阿勒泰", "哈巴河", "吉木乃", "福海", "富蕴", "和布克赛尔", "青河", "阿拉山口", "托里", "北塔山", "温泉", "精河", "乌苏", "蔡家湖", "奇台", "昭苏", "巴仑台", "达板城", "七角井", "库米什", "巴音布鲁克", "焉耆", "拜城", "轮台", "库车", "吐尔尕特", "乌恰", "阿合奇", "巴楚", "柯坪", "铁干里克", "若羌", "塔什库尔干", "莎车", "皮山", "民丰", "且末", "于田", "巴里坤", "伊吾", "伊宁"], "香港": ["香港"], "澳门": ["澳门"], "台湾": ["台北", "台中", "高雄"] }; $(function(){ //初始化 所有的省的数据 $.each(CITYS,function(key, value){ var $option = $("<option></option>"); $option.text(key);//获取当前省的名字 $("#province").append($option); }); //当省的数据发生改变的时候执行 加载市的数据 $("#province").on("change",function(){ //拿到当前省的名字 var pro = $("#province option:selected").text(); //清空原有的city数据 $("#city").empty() //根据省名,拿到所有的城市,然后根据城市创建option添加到cityselect中 $.each(CITYS[pro],function(i, value){ $("#city").append("<option>"+ value +"</option>"); }); }); //上来后初始化一下城市的数据 $("#province").triggerHandler('change'); }); </script> </head> <body> <select name="province" id="province"> </select> <select name="city" id="city"> </select> </body> </html>
QQ微博
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>腾讯微博</title> <style type="text/css"> body { margin: 0px; background: url('imgs/wrapBg.jpg') no-repeat #EBF1F1; } #logo { margin: 30px 0 0 300px; } #myBody { width: 800px; height: 200px; border: 1px solid #000; } #myBdLeft { width: 590px; height: 100%; background: #fff; float: left; } #talkBox { text-align: left; margin: 0 0 0 25px; } #msgTxt { width: 540px; height: 80px; overflow: hidden; font-family: Tahoma, Arial; font-size: 14px; border: 1px solid gray; } #talkBox h2 { text-align: left; padding: 0px; margin: 0px; font: normal normal normal 18px/29px 'MicroSoft YaHei', SimHei; } #funBox { width: 540px; } #funBox a { color: #000; text-decoration: none; font-size: 14px; } .creatNew, .atSome, .insertFace, .uploadPic, .uploadVideo { background-position: -170px -33px; display: inline-block; height: 16px; padding-left: 18px; } .countTxt { color: #999; float: right; line-height: 33px; margin: 0 15px 0 0; } .countTxt em { font-family: Georgia, Tahoma, Arial; font-size: 26px; position: relative; top: -5px; vertical-align: middle; } .sendBtn { float: right; margin: 0 20px 0 0; padding: 0px; background: url(imgs/bg1.png) -117px -165px no-repeat; line-height: 33px; margin-left: 14px; height: 30px; width: 112px; border: 0px; cursor: pointer; } .sendBtn:hover { background: url(imgs/bg1.png) 0px -195px no-repeat; } #btnCloFri { cursor: pointer; } #myBdRight { background: #CCEBF4; width: 210px; height: 100%; float: right; } .atSomeList { position: absolute; background-color: #f0f0f0; border: 1px solid #a0a0a0; width: 60px; list-style: none; } .atSomeList a { text-decoration: none; color: #c0c0c0; } .showFace { position: absolute; background-color: #f0f0f0; border: 1px solid #a0a0a0; width: 200px; } </style> <!-- <script src="jquery-1.11.3.js" type="text/javascript"></script> --> <script src="jquery-1.8.2.min.js"></script> <script src="js/06weibo.js" type="text/javascript"> </script> </head> <body> <imgs id="logo" src="imgs/b3_100901.png" alt="" /> <center> <div id="myBody"> <div id="myBdLeft"> <div id="talkBox"> <h2> <a>夏天来了,你懂得......</a></h2> <textarea id="msgTxt"></textarea> <div id="funBox"> <a href="javascript:void(0);" class="creatNew">话题</a> <a href="javascript:void(0);" class="atSome">朋友</a> <a href="javascript:void(0);" class="insertFace">表情</a> <a href="javascript:void(0);" class="uploadPic">照片</a> <a href="javascript:void(0);" class="uploadVideo">视频</a> </div> <div id="sendBox"> <input type="button" class="sendBtn" value="" /> <span class="countTxt">还能输入<em>140</em>字</span> </div> </div> </div> <div id="myBdRight"> </div> </div> </center> </body> </html>
var friendsList = ['中国', '日本', '韩国', '朝鲜','蒙古']; var userFaces = { '0.gif': '微笑', '1.gif': '撇嘴', '2.gif': '色', '3.gif': '发呆', '4.gif': '得意', '5.gif': '流泪', '6.gif': '害羞', '7.gif': '闭嘴', '8.gif': '睡', '9.gif': '大哭', '10.gif': '尴尬', '11.gif': '发怒', '12.gif': '调皮', '13.gif': '呲牙', '14.gif': '惊讶', '15.gif': '难过', '16.gif': '酷', '17.gif': '冷汗', '18.gif': '抓狂', '19.gif': '吐', '20.gif': '偷笑', '21.gif': '可爱', '22.gif': '白眼', '23.gif': '傲慢', '24.gif': '饥饿', '25.gif': '困', '26.gif': '惊恐', '27.gif': '流汗', '28.gif': '憨笑', '29.gif': '大兵', '30.gif': '奋斗', '31.gif': '咒骂', '32.gif': '疑问', '33.gif': '嘘', '34.gif': '晕', '35.gif': '折磨', '36.gif': '衰', '37.gif': '骷髅', '38.gif': '敲打', '39.gif': '再见', '40.gif': '擦汗', '41.gif': '抠鼻', '42.gif': '鼓掌', '43.gif': '糗大了', '44.gif': '坏笑', '45.gif': '左哼哼', '46.gif': '右哼哼', '47.gif': '哈欠', '48.gif': '鄙视', '49.gif': '委屈', '50.gif': '快哭了', '51.gif': '阴险', '52.gif': '亲亲', '53.gif': '吓', '54.gif': '可怜', '55.gif': '菜刀', '56.gif': '西瓜', '57.gif': '啤酒', '58.gif': '篮球 ', '59.gif': '乒乓', '60.gif': '咖啡', '61.gif': '饭', '62.gif': '猪头', '63.gif': '玫瑰', '64.gif': '凋谢', '65.gif': '示爱', '66.gif': '爱心', '67.gif': '心碎', '68.gif': '蛋糕', '69.gif': '闪电', '70.gif': '炸弹', '71.gif': '刀', '72.gif': '足球', '73.gif': '瓢虫', '74.gif': '便便', '75.gif': '月亮', '76.gif': '太阳', '77.gif': '礼物', '78.gif': '拥抱', '79.gif': '强', '80.gif': '弱', '81.gif': '握手', '82.gif': '胜利', '83.gif': '抱拳', '84.gif': '勾引', '85.gif': '拳头', '86.gif': '差劲', '87.gif': '爱你', '88.gif': 'NO', '89.gif': 'OK', '90.gif': '爱情', '91.gif': '飞吻', '92.gif': '跳跳', '93.gif': '发抖', '94.gif': '怄火', '95.gif': '转圈', '96.gif': '磕头', '97.gif': '回头', '98.gif': '跳绳', '99.gif': '挥手', '100.gif': '激动', '101.gif': '街舞', '102.gif': '献吻', '103.gif': '左太极', '104.gif': '右太极', '105.gif': '淡定', '106.gif': '晕', '107.gif': '不满', '108.gif': '睡觉', '109.gif': '小调皮', '110.gif': '咒骂', '111.gif': '发怒', '112.gif': '偷笑', '113.gif': '微笑', '114.gif': '震惊', '115.gif': '囧' }; $(function(){ }); window.onload = function() { //初始化atsome initAtSome(); //初始化图片 initFaces(); }; function initFaces(){ var str = "<div class='showFace'>"; for( var key in userFaces) { str += "<img alt='"+ userFaces[key] +"' src='faces/"+key+"'>" } str += "</div>"; var $faceDiv = $(str); $faceDiv.appendTo( ".insertFace" ).hide().css({ left: $( ".insertFace" ).offset.left + "px", top: $(".insertFace").offset.top + 16 + "px", }).find( "img" ).click(function() { setText( "[" + $(this).attr("alt") + "]" ); }); $(".insertFace").hover(function() { $faceDiv.show(); },function() { $faceDiv.hide(); }); } function initAtSome() { var h = $(".atSome").height(); var str = ""; str += "<ul class='atSomeList'>"; for( var i = 0; i < friendsList.length; i++ ) { str += "<li>"; str += "<a herf='javascript:'>@"+friendsList[i]+"</a>"; str += "</li>" } str += "</ul>"; var $atSomeList = $(str); $(".atSome").append($atSomeList).hover(function(){ $atSomeList.show(); },function(){ $atSomeList.hide(); }); $atSomeList.css({ top: ($(".atSome").offset().top + h - 15) +"px", left: ($(".atSome").offset().left + 14) + "px" }).hide().find("a").click(function(){ setText($(this).text()); }); } function setText(str) { $("#msgTxt").text($("#msgTxt").text() + str); }