jquery、jstree(用于方便的制作无限层级菜单:https://blog.csdn.net/jason_renyu/article/details/79168940) 设计思路: 1、分析目标页面....... 3、使用requests遍历所有链接取得相应主体页面。...# 找到第一个excel节点,从excel开始 data = [] lhref = [] lerror = [] k = {} browser.get(start_url) browser.set_page_load_timeout...得到文件名,并创建相应文件夹 # def create_file(url): t = 'https://docs.microsoft.com/zh-cn/office/' # 替换掉字眼,然后根据路径生成相应文件夹...,需要构建自己的主页,这里使用了jstree;2个html,index.html,menu.html。
,在home文件夹里面,新建menu.html文件,里面写入从tpl/2-movie/user.html页面中 的部分,并且修改一下url的跳转问题... {% endblock %} 然后运行一下我们的manage.py文件,发现我们的个人中心页面出来了,但是菜单栏没有出现:[1240] 我们需要include我们之前定义的menu.html... {% endblock %} 我们发现我们还没有判断选中状态,我们给menu.html的类加上一个ID,然后采用jQuery来进行判断: ...,然后点击左侧的菜单栏,发现页面显示没有问题。...然后把4-404.html页面的代码都拷贝进去,并修改页面的跳转和静态文件的加载样式: <!
它的具体信息包括配料、产地及它的一些功能,使用户对该食品有着全面的认识。 ...网站素材方面:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。...ul class="cl-effect-1"> menu.html">菜单1...menu.html">菜单2 menu.html">菜单3...menu.html">菜单4 <!
所以为了引入这个菜单,我们可以很简单的去 JQUERY上找个第三方菜单来使用。...注意,为了后续各个页面都可以简单的用这个菜单,所以我们要把菜单单独放在一个HTML模板中,然后其他页面引入即可~ 打开:http://www.htmleaf.com/jQuery/Menu-Navigation.../ 找到这个左侧菜单,很漂亮的左侧菜单: http://www.htmleaf.com/jQuery/Menu-Navigation/201509152576.html 点击下载插件: 下载后,解压...然后注意给它改个名字,改成menu.html,意思是它就是个菜单html模板。...甚至左上角的这个色块条,其实就是个logo的位置,我们可以去改变下这个色块的图片,换个名还是用新图片代替这个都可以: 总之,这个菜单上的内容,其实都是demo,目的是方便于使用者看到外观,也方便自行去替换成真正的菜单链接
的确,二次开发网上那种很秀的组件确实很难,照着看一遍都觉得难,更别说以后要自己操刀进行肆意的使用了。...所以,本节课决定接着前七节课的内容,把主页重新恢复到超链接展示,这样既简单 又实用,还能让我们研究下vue的数据绑定大法。...我们本节课要实现下菜单顶部的搜索功能。...接下来我要做个史无前例的优秀设计,就是能根据当前页面,来搜索不同的东西!!! 因为这个顶部搜索框是属于menu.html的,它会在任何页面出现。...然后是views.py: 打印结果如下: 可以看到,我们知道了当前处于的是home页面。 所以我们接下来要写一个if语句了:注意字段名__contains为包含意思。
,文件一多,加载自然就慢。 2....分别合并成一个文件:这样就实现前端代码简洁,并且相关的文件也变少,网页加载速度也会明显变快,还是以 Sweet 主题为例,合并之后,整个页面除了 jQuery 之外,只剩下合并生成的 JS 和 CSS...简单的安装和使用说明 WPJAM「静态文件」插件安装很简单,首先从「WordPress果酱」的知识星球下载,然后上传到 wp-content/plugins 目录,最后到 WordPress 后台激活即可...激活之后,在 WordPress 后台「WPJAM」菜单下就会新增「静态文件」子菜单,点击进入: 首先勾选「合并静态文件」按钮,然后保存,当然如果有额外的脚本和样式也可以先填入,保存之后,页面就会出现当前系统将会合并那些文件和内联的代码...Script Loader 通过恢复 WordPress 联合加载方式来优化 WordPress 后台脚本加载。 外部链接 将文章或评论中的外部链接加上安全提示的中间页。
changepage来加载第三个页面 5.$.mobile.pageLoading (); /显示加载信息 $.mobile.pageLoading (true...onclick事件的处理方法 function fun1(){ //激活nav1 $('#nav1').addClass('ui-btn-active'); //显示我home菜单的内容...onclick事件的处理方法 function fun2(){ //激活nav2 $('#nav2').addClass('ui-btn-active'); //显示我grid菜单的内容...changepage来加载第三个页面 5.$.mobile.pageLoading (); /显示加载信息 $.mobile.pageLoading (true); //隐藏 pageLoading(...boolean done) 函数显示或隐藏页面加载的提示信息。
---- 一、HTML样式 当我们在做导航栏、少量数据表格、层级列表时,使用无序列表ul、li可以实现想要的效果。这里我们先用无序列表ul、li完成页面结构,为每一个元素添加a标签,即超链接。...从border算起,包含border和padding。...添加ready函数,ready是jQuery的文档就绪函数,它用于防止在文档完全加载之前允许jQuery代 码。如果在文档没有完全加载之前就运行函数,操作可能失败。...是jQuery的文档就绪函数,它用于防止文档在完全加载之前允许jQuery代码, $(document).ready(function () { $(".nav...jQuery隐藏元素和显示元素的使用。
今天给大家带来了十款web前端动画插件,大家收藏了记得给个小心心哦 1.基于jQuery的瀑布流图片筛选插件 瀑布流的展现方式在目前的网页中用得越来越广泛,特别是图片和首页文章的动态加载。...今天分享的这款就是基于jQuery的瀑布流图片筛选插件,我们可以点击图片分类名称,即可将对应分类下的图片以瀑布流的方式展示出来,这款插件在筛选图片上使用还是比较方便的。 ?...5.jQuery左侧边栏多级菜单 适合后台管理页面使用 这是一款基于jQuery的侧边栏多级下拉菜单插件,这个菜单的特点是可以固定在左侧边栏,当页面滚动时整个菜单可以保持一直可见,方便操作。...类似的菜单插件还有CSS3侧边栏单页切换小图标菜单和CSS3侧边栏手风琴菜单,都非常实用。这种菜单非常适合在网站的后台管理页面中使用。 ?...,当切换到某一个菜单项时,菜单项会沿着曲线移动到当前视窗,同时显示对应的小图标,更重要的时,菜单项的切换是循环的,因此使用起来也非常方便。
项目中 menu.html 使用 WXML 语法,一个页面的顶层是 page 节点。 在 WXML 中获取逻辑层定义的数据后,我们通过一系列自己的语法和逻辑展示出这些数据。...我们可以在模板中定义代码片段,然后在不同的地方进行调用,减少重复的代码量。 如何定义一个模板呢?我们使用 name 属性,作为模板的名字,然后在 内定义模板代码片段就可以了。...使用 import 方式,引入定义的文件,然后通过 组件的 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入。...但小程序官方未提供相关接口或性能调试工具,所以项目中我们只能自己尝试不同方案然后对比渲染速度。 以菜单页面为例,商户菜品数量多者成百上千,优化后的效果对比还是比较明显。...使用动态加载等方式减小首屏渲染数据量,提升用户体验。
jQuery Autocomplete Mod jqac 基于Jquery开发的Autocomplete插件。具有易于使用,配置简单,既可以利用Ajax读取数据也可以直接从本地获取数据。...它能够在一个页面中加入多个颜色选择控件,然后每个控件关联到页面中的一个元素比如:文本输入框。 Farbtastic ContextMenu 用于创建右键弹出菜单的jQuery插件。...当链接包括title属性时,它的内容将变成clueTip的标题。clueTip中显示的内容可以通过Ajax获取,也可以从当前页面中的元素中获取。...jQuery Zoomimage 该jQuery插件能够让以当前流行的方式来展示图片。提供:预加载图片提示,对图片进行分组,自动调整图片显示比例,图片分组浏览控制。...菜单项的内容既可以直接从当前页面中获取,也可以从一个外面文件或通过Ajax获取。
正如你所见,从语法角度来说,ID 选择器和 class 选择器的另一个不同之处是,前者用字符”#”而后者用字符”.”。更详细的分析和讨论参见上面的答案链接。 4....你首先需要利用jQuery选择及选取到所有的链接或者一个特定的链接,然后你可以应用attr()方法来获得他们的href属性的值。...使用类“.active"来标记它们的未激活和激活状态,等等. 16. 使用 CDN 加载 jQuery 库的主要优势是什么 ? (答案) 这是一个稍微高级点儿的jQuery问题。...你首先需要利用jQuery选择及选取到所有的链接或者一个特定的链接,然后你可以应用attr()方法来获得他们的href属性的值。...使用类“.active"来标记它们的未激活和激活状态,等等. 16. 使用 CDN 加载 jQuery 库的主要优势是什么 ? (答案) 这是一个稍微高级点儿的jQuery问题。
正如你所见,从语法角度来说,ID 选择器和 class 选择器的另一个不同之处是,前者用字符”#”而后者用字符”.”。更详细的分析和讨论参见上面的答案链接。 4....你可以使用下面这个 jQuery 代码片段来选择所有嵌套在段落(标签)内部的超链接(标签)…… 11. $(this) 和 this 关键字在 jQuery 中有何不同?...而 this 代表当前元素,它是 JavaScript 关键词中的一个,表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法,直到它被 () 函数包裹,例如 12....你首先需要利用jQuery选择及选取到所有的链接或者一个特定的链接,然后你可以应用attr()方法来获得他们的href属性的值。...使用类“.active”来标记它们的未激活和激活状态,等等. 16. 使用 CDN 加载 jQuery 库的主要优势是什么 ? (答案) 这是一个稍微高级点儿的jQuery问题。
动态标题 先放上效果图再说: 离开当前页面时 返回当前页面时 实现方法,引入js文件,在主题文件下的/source/js/下新建FunnyTitle.js,然后在添加到themes...否则,如果一个页面的内容过于庞大,没有使用预加载技术的页面就会长时间的展现为一片空白,这样浏览者可能以为图片预览慢而没兴趣浏览,把网页关掉,这时,就需要图片预加载。...图片懒加载(缓载):延迟加载图片或符合某些条件时才加载某些图片。这样做的好处是减少不必要的访问数据库或延迟访问数据库的次数,因为每次访问数据库都是比较耗时的即只有真正使用该对象的数据时才会创建。.../repo@version/file // 加载 jQuery v3.2.1 https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js...// 使用版本范围而不是特定版本 https://cdn.jsdelivr.net/gh/jquery/jquery@3.2/dist/jquery.min.js https://cdn.jsdelivr.net
这就导致了加载速度比较慢,因为要先加载 JavaScript 代码才会显示网页内容。所以要放在页面底部。这样浏览器会先下载网页的内容显示出来,然后再下载 JavaScript 对当前的网页进行处理。...因此要注意,一些 CSS reset 等要先加载,然后在后面加载自己写的属性值。...控制这些颜色的,分别是 CSS 中的 :link 、:visited 、:hover、:active 这四个伪类选择器,从名称就可以看出,控制的状态分别是:默认显示、访问过后、鼠标移动上去、点击激活。...JavaScript 代码的顺序 JavaScript 文件加载顺序 jQuery 是一个比较常用的 JavaScript 库,通常我们还要配合它强大的插件使用。...同样的,激活使用某个插件的代码,也需要放在插件的后面才会有效。
5、Rewrite模式需要服务器开启rewrite模块,然后建立htaccess文件 6、入口文件 所有的加载都是相对于入口文件定位的,统一的入口文件方便了权限的管理以及 7、模板输出 一个控制器对应一个主题下面的一个文件夹...一、调用当前模块的其他操作模板 格式:display(‘操作名‘) 例如,假设当前操作是User模块下面的read操作,我们需要调用User模块的edit操作模版,使用: $this->display(...’); 这种方式需要指定模块和操作名 四、直接全路径输出模板 格式:display(‘模板文件名‘) 例如,我们直接输出当前的Public目录下面的menu.html模板文件,使用: $this->display.../Public/menu.html’); 这种方式需要指定模板路径和后缀,这里的Public目录是位于当前项目入口文件位置下面。...如果使用的是相对路径的话,要注意当前位置是相对于项目的入口文件,而不是模板目录。 事实上,display方法还有其他的参数和用法。
首先肯定是被遮盖了,我们先在menu.html中加入几个换行符,给把home的内容撑出来: 刷新页面看看效果: 可以看到 一下就出来了~ 然后我觉得主要内容太靠左了,所以我决定给这个左侧菜单增加一个外右距离...其实我们修改第三方的样式都可以通过这种办法,浏览器上修改看效果,然后快速定位到原始JS/CSS文件上进行永久修改。 然后回过头来,我们再看看这个菜单,给它好好改造一下。 首先是左上角的LOGO。...一个好的设计会让使用者增加印象,如果实在没有,你就用你们公司自己的产品公司LOGO~ 我这里随便找了个图片做为LOGO: 但是发现这里居然原来用的是.svg格式的。...效果: 然后是顶部搜索菜单,我们暂时留着它。 右侧的按钮,我们删掉一个,留一个,然后也留着那个个人头像的。...现在回到我们的views.py中,给前端传递当前登录用户的总数据,这样之后我们之后就可以随意使用user. xxxx 了 效果如下: 好了,今天的内容到此结束。
导航菜单背景切换效果 在项目的前端页面里,相对于其它的导航菜单,激活的导航菜单需要设置不同的背景。...'); 7.采配置JQuery与其它库的兼容性 如果在项目中使用JQuery,$ 是最常用的变量名,但JQuery并不是唯一一个使用$作为变量名的库,为了避免命名冲突,你可以按照下面方式来组织你的代码:...//方法二: 推荐使用的方式 (function($){ $(document).ready(function(){ //这儿,你可以正常的使用JQuery语法 });...; } return true; }); 11.使用JQuery重绘图片的大小 关于图片大小的重绘,你可以在服务端来实现,也可以通过JQuery在客户端实现。...有些网站的网页内容不是一次性加载完毕的,而是在鼠标向下滚动时动态加载的,这是怎么做到的呢?
代码,写在一对script标签中 // 可以使用最简洁的代码,完成JS中复杂的功能!...JQuery代码 使用$(function() { ...代码:就是页面标签加载完成执行的代码.. }) */ $(function() {...> 层级选择器:包含选择器 测试获取标签中包含的一个深层标签超链接...-- 使用JQuery改造瀑布流!...> 判断标签是否包含某个class名称:选择器.hasClass("box") 二次筛选:选择器.filter(选择器);从第一个选择器选中的标签中继续选择满足第二个选择器的标签
去年分享过一次,今年又开始了,发现了一个可以刷课时的插件,之前我用的时候还是去年的版本,但是今天发现更新了,自带账号自动登录功能 使用方法: 浏览器+tampermonkey+插件 GitHub...buefycss https://unpkg.com/buefy/dist/buefy.min.css // @resource menuhtml https://fqj.pages.dev/menu.html...= getGMValue('autoCompleteCreditsDone', false); let notAvailable = name => showMessage(`[${name}] 当前功能不可用...GM_addStyle(GM_getResourceText('buefycss')); // apply buefy style file GM_registerMenuCommand('菜单...= -1 && feature.enabled) { showMessage(`激活功能: ${feature.title}`, 'green'); feature.func()