阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      jQuery UI 教程

      jQuery UI是一套JavaScript 库,提供抽象化、可自定义主题的GUI控件与动画效果。基于jQuery JavaScript库,可用来建构交互式的互联网应用程序。在2007年9月约翰·雷西格于jquery.com博客里的一篇文章里正式公诸于世。最新的版本需要jQuery 2.1.1或更新的版本。

      jQuery UI 教程

      jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器,jQuery UI 都是一个完美的选择。

      jQuery UI 包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件(Widget)使用相同的模式,所以,只要您学会使用其中一个,您就知道如何使用其他的小部件(Widget)。

      从实例开始

      为了更好地体验什么是 jQuery UI,请查看 jQuery UI 实例。

      在实例演示部分,导航列出了 jQuery UI 提供的所有交互部件和小部件。选择一个交互部件或小部件,您将看到特定插件的一些演示配置。在每个演示中,您可以查看源代码,更改主题,且 URL 可以被添加书签。例如,您可以查看 折叠面板部件填充空间 实例演示页面。

      示例

      <div id="draggable" 
          style = "width: 150px; height: 150px; padding: 0.5em;" 
          class="ui-widget-content">
          <p>Drag me around</p>
      </div>
      
      <script type="text/javascript">
          $(function(){
              $("#draggable").draggable();
          });
      </script>
      

      这段代码会让用户的鼠标光标可以拖曳ID为“draggable”的DIV元素。

      功能

      交互

      • 拖曳(Draggable)–让元素可以用鼠标拖曳。
      • 拖放(Droppable)–让控件可以接受其他拖曳进来的元素。
      • 调整大小(Resizable)–让元素可以调整大小。
      • 选取(Selectable)–提供高级的大量元素选择功能。
      • 排序(Sortable)–让列表可以更容易排序。

      控件

      jQuery UI的所有控件都能自定义主题样式。

      • 手风琴式菜单(Accordion)–如手风琴般可伸缩的控件。
      • 自动完成(Autocomplete)–根据用户的输入来自动完成文字栏。
      • 按钮(Button)–增强按钮外观,将单选与复选控件转变成按钮型式。
      • 日期选择器(Datepicker)–高级的日期选择工具。
      • 对话框(Dialog) –在页面最上层显示对话框。
      • 菜单(Menu) - 显示多层次结构式的菜单。
      • 进度条(Progressbar) –动态与静态的进度指示条。
      • 滑动条(Slider)–完全可以自定义的滑动条与各种功能。
      • 微调选择器(Spinner) - 上下控制的数字微调输入栏。
      • 页签(Tabs)–页签切换控件,可以内嵌或动态加载内容。
      • 工具提示(Tooltip) - 弹出式提示框。

      效果

      • 颜色动画(Color Animation)–产生颜色转变的动画效果。
      • 切换Class、新增Class、移除Class、开关Class –让页面上元素样式转变时有动画效果。
      • 效果(Effects)–各种效果(显示、下拉、爆炸、淡入等等)。
      • 切换(Toggle)–切换效果开关。
      • 隐藏、显示 - 使用上述的效果。

      工具

      • 位置(Position) –根据另一个元素来设置目标元素的位置(对齐)。
      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录