jquery ui 代码重写（还没想到更好说法，暂时这么叫吧）

最新推荐文章于 2020-07-02 16:33:58 发布
最新推荐文章于 2020-07-02 16:33:58 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： 前端技术 最新css3 文章标签： jquery ui css框架 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jinchun20100615/article/details/11930255
版权
本文介绍了作者临摹jQuery UI页面的过程，展示了如何使用jQuery UI的各种组件，包括Accordions、Autocomplete、Buttons、Tabs和Dialog等，通过实例代码加深了对这些组件的理解。
摘要由CSDN通过智能技术生成

下面是本人临摹jquery ui 页面写的，这个过程对本人有很大启发，建议有时间的人，都自己看一遍。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css框架</title>
<link href="css/ui-lightness/page.css" type="text/css" rel="stylesheet">
<style type="text/css">
body{ font:62.5% "微软雅黑", "黑体","Trebuchet MS",sans-serif; margin:50px; }
.demoHeaders{ margin-top:2em;}
#dialog-link{ text-decoration:none; padding:.4em 1em .4em 20px; position:relative} 
#dialog-link span.ui-icon{ left:0.2em; margin:-8px 5px 0 0; position:absolute; top:50%;}
.fakewindowcontain .ui-widget-overlay{ position:absolute;}
#icons{ padding:0; margin:0;}
#icons li{ position:relative; margin:2px; padding:4px 0; cursor:pointer; float:left; list-style:none;}
#icons span.ui-icon{ margin:0 4px; float:left;}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/page.js"></script>
</head>


<body>
<h1 style="font-size:18px; background-color:#F00;">Welcome to jQuery UI By Miss Ma! </h1>
<div class="ui-widget">
  <p>This page demonstrates the widgets you downloaded using the theme you selected in the download builder. We've included and linked to minified versions of jQuery, your personalized copy of jQuery UI (js/jquery-ui-1.10.3.custom.min.js), and css/ui-lightness/jquery-ui-1.10.3.custom.min.css which imports the entire jQuery UI CSS Framework. You can choose to link a subset of the CSS Framework depending on your needs. </p>
  <p>You've downloaded components and a theme that are compatible with jQuery 1.6+. Please make sure you are using jQuery 1.6+ in your production environment. </p>
</div>
<h1>YOUR COMPONENTS: </h1>
<!--可折叠菜单 -->
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion" class="ui-accordion ui-widget ui-helper-reset" role="tablist">
<h3 id="ui-accordion-accordion-header-0" class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>First</h3>
<div style="display:none;">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
    <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-accordion-header-active ui-state-active ui-corner-top"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>Second</h3>
<div id="ui-accordion-accordion-panel-0" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="display:block; height:14px;">Phasellus mattis tincidunt nibh.</div>
    <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all">Third</h3>
<div style="display:none;">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<!--自动完成输入窗 -->
<h2 class="demoHeaders">Autocomplete </h2>
<div>
<span class="ui-helper-hidden-accessible" role="status" aria-live="polite"></span><!--用它来控制结果 -->
<input id="autocomplete" class="ui-autocomplete-input"  title="type &quot;a&quot;" autocomplete="off" >
</div>
<!--button按钮 -->
<h2 class="demoHeaders">button</h2>
<button id="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" arial-disabled="false"><span class="ui-button-text">A button element</span></button>
<button id="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-hover" role="button" arial-disabled="false"><span class="ui-button-text">A button element</span></button>
<form style="margin-top:1em;">
  <div id="radioset" class="ui-buttonset">
  <input name="radio" type="radio" id="radio1" class="ui-helper-hidden-accessible " ><label for="radio1" title="choice1" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left"><span class="ui-button-text">choice1</span></label>
    <input name="radio" type="radio" id="radio2" checked="checked" class="ui-helper-hidden-accessible "  ><label for="radio2" title="choice2"  class="ui-button ui-widget ui-state-default ui-button-text-only ui-state-active" style="margin-left:-1px;"><span class="ui-button-text">choice2</span></label>
    <input name="radio" type="radio" id="radio3" class="ui-helper-hidden-accessible"><label for="radio3" title="choice3" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right ui-state-hover"><span class="ui-button-text">choice3</span></label>
  </div>
</form>
<!--tabs -->
<h2 class="demoHeaders">Tabs</h2>
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix  ui-widget-header ui-corner-all" role="tablist">
    <li class="ui-state-default ui-corner-top" role="tab" tabindex="0" arial-controls="tabs-1" arial-labelledby="ui-id-2" arial-selected="false"><a href="#tabs-1" id="ui-id-1" class="ui-tabs-anchor">First</a></li>
        <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active"><a href="#tabs-2" id="ui-id-2" class="ui-tabs-anchor">Second</a></li>
        <li class="ui-state-default ui-corner-top"><a href="#tabs-3" id="ui-id-3" class="ui-tabs-anchor">Third</a></li>
    </ul>
    <div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
<!--Dialog -->
<h2 class="demoHeaders">Dialog</h2>
<p>
<a id="dialog-link" href="#" class="ui-state-default ui-corner-all">
    <span class="ui-icon ui-icon-newwin"></span>
        Open Dialog
    </a>
</p>
<br>
<p>
<a id="dialog-link" href="#" class="ui-state-default ui-corner-all ui-state-hover">
    <span class="ui-icon ui-icon-newwin"></span>
        Open Dialog
    </a>
</p>
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-front ui-dialog-buttons ui-draggable ui-resizable" style="height:auto; width:400px; position:absolute; top:816.5px; left:428.5px;" tabindex="-1" role="dialog" aria-describedby="dialog" aria-labelledby="ui-id-5">
  <div class="tou ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
  <span id="ui-id-5" class="ui-dialog-title">Dialog Title</span>
    <button class="ui-button ui-wedget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" arial-disabled="false" title="close">
    <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
        <span class="ui-button-text">close</span>
    </button>
  </div>
  <div class="shen ui-dialog-content ui-widget-content" style="height:auto; min-height:50px; max-height:none; width:auto;">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
  <div class="wei ui-dialog-buttonpane ui-widget-content  ui-helper-clearfix">
  <div class="ui-dialog-buttonset">
        <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
            <span class="ui-button-text">ok</span>
        </button>
        <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
            <span class="ui-button-text">cancel</span>
        </button>
    </div>
  </div><!--边线效果 -->
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
</div>
<h2 class="demoHeaders">Overlay and Shadow Classes <em>(not currently used in UI widgets)</em></h2>
<div class="fakewindowcontain" style="position:relative; width:96%; padding:1% 2%; height:240px; overflow:hidden;">
<p>Lorem ipsum dolor sit amet,  Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p><p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. </p><p>Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p><p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. </p><p>Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. </p><p>Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. </p>
    <div class="ui-overlay">
    <div class="ui-widget-overlay"></div>
        <div class="ui-widget-shadow ui-corner-all" style=" width:302px; height:152px; position:absolute; left:50px; top:30px;"></div>
    </div>
<div class="ui-widget ui-widget-content ui-corner-all" style="width:280px; height:130px; position:absolute; top:30px; left:50px; padding:10px;">
    <div class="ui-dialog-content ui-widget-content" style="background:none; border:0;" >
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>
</div>
<h2 class="demoHeaders">Framework Icons (content color preview)</h2>
<ul id="icons" class="ui-widget ui-helper-clearfix">
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-n">
    <span class="ui-icon"></span>
    </li>
    <li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-ne"><span class="ui-icon ui-icon-carat-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-e"><span class="ui-icon ui-icon-carat-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-se"><span class="ui-icon ui-icon-carat-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-s"><span class="ui-icon ui-icon-carat-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-sw"><span class="ui-icon ui-icon-carat-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-w"><span class="ui-icon ui-icon-carat-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-nw"><span class="ui-icon ui-icon-carat-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-n-s"><span class="ui-icon ui-icon-carat-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-e-w"><span class="ui-icon ui-icon-carat-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-n"><span class="ui-icon ui-icon-triangle-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-ne"><span class="ui-icon ui-icon-triangle-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-e"><span class="ui-icon ui-icon-triangle-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-se"><span class="ui-icon ui-icon-triangle-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-s"><span class="ui-icon ui-icon-triangle-1-s"></span></li>
<li class="ui

最低0.47元/天 解锁文章
玫瑰余香fly
关注
专栏目录
jquery UI Datepicker时间控件冲突问题解决
10-20
在Web前端开发中，时间选择控件（datepicker）是常用的界面组件之一，它能够帮助用户更便捷地选择日期。...一旦处理得当，用户在使用界面时就可以获得更好的体验，开发者也能避免很多后续维护的麻烦。
jQuery UI框架
小红帽
08-05 3350
1、jQuery的界面插件 Ninja UI Ninja UI，是一款界面插件，使用它将能给你的项目增色不少。此插件包含有幻灯，智能提示等常见的效果。 目前的文档还不是很全，但是官方提供的例子已经很详细了，所以也是很容易使用的。 在线演示：http://ninjaui.com/examples 2、jQuery的UI框架 Chico UI
编写jQueryUI插件(widget)
答案是肯定的
07-22 3250
最近在做一个项目的时候，用到了动态渲染弹出框的yangshi
The jQuery UI CSS Framework(中文说明)
weixin_30325071的博客
03-14 83
在项目中经常会用到一些样式什么的，如果使用了jQuery UI那么很多的图标，样式什么的，就可以尽量使用jQuery UI里面已经定义好了的，在此就对jQuery UI中的css做写了下注释，提供自己准备利用jQuery UI的样式来写控件的朋友们，自己也顺带做下记录。 Layout Helpers(布局帮助) .ui-helper-hidden: Applies display: ...
jQuery Mobile 所有class选项，开发全解+完美注释
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-05 3718
//全局类 //ui-corner-all 为元素添加圆角 //ui-shadow 为元素添加阴影 //ui-overlay-shadow 为元素添加多层阴影 //ui-mini 让元素变小 // //按钮类 <a> 或 <button> 元素添加以下类 (不是 <input> 按
基于jQuery UI CSS Framework开发Widget
08-19 174
jQuery UI CSS Framework是jQuery UI中的一个样式框架，可以利用jQuery Theme roller 来生成自己想要的css样式效果。我们可以利用jQuery UI的一些框架来开发出基于jQuery UI CSS Framework效果的插件来。 jQuery UI中两大核心的css文件是ui.core.css和ui.theme.css.这两个css...
bui重写 jquery
11-21
在IT行业中，前端框架的发展日新月异，不断有新的技术和工具涌现。"bui重写 jquery"这个项目就是针对一款名为BUI的前端...总的来说，"bui重写 jquery"是一次适应时代变迁的优化，让BUI更好地适应现代前端开发的需求。
jquery.ui.autocomplete 扩展：无限下拉
08-04
**jQuery UI Autocomplete ...理解这个过程不仅可以提升网页应用的性能，还能帮助我们更好地理解和定制jQuery UI组件。通过学习和实践，我们可以让Autocomplete组件更好地适应大数据量的需求，提供流畅的用户交互体验。
jquery重写window alert 信息提示
03-28
因此，"jQuery重写window alert 信息提示"这个主题就是关于如何使用jQuery和相关库来创建更美观、功能更丰富的自定义提示框。 首先，我们需要理解jQuery的基本用法。jQuery是一个轻量级的JavaScript库，它简化了DOM...
jquery dialog 修改title
yingying0708的专栏
06-19 4897
$('#divId').dialog({title:'修改'}).dialog('open');
jQuery模拟按下回车键和f11键
JHLIN的博客
07-10 8996
     众所周知easyui 的Pagination中要想跳转到某一页，只需要输入页码按ENTER就能达到效果。前段时间的项目 客户提出要求说想要输入页码 按一个GO的按钮做跳转。好吧，客户是上帝，他们怎么说我们这些程序猿只能尽自己所能来达到效果。如图：                                即：按下GO做  输入3按回车一样的事情而这个问题可以简化为 点击一个a标签 模...
jQuery-ui源代码重点难点分析
weixin_33904756的博客
06-22 159
本文以jquery-ui sortable排序功能插件为例分析jquery-ui源代码重点难点。 jquery-ui-sortable插件非常复杂深奥，本来是针对鼠标操作设计的，在手机运行无效，因为手机没有mouse事件，更没有drag事件。 但增加一个jquery-ui-touch-punch.js文件之后在手机运行也有效，touch有效，原理在于sortable源代码不是针对鼠标drag ...
关于angular的$state.include()方法与ui-sref和ui-sref-active的使用或者关于angular激活状态的判断
licanty的博客
08-22 1024
$state.includes方法用于判断当前激活状态是否是指定的状态或者是指定状态的子、父状态. $state.includes方法接受三个参数,其中第二和第三个都不知道是干啥的...估计也不太用得到,就暂时不管了... eg：$state.includes(stateOrName,params,options)； stateOrName:字符串， 是一个状态的名字（一般是指路由状态名
JQuery插件之-----Datatables(二)jQuery-UI风格的垂直滚动条
fendo
10-31 5865
这个例子展示了Datatables使用jQuery-ui主题。 引入jqueryui的样式 http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css http://cdn.datatables.net/plug-ins/be7019ee387/integration/jqueryui/dataTables.
UI设计规约(一)：兼容JQuery UI
甘焕的博客
09-01 907
改善UI的无序及混乱状态，赋予UI的业务性意义，促进UI的复用与持续性改进，充分利用CSS的继承、组合等特性，保证一致的UI风格。
jquery ui 主题_使用jQuery UI主题
cusi77914的博客
07-02 991
主题不是一个新概念。 您可能已经使用级联样式表（CSS）样式和类推出了一些样式，以格式化网站的外观。 使用框架可以使方法标准化，并减少需要编写的工作量和代码量。 jQuery UI现在是主题实现的行业标准。 还有其他选择，例如Dojo（与Dijit耦合）或Ext JS，但是jQuery UI结合了主题和小部件的使用，这些小部件是用户与日期选择器或按钮交互的元素。 在剖析构成jQuery U...
CSS实现强制不换行、自动换行、强制换行的css代码
feifeng5251的专栏
11-28 343
强制不换行 p { white-space:nowrap; } 自动换行 p { word-wrap:break-word; word-break:normal; } 强制英文单词断行 p { word-break:break-all; } *注意：设置强制将英文单词断行，需要将行内元素设置为块级元素。 span { display:block; }...
热门jQuery UI框架精选：国产jUI与更多优秀选项
开发者可以在其官方在线演示：http://jqueryui.com/ 上探索并实践各种功能。 以上这些框架和插件都是jQuery生态系统中的重要组成部分，它们为开发者提供了丰富的UI解决方案，帮助快速构建交互性强、用户体验良好的...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值