基于jquery,基于jquery的ui框架

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

怎么基于jquery封装一个自己的框架

现在网上关于js和jquery封装的插件很多，我刚刚接触前端的时候，就很敬佩那些自己写插件的大牛们！因为是他们给网站开发更多的便利，很多网页效果，网上很多现成的插件！那么这些插件是如何写的呢？首先是有扎实的js和jquery技术基础，其次还有一些写插件的方法和技巧。关于js和jquery的技术基础，那是一个慢慢积累的过程。但是关于写插件的一些注意和技巧，本文可以略微介绍一下，方便以后写插件的时候用得到。

jquery插件开发模式

jquery插件一般有三种开发方式：

通过$.extend()来扩展jQuery

通过$.fn 向jQuery添加新的方法

通过$.widget()应用jQuery UI的部件工厂方式创建

第一种$.extend()相对简单，一般很少能够独立开发复杂插件，第三种是一种高级的开发模式，本文也不做介绍。第二种则是一般插件开发用到的方式，本文着重讲讲第二种。

相关问答

Q1: 如何在基于jquery的基础上实现滚动时jquery导航显示隐藏

思路：鼠标下滚动时顶部不显示，上滚动时导航显示

CSS:

body{background-color:white; padding-top:10px; font:100 14px 'Open Sans'}

#lipsum{width:690px; margin:30px auto; color:#34495e;text-align:justify;height:10000px;}

/*给DIV 一个固定高度显示滚动条*/

img{float:left; margin:0 10px 10px 0;}

.yapiskan{

background-color:#e74c3c;

color:white;

font-size:24px;

padding:5px;

text-align:center;

position: fixed;

left:0;

top:0;

width:100%;

transition: top .5s;

}

.gizle {

top: -90px;

}

.sabit {

top:0;

z-index: 9999;

}

结构：

!DOCTYPE html

html

head

meta charset="UTF-8"

titleYukar#305; Scroll Edildi#287;inde G#246;züken Header - CodePen/title

link rel="stylesheet" href="css/style.css" media="screen" type="text/css" /

/head

body

header class="yapiskan"STICKY HEADER/header

div id="lipsum"

/div

script src="//此处引入JQ"/script

script src="//此处引入js"/script

/body

/html

//JS部分

$(function(){

var cubuk_seviye = $(document).scrollTop();

var header_yuksekligi = $('.yapiskan').outerHeight();

//卷动事件

$(window).scroll(function() {

//卷动高度

var kaydirma_cubugu = $(document).scrollTop();

//上滚动显示导航

if (kaydirma_cubugu header_yuksekligi){$('.yapiskan').addClass('gizle');}

else {$('.yapiskan').removeClass('gizle');}

//下滚动隐藏导航

if (kaydirma_cubugu cubuk_seviye){$('.yapiskan').removeClass('sabit');}

else {$('.yapiskan').addClass('sabit');}

cubuk_seviye = $(document).scrollTop();

});

Q2: 基于jquery开发的UI框架有哪些

国产jQuery UI框架 (jUI) DWZDWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架. 设计目标是简单实用,快速开发,降低ajax开发成本。欢迎大家提出建议，我们将在下一版本中进一步调整和完善功能．共同推进国内整体ajax开发水平。

2.jQuery的界面插件 Ninja UI

jQuery 是一个非常优秀的 JavaScript 框架，而且还有相当多的插件。其中的一些UI插件也相当的给力，比如 Ninja UI，是一款界面插件，使用它将能给你的项目增色不少。此插件包含有幻灯，智能提示等常见的效果。

3.jQuery的UI框架 Chico UI

和 jQuery UI 一样，Chico UI 包含 auto-complete, blink, carousel, countdown, date-picker, dropdown, expand, calendar 等诸多逐渐，同时还提供一个 CSS 布局框架，用于实现网页布局和表格。

4.jQuery UI 组件库 PrimeUI

PrimeUI 是 PrimeFaces 团队的一个 jQuery UI 组件库，目前包含多个 UI 部件

5.Jquery的UI库 w2ui

基于Jquery的UI库，包含常用UI组件，如：布局、表格、树形、Tabs、工具条、弹出菜单、表单等等。

采用Html5 + CSS3编写，可以支持常用的浏览器，如：Chrome、FireFox7+、Safari 5+和IE 9+等。

6.jQuery UI组件 jQuery UI

jQueryUI 是一套 jQuery 的页面 UI 插件，包含很多种常用的页面空间，例如 Tabs（如本站首页右上角部分）、拉帘效果（本站首页左上角）、对话框、拖放效果、日期选择、颜色选择、数据排序、窗体大小调整等等非常多的内容。

7.jQuery的UI工具包 jQuery Tools