Post Jobs

基于jquery实现三级下拉菜单,使用jQuery实现Web页面换肤功能的要点解析

Centos安装turn stun 服务器

1.install and download prerequisite for
CentOSyuminstall-ymakegccccgcc-c++wgetyuminstall-yopenssl-devellibeventlibevent-develmysql-develmysql-server2.
download and install LibEvent modules
wget
tarzxvflibevent-2.0.21-stable.tar.gzcdlibevent-2.0.21-stable&&./configuresudomake&&sudomakeinstall&&cd..3.download
and install TURN moduleswget

turnserver-4.4.5.2 &&
./configuresudomake&&sudomakeinstall==================================================================1)Ifyousystemsupportsautomaticstart-upsystemdaemonservices,the,toenabletheturnserverasanautomaticallystartedsystemservice,youhaveto:
a)Createandedit/etc/turnserver.confor /usr/local/etc/turnserver.conf.
Use/usr/local/etc/turnserver.conf.defaultasanexample.
b)Foruseraccountssettings:setupSQLiteorPostgreSQLor
MySQLorMongoDBorRedisdatabaseforuseraccounts.
Use/usr/local/share/turnserver/schema.sqlasSQLdatabaseschema,
oruse/usr/local/share/turnserver/schema.userdb.redisasRedis
databaseschemadescriptionand/or
/usr/local/share/turnserver/schema.stats.redis
asRedisstatus&statisticsdatabaseschemadescription.
IfyouareusingSQLite,thedefaultdatabaselocationisin
/var/db/turndborin/usr/local/var/db/turndborin/var/lib/turn/turndb.
c)addwhateverisnecessarytoenablestart-updaemonforthe
/usr/local/bin/turnserver.2)Ifyoudonotwanttheturnservertobeasystemservice,
thenyoucanstart/stopit”manually”,usingthe”turnserver”
executablewithappropriateoptions(seethedocumentation).3)Tocreatedatabaseschema,useschemainfile/usr/local/share/turnserver/schema.sql.4)Foradditionalinformation,run:
$manturnserver $manturnadmin
$manturnutils==================================================================4.Configure
“turnserver.conf” filecp /usr/local/etc/turnserver.conf.default
/etc/turnserver.confvi/etc/turnserver.conflisteningi-port=3478listening-ip=xxx.xxx.xxx.xxxuser=cube:cubeexternal-ip=xxx.xxx.xxx.xxx/xxx.xxx.xxx.xxxpidfile=”/var/run/turnserver.pid”log-file=/var/tmp/turn.log5.Run
TURN servernohupturnserver-v-r
123.57.232.224:3478-a-o-c/etc/turnserver.conf>/dev/null&turnserver-v-r
123.57.232.224:3478-a-o-c/etc/turnserver.conf6.Stop TURNcat
/var/run/turnserver.pid or /var/tmp/turnserver.pid12345kill 12345

stun 服务器 1.install and download
prerequisite for
CentOSyuminstall-ymakegccccgcc-c++wgetyuminstall-yopenssl-devellibeventlibevent-develmysql-develmysql-server…

据说jquery达成三级下拉菜单,

本文实例为大家分享了jquery三级下拉菜单的求实实今世码,供大家参谋,具体内容如下

在写那么些的时候,首先要捋顺思路。点多个美食指南的时候,其余的要关闭,点一级菜单的时候,二三级菜单要关闭,等等。
粗粗代码如下:

<body>
 <aside>
  <ul class="one">
   <li> <a href="#" class="a">目录A</a>
    <ul class="two" style="display: none">
     <li><a href="#" class="a">二级目录A</a>
      <ul class="three" style="display: none">
       <li><a href="#">三级目录A</a></li>
      </ul>
     </li>
     <li><a href="#" class="a">二级目录B</a></li>
     <li><a href="#" class="a">二级目录C</a></li>
    </ul>
   </li>
   <li> <a href="#" class="a">目录B</a>
    <ul class="two" style="display: none">
     <li><a href="#" class="a">二级目录A</a>
      <ul class="three" style="display: none">
       <li><a href="#">三级目录A</a></li>
      </ul>
     </li>
     <li><a href="#" class="a">二级目录B</a></li>
     <li><a href="#" class="a">二级目录C</a></li>
    </ul>
   </li>
   <li> <a href="#" class="a">目录C</a> </li>
  </ul>
 </aside>

//jQuery部分
<script src="js/jquery-1.8.3.min.js"></script>
<script>
  $(document).ready(function() {
   $('.a').click(function() {
    if ($(this).siblings('ul').css('display') == 'none') {
     $(this).siblings('ul').slideDown(100).children('li');
     if ($(this).parents('li').siblings('li').children('ul').css('display') == 'block') {
      $(this).parents('li').siblings('li').children('ul').slideUp(100);

     }
    } else {
     //控制自身菜单下子菜单隐藏
     $(this).siblings('ul').slideUp(100);
     //控制自身菜单下子菜单隐藏
     $(this).siblings('ul').children('li').children('ul').slideUp(100);
    }
   });
 });
</script>
</body>

若是要加上样式的话,必须求细心,不然菜单恐怕会自不过然谬误。
风华正茂体化代码地址:
git里还有二个含有Logo的案例,不点击的话是+号,菜单展开后,变为-号。
以上就是本文的全体内容,希望对我们的求学抱有助于。

本文实例为大家大饱眼福了jquery三级下拉菜单的现实贯彻代码,供我们参谋,具体内容如下
在写那些的时候,首…

使用jQuery完毕Web页面换肤功用的要义深入分析,jqueryweb

网页换肤是一门老手艺了,老的明天都微微流行了。不过,一时候有个别顾客就是想要那些换肤效用。于是就实施做了须臾间网页换肤,结果遇见了成都百货上千题材。

网页换肤的基本原理

基本原理很简短,正是使用 JS 切换对应的 CSS 样式表。比如导航网址 Hao123
的右上方就有网页换肤作用。除了切换 CSS
样式表文件之外,常常的网页换肤还亟需经过 Cookie
来记录客户在此以前更改过的肌肤,那样后一次客商访谈的时候,就能够活动使用上次顾客配置的选项。

那正是说基本专门的学问流程就出来了:访问网页——JS 读取 Cookie
——若无,使用暗中同意身体发肤——倘使有,使用内定四肢;顾客点击换肤选项——JS
调控替换对应的 CSS 样式表——将肌肤选项写进 Cookie 保存。

网页换肤事情发生前需求的筹算

首先你或然要预备多套 CSS 样式表文件,当点击换肤开关的是,使用 JS
来切换对应的 CSS 样式表。之后,正是在网页上增添八个 ul li 列表,用 CSS
修饰一下做成换肤选项。举个例子:

图片 1

下面大家就来看具体职能代码。

兑现点击切换对应 CSS 作用

先是,我们的身躯选项的 HTML 构造是这么的

<div class=”skin”>
  <ul>
    <li class=”skin1 hover”></li>
    <li class=”skin2”></li>
    <li class=”skin3”></li>
    <li class=”skin4”></li>
  </ul>
</div>

接下来在网页的顶端偏下的职位放上三个空的 link 标签,我们将会利用 jQuery
为那些 link 标签赋予分歧的 CSS 文件贯彻切换效果

复制代码 代码如下:
<link rel=”stylesheet” href=”” data-href=”style-Teal.css”
type=”text/css” media=”screen” class=”skincsslittle” />

个中,笔者自定义了叁个 data-href
属性来存放在系统默许的肌肤,那样当页面加载成功之后,如若 JS 没有检查评定到
Cookie 中的皮肤新闻,就能够把 data-href
中的内容赋值上去。之后就是我们熟知的 jQuery 代码:

jQuery(‘.skin li').click(function(){
  var currentClass = jQuery(this).attr(‘class');
  jQuery(this).siblings().removeClass(‘hover');
  jQuery(this).addClass(‘hover');
  var cc = currentClass.substring(0,5);
  cc = convertcsslittle(cc);
  var skincssurl = jQuery(‘.stylecssurl').attr(‘href').substring(0,jQuery(‘.stylecssurl').attr(‘href').indexOf(‘style')) + cc;
  jQuery(‘.skincsslittle').attr(“href”,skincssurl);
createCookie('skin',currentClass,365);
});

差非常少的逻辑正是收获到日前肌肤的 class 然后截收取来 skin*
然后经过一个函数拿到其相应的 CSS 文件。skincssurl 记载的是网页的非四肢CSS 文件,首要用来拿到当前网页的 CSS 目录 UENVISIONL ,最终将交织好的 CSS
身体发肤文件赋值打算好的空 link 中,实现换肤。

追加 Cookie 记录四肢功用

此间最主要用到三个自定义的函数,用来创设、读取 Cookie 内容。

function readCookie(name) {
 var nameEQ = name + “=”;
 var ca = document.cookie.split(‘;');
 for(var i=0;i < ca.length;i++) {
  var c = ca[i];
  while (c.charAt(0)==' ‘) c = c.substring(1,c.length);
  if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
 }
 return false;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days2460601000));
var expires = “; expires=”+date.toGMTString();
}
else expires = “”;
document.cookie = name+”=”+value+expires+”; path=/“;
}

您只需求把那八个函数复制到 JS 代码区域就可以。在 jQuery
点击换肤的功力代码中,最后一句就创建了二个Cookie,等网页加载成功今后,我们需求接纳 JS 读取 Cookie 内容,然后利用
if 判定:

var cccc = readCookie(“skin”);
if (cccc){
cccc = cccc.substring(0,5);
jQuery(‘.'+cccc).addClass(‘hover').siblings().removeClass(‘hover');
ccc = convertcsslittle(cccc);
var skincssurl = jQuery(‘.stylecssurl').attr(‘href').substring(0,jQuery(‘.stylecssurl').attr(‘href').indexOf(‘style')) + ccc;
jQuery(‘.skincsslittle').attr(“href”,skincssurl);
}else{
var currentcss = jQuery(‘.skincsslittle').attr(“data-href”);
var currentcssname = currentcss.substring(currentcss.indexOf(‘style'),currentcss.length);
currentcssname = defaulttoclass(currentcssname);
jQuery(‘.'+currentcssname).addClass(‘hover').siblings().removeClass(‘hover');
jQuery(‘.skincsslittle').attr(“href”,jQuery(‘.skincsslittle').attr(“data-href”));
}

无须被这么乱的代码吓晕了,实际上逻辑非常轻便,先拿到 Cookie
的四肢值,假诺有就为相应的肌肤选项高亮何况转变获得相应的 CSS
四肢文件赋值。若无 Cookie 内容,就将 data-href
属性中著录的值赋值进去。

网页换肤的闪耀难点和不圆满解决方案

网页换肤中,会蒙受闪烁的主题素材。正是当点击切换开关的时候,更动颜色依然图片会闪烁一下。或许使用
Cookie
记录之后,顾客接受了非默许的肌肤,也会闪烁一下,先出现默许的样式然后再闪烁切换到顾客本身接受的样式。

这种影响顾客体验的风貌明显要干净扫除,可是一向从未找到完美的消除方法。因为浏览器暗中认可的是预先渲染
CSS 之后再加载 JS,非常是应用 Cookie 记录的皮层,先渲染现存的 CSS
之后,JS
工夫读取然后切换成身体发肤。原理是那般的,跟顾客合计之后,顾客提交了三个“无闪烁”的换肤效果示例,是
MG12 很早的意气风发款主旨。相符的 Cookie
记录等,可是他的创作着实未有闪烁境况。

于是小编就翻开了他的 JS
代码,未有发掘特殊之处,后来才想知道,这种闪烁难题,在图纸超多的网页中作用越来越显明,因为切换的
CSS 须求加载图片须要更加多时光。而 MG12 那款大旨中,切换的 CSS
文件只是改造了多少个 background
颜色,加载速度快到您眼球反应可是来就招致了不闪烁的假象。

不全面施工方案也是一些,点击切换开关之后的闪亮意况,也是因为要加载图片等,那么大家得以在拜候网页的时候,使用预加载技能将此外身躯图片预加载或许应用
CSS Pepsi-Cola 技艺做成一张大图片。

至于 Cookie
记录闪烁的主题材料,那是浏览器渲染的硬伤,只可以尽量减弱换肤供给转移的地点,尽量减弱图片减小体量。然后优先加载未有别的身躯的根基样式,之后选用JS 加载私下认可样式或然读取 Cookie
获取的肌肤选项。那样管理,访谈网页的时候会先出示湖蓝或然无面色,之后直接切换到早前接受的皮层的颜色,而不会从默许的水彩闪烁形成另一种颜色进而进级一定的顾客体验。

网页换肤是一门老才具了,老的今天都稍稍流行了。可是,有的时候候有个别顾客正是想要那…

发表评论

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

相关文章

网站地图xml地图