澳门新葡萄京官网首页JS实现仿新浪微博发布内容为空时提示功能代码

本文实例讲述了JS实现仿新浪微博发布内容为空时提示功能。分享给大家供大家参考。具体如下:

利用JS生成博文目录及CSS定制博客,js博文

本文实例为大家介绍了利用JS生成博文目录及CSS定制博客的方法,分享给大家供大家参考,具体内容如下

1.JS代码

  想要生成目录,许多都说需要JS修改权限,那个这里就直接进入设置页面,找到下方的联系邮箱直接发去就行了,工作人员回复的还是很快的。

  拿到权限之后,下面就是将编(搜)写(寻)的JS代码放在页脚HTML代码的方框内,然后点击保存就可以了。要注意目录的生成是几级标题,这一点可是很重要的。JS代码如下,基本没有变化,拷贝了原作者的写法,可以生成二级目录,分别为h2和h3,这点需要注意。

  综合来说,这个目录有以下几点的特点,这些也都可以在本文中看到(二级目录本博文没有使用)。

澳门新葡萄京官网首页,1). 可以在博文首部生成两级目录
2). 每个一级目录上方有一个回到顶部的链接
  JS代码如下。

<script language="javascript" type="text/javascript">
// 生成两级目录索引列表
function GenerateContentList()
{
 var mainContent = $('#cnblogs_post_body');
 var h2_list = $('#cnblogs_post_body h2');  //如果你的章节标题不是h2,只需要将这里的h2换掉即可

 if(mainContent.length < 1)
  return;

 if(h2_list.length>0)
 {
  var content = '<a name="_labelTop"></a>';
  content += '<div id="navCategory">';
  content += '<p style="font-size:18px"><b>目录</b></p>';
  content += '<ul>';
  for(var i=0; i<h2_list.length; i++)
  {
   var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label' + i + '"></a></div>';
   $(h2_list[i]).before(go_to_top);

   var h3_list = $(h2_list[i]).nextAll("h3");
   var li3_content = '';
   for(var j=0; j<h3_list.length; j++)
   {
    var tmp = $(h3_list[j]).prevAll('h2').first();
    if(!tmp.is(h2_list[i]))
     break;
    var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
    $(h3_list[j]).before(li3_anchor);
    li3_content += '<li><a href="#_label'%20+%20i%20+%20'_'%20+%20j%20+%20'">' + $(h3_list[j]).text() + '</a></li>';
   }

   var li2_content = '';
   if(li3_content.length > 0)
    li2_content = '<li><a href="#_label'%20+%20i%20+%20'">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
   else
    li2_content = '<li><a href="#_label'%20+%20i%20+%20'">' + $(h2_list[i]).text() + '</a></li>';
   content += li2_content;
  }
if($('#cnblogs_post_body').length != 0 )
  {
   $($('#cnblogs_post_body')[0]).prepend(content);
  }
 } 
}

GenerateContentList();
</script>
  1. 一级标题CSS格式

  我在观察zzq同学的一些博文里面的一级标题有一个浅灰色的背景,觉得添加之后看起来很不错。在这里就借用一下该图片作为一级标题的背景,图片和CSS的说明如下。

#cnblogs_post_body h2 {
 background-repeat: no-repeat;
 background-image:url('http://xxxx');
}

以上就是本文的详细内容,希望对大家的学习有所帮助。

这里使用JavaScript模拟新浪微博的一个功能,在发布微博的内容为空时,文本框提醒用户这里没有输入内容,本功能让人感觉网页很智能,在和你对话一样,很人性化。本特效引用了一个外部了JS封装类,你可下载到本地使用。

您可能感兴趣的文章:

  • Js仿新浪微博首页内容滚动
  • js实现的仿新浪微博完美的时间组件升级版
  • 博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
  • JS模拟的腾讯微博app撕纸效果的实例代码
  • JS实现仿新浪微博发布内容为空时提示功能代码
  • 基于jsp+servlet实现的简单博客系统实例(附源码)
  • JS实现仿微博可关闭弹出层效果
  • 基于js实现微信发送好友如何分享到朋友圈、微博

本文实例为大家介绍了利用JS生成博文目录及CSS定制博客的方法,分享给大家供大家参考,具体内…

运行效果截图如下:

在线演示地址如下:

具体代码如下:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"""html xmlns=""headmeta "Content-Type" content="text/html; charset=utf-8" /title新浪微博发布功能/titlestyle type="text/css" html,body{margin:0px;text-align:center;font-size:12px;background:#b2e2f9;}.box{width:555px;height:auto;margin:30px auto;background:#fafafa;padding:30px;overflow:hidden;}.boxf{width:555px;height:88px;float:left;position:relative;z-index:0;}#textDisplay{width:555px;height:88px;position:absolute;left:0px;top:0px;word-wrap:break-word;word-break:normal;z-index:1;text-align:left;line-height:20px;font-family:Arial;font-size:12px;}#list{width:164px;position:absolute;padding:1px;border:1px solid #cccccc;display:none;z-index:100;background:#fff;font-family:Arial;}#list ul{margin:0px;padding:0px;float:left;list-style-type:none;}#list li{width:164px;height:23px;float:left;text-indent:10px;line-height:23px;text-align:left;color:#333333;cursor:pointer;}#list li.hove{background:#e6e6e6;}textarea{width:555px;height:88px;border:1px solid #ccc;border-radius:5px;resize:none;position:absolute;top:0px;left:0px;z-index:2;font-family:Arial;font-size:12px;line-height:20px;overflow:hidden;}textarea.hove{border:1px solid #ffb941;}.title{width:555px;height:21px;text-align:left;padding-bottom:20px;}.title span{float:right;color:#0a8cd2; padding-top:5px;}.title span.color{color:#808080;padding:0px;margin-top:-3px;}.title span em{font-style:normal;font-family:Constantia,Georgia;font-size:22px;font-weight:700;}.btnf{width:555px;height:auto;overflow:hidden;padding-top:10px;}.btn{width:82px;height:30px;background:url(images/201209/fb.jpg) no-repeat;cursor:pointer;float:right;}.btnh{background:url(images/fb1.jpg) no-repeat;}.back{background:#ffd4d4;}.fbcg{width:110px;height:42px;background:url(images/fbcg.jpg) no-repeat;position:absolute;top:50%;left:50%;margin:-21px 0 0 -55px;z-index:10;display:none;}.dis{display:block;}.undis{display:none;}#desc{border: 1px dashed #ccc;color:#333;background:#fff;line-height:2;padding:10px;width:533px;border-radius:5px; margin-top:20px;text-align:left;font-family:Arial;font-size:14px;}/stylescript type="text/javascript" src="js/at.js"/scriptscript type="text/javascript" window.onload = function (){ atRelease('', 'text', {box : 'box',list : 'list'});}/script/head bodydiv  div  span 前任现任人手一个,李晨泡妞神器石头心走红24小时热博/span img src="images/title.jpg" / /div div  textarea rows="6" cols="60"/textarea div /div /div div  span /span /div dl  dt功能说明:/dt dd① 限制输入140字符,超出字符提示数字变红;/dd dd② @符关联好友微博列表;/dd dd③ 键盘控制微博列表选中;/dd dd④ 超出字符或空微博发送闪红;/dd dd⑤ 发布成功提示。/dd dd /dd /dl/divdiv ul li选择最近@的人或直接输入/li li wh乡下人/li li幸福文盲作家/li li我是张二蛋/li liJD我行我酷/li li色影无极/li li朱心梦/li liwh乡下人/li li幸福文盲作家/li li我是张二蛋/li /ul/div/body/html

希望本文所述对大家的javascript程序设计有所帮助。

发表评论

电子邮件地址不会被公开。 必填项已用*标注