前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 在布局的时候,想到了很多以前看到过的案例,再次熟悉一下: a链接之间的竖线:可以用a链接的border-right/left;  也可以直接 | :还可以再加个行内元素,用它的border-right/left, 我这里在a链接之间加了个i,在结尾处有1px的误差,以后再处理; a链接(行内元素)之间的间隙,可以用浮动解决: 也可以把元素的首尾互相连接: 某一板块,不论点击哪里都会跳转:可以直接用a链接…

jquery插件一般是这么干的: $.fn.插件名称 = function(){}, 把插件的名称加在.fn上,在源码里面实际上是扩展到构造函数的原型对象上,如果你没看过jquery的源代码,或者你曾经看过,但是不知道为什么把插件扩展到fn上,那么本篇文章就能解答你的疑惑.关于jquery插件开发方式,可以参考我的这篇文章:[js高手之路]jquery插件开发实战-选项卡详解 关于选项卡这个功能具体怎么做,不在这里详解,这个是入门级的功能,本文重在讨论插件开发的架构,扩展,以及参数设置. 如果你…

在这篇文章中,我实现了一个基本的选项卡功能:请猛击后面的链接>>   [js插件开发教程]原生js仿jquery架构扩展开发选项卡插件. 还缺少两个常用的切换(自动切换与透明度渐变),当然有朋友会说,还有左右,上下等等,这些动画会放在焦点图(幻灯片)插件系列. (自动切换,停止控制,透明度渐变 ) 效果预览: 自动切换的实现: 这个思路很简单,开启定时器,让选项卡的索引+1,加到4的时候(选项卡的长度)从0开始 传统做法: index = 0 index++ if ( index == 4 )…

选项卡样式如图,请忽略丑陋的样式,样式可以随意更改 主要是基于jquery的extend扩展出的一个简单的选项卡插件,注意:这里封装的类使用的是es6中的class,所以不兼容ie8等低版本浏览器呦!想要兼容低版本可以参考思路,然后换成原生的构造函数原型继承方式 以下是 tabs.js 文件: class Tabs{ constructor(that){ this.that=that; this.opt={//默认参数,不传走默认 eventN:'click', btns:['新闻','娱乐',…

原生js选项卡的几种写法,整片文章我会由简及难的描述几种常用的原生选项卡的写法: Improve little by little every day! 1>基本选项卡: 思路:循环中先清除再添加,注意this的指向和自定义属性的应用 html代码: <div id="tab"> <input class="on" type="button" value="aaa"> <input type…

jQuery庞大的插件库总是让人欢喜让人忧,如何从庞大的插件库里挑出适合自己的插件,总是让很多缺少经验的朋友头疼的事!今天为大家推荐几款简单实用的Tabs选项卡插件,推荐理由:简单易用灵活,样式美观,开源免费! 1.jQuery UI Tabs 在线DEMO:http://jqueryui.com/tabs/ jquery ui tabs由jquery团队开发,使用方便灵活,可实现多种效果,兼容性较好!唯一缺点样式有点丑,样式自己根据需求定义就很完美了. 2.tabulous.js 在线Demo…

    接上篇Tabs  - 选项卡插件  其中12)Yet (E)Another Tab Interface没有依赖任何javascript框架,以作补充          9)Flipping Content Tabs是一款基于jquery的tab插件,该插件特别之处,当切换不同的标签时,它所显示翻转标签的效果,动感十足. 主页: http://webdeveloperplus.com/jquery/create-flipping-content-tabs-using-jquery/ 演示地…

把选项卡整合了一下,写成个插件,这样可以整个站,或整个页面有多个选项卡时,统一调用.代码的具体注意事项已经写进注释了.用于js获取元素的class名称必须有,选项卡本身的样式,另再取一个名字来设置(本人不大喜欢用id,一般写js代码也用class名称来获取元素).这样也在一定意义上实现了行为和样式的分离. html: <!--第一个选项卡--> <div class="js_tab box1"> <h2 class="jsTab_title&qu…

作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高呢?当然是利用js纯原生的写法啦.以前一直说,掌握了js原生,就基本上可以解决前端的所有脚本交互工作了,这话大体上是有些浮夸了.不过,也从侧面说明了原生js在前端中占着多么重要的一面.好了.废话不多说.咱们就来看一下怎么去做一个自己的js插件吧. 插件的需求 我们写代码,并不是所有的业务或者逻辑代码都要抽出来复用.首先,我们得看一下…

原生js开发指南 https://www.jianshu.com/p/e65c246beac1 在jQuery大量使用的环境下,目前网上的众多jQuery插件也能基本满足要求,但是在项目具体需求下,有时候依旧需要自己造轮子,本文介绍了如何不依赖jQuery等库进行原生JavsScript插件的编写. 插件需要满足的条件 一个可复用的插件需要满足以下条件: 插件自身的作用域与用户当前的作用域相互独立,也就是插件内部的私有变量不能影响使用者的环境变量: 插件需具备默认设置参数: 插件除了具备已实现的…

插件的需求 我们写代码,并不是所有的业务或者逻辑代码都要抽出来复用.首先,我们得看一下是否需要将一部分经常重复的代码抽象出来,写到一个单独的文件中为以后再次使用.再看一下我们的业务逻辑是否可以为团队服务. 插件不是随手就写成的,而是根据自己业务逻辑进行抽象.没有放之四海而皆准的插件,只有对插件,之所以叫做插件,那么就是开箱即用,或者我们只要添加一些配置参数就可以达到我们需要的结果.如果都符合了这些情况,我们才去考虑做一个插件. 插件封装的条件 一个可复用的插件需要满足以下条件: 插件自身的作用域…

本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/50266889 作者:cartzhang --------- ---- 给Unity编写原生的插件 Untiy可以导入其他语言编写(和编译)的代码:他们叫做原生插件,本文将教你怎么构建他们. · 步骤1:创建一个C++工程 · 步骤2:编写一个库 · 步骤3:编译 · 步骤4:导入Unity中 · 步骤5:在Unity中使用…

在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为window对象添加右键菜单事件监听: 当事件源对象为tab标签时,取消默认的右键菜单,显示菜单div即设置display: block,并为每一个菜单项添加事件监听: 当事件源对象不为tab标签时,关闭菜单div即设置display: none 为window对象添加单击事件监听:关闭菜单div即设…

为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动态添加选项卡.关闭选项卡.选中指定选项卡.判断选项卡是否选中.判断选项卡是否存在等. 效果如下: 二.插件内部HTML元素结构 <div id="main"> <div class="tab"> <ul class="tab-he…

html结构 <ul id="tabs" class="tabs"> <li data-tab="users">Users</li> <li data-tab="groups">Groups</li> </ul> <div id="tabsContent" class="tabsContent"> <…

一直打算尝试自定义插件,终于付诸实践了,现在把内容发表出来,与大家共勉. 我是根据自己正在用的插件,模仿其源码,实现的自定义插件,完成之后,在网上看相关资料,对自定义插件部分,有了更明确的认识. jquery自定义插件的两种方式: 一.jquery对象级插件--调用方法:$("#id").函数名(参数); (function($){ $.fn.extend({ "函数名":function(自定义参数){ //这里写插件代码 } });  })(jQuery);或者…

一.前言 上两篇博客笔者对 JavaScript Module 模式,闭包等知识点做了简单介绍之后,我们今天开始正式开发一款属于自己的 JavaScript 插件.由于最近项目刚好用到地区选择这一块的功能.网上有许多类似插件,但是有些需求还是有些出入,所以就自己动手写了一个.思路是共通的但是实现和细节肯定会有所不同,我们重点放在代码介绍上.笔者已经将其上传到 github,大家可以下载使用,也可以把源码拷下来参考,路过的朋友顺手 star 哦. 二.补充知识 当前插件版本为1.0.1,能满足最常…

----------基于上次写的jquery插件进行改造  http://www.cnblogs.com/GerryOfZhong/p/5533773.html 背景:jQuery插件依赖jQuery库,虽然jQuery使用十分广泛,但是对于移动开发或者在其他带宽需求需要注意的时候,就得考虑,因为我不可能完成一项技术相对来说引用了一个更大的库,这样之不值得的.所以原生js是所有浏览器都支持的一种语言,原生js相对来说就very good了,但是原生js相对新手或者没有很强基础的人来说还是相对比较…

先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上. 网上搜了一下,看到几种页面loading的方法: 1.在body头部加入loading元素,在body页脚写入脚本让loading元素消失. 2.基于jquery,在页面的不同位置插入脚本,设置滚动条的宽度. 简单分析一下: 第一个明显不是我想要的. 第二个要在body前加载jquery,然后还…

今天分享下移动端原生js的无缝轮播图: 移动端尽量减少使用DOM操作来频繁的浪费移动端设备的性能,所以这个无缝轮播图更多的使用了transition和transform,无缝的思想和昨天分享的PC端的无缝轮播的思想是一样的,分别在正常的图片的前面插入了最后一张图片和在正常图片的最后插入了第一张图片,在运动到这两张图片时候瞬间清除transition并把整个图片链拉回到正常图片流的位置,从而从产生了无缝 这个移动端轮播图中还阐述了一个思路:为了更好的考虑用户的体验,当用户滑动屏幕的距离小于一定的值…

今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走的代码,也可以放向左走的代码,然后在js加载的时候先执行一次,保证页面加载的时候轮播图是自动播放的,当然在鼠标悬停在遮罩层的时候我们需要清除这个定时器,让自动播放功能关闭,然后在鼠标再次移出遮罩层的时候再次开启定时器,这样就实现了自动播放的功能.然后今天的轮播图中我添加了开关的功能,这个开关是为了避…

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>无缝滚动</title>    <style type="text/css">        body,ul{margin: 0;padding: 0;}        li{list-style: none;}  …

今天要分享的jQuery焦点图插件非常适合展示热点新闻,之前我们分享过好多基于jQuery的焦点图插件,效果都还很不错.它可以在图片上方展示文字标题,并且焦点图的切换按钮时tab风格的,图片切换也十分流畅.效果图如下: 在线预览   源码下载 html代码: <div class="msn-focus" style="margin: 30px auto"> <div class="hd"> <ul> <l…

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>JS实现幻动片选项卡</title> </head> <style> .container{ text-align:center; width:100%; } .ppt{ display:none; padding:20px; margin:0px; color:white…

PHPExcel是用来操作Office Excel文档的一个PHP类库,它基于微软的OpenXML标准和PHP语言.可以使用它来读取.写入不同格式的电子表格,如 Excel(BIFF) .xls, Excel 2007 (OfficeOpenXML) .xlsx, CSV,Libre/OpenOffice Calc .ods, Gnumeric, PDF, HTML等等. 1首先下载PHPExcel插件 地址:https://github.com/PHPOffice/PHPExcel 2 导入项…

效果图: <!DOCTYPE html> <html> <head> <title></title> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <style type="text/css"> *{margin:0;padding:0} body{font-family:&qu…

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>开关按钮设置</title> </head> <link rel="stylesheet" href="css/Default style sheet.css" /> <style> div{ width:120p…

效果图如下: html代码 <div class="date-control" id="date-control"> <span id="pre-month">-</span> <p><span id="table-year">2017</span>/<span id="table-month">12</span>…

使用选项卡插件可以将<ul>中的<li>选项定义为选项标题,在标题中,再使用<a>元素的“href”属性设置选项标题对应的内容,它的调用格式如下: $(selector).tabs({options}); selector参数为选项卡整体外围元素,该元素包含选项卡标题与内容,options参数为tabs()方法的配置对象,通过该对象还能以ajax方式加载选项卡的内容. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.…

作为一个ionic的新手,今天使用了ionic的原生粘贴板插件  @ionic-native/clipboard,根据ionic官方文档上执行的命令 $ ionic cordova plugin add cordova-clipboard $ npm install -g @ionic-native/clipboard 发现会抛出一个错误 由于网上没有直接的答案,但是还好找到了类似的错误,根据上面的描述找到了答案 大致原因是没有在app.module.ts里面引入这个插件 引入之后正常了,但是在…