jQuery UI的基本使用方法与技巧_weixin_30768175的博客-程序员宝宝

技术标签: ViewUI  ui  测试  javascript  

一、概述

        jQuery UI is a widget and interaction library built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications. This guide is designed to get you up to speed on how jQuery UI works. Follow along below to get started.

 

二、下载步骤

 

 

下载jquery ui需要3个步骤:

1.选择要下载的控件;

2.选择样式,theme;

3.选择版本,点击下载,可以里。

 

 

三、UI使用方法

 

1.基本使用方法

 

 

you'll need to include these 3 files on any page to use jQuery UI widgets and interactions:

<link type="text/css" href="css/themename/jquery-ui-1.8.22.custom.css" rel="Stylesheet" />

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>

 

Once you've included the necessary files, you can add some jQuery widgets to your page. For example, to make a datepicker widget, you'll add a text input element to your page and then call .datepicker(); on it. Like this: HTML: <input type="text" name="date" id="date" />

JS:

$('#date').datepicker();

 

 

2.定制样式

 

 

jQuery UI basics: using options

Each plugin in jQuery UI has a default configuration which is catered to the most basic and common use case. But if you want a plugin to behave different from its default configuration, you can override each of its default settings using "options". Options are a set of properties passed into a jQuery UI widget as an argument. For example, the slider widget has an option for orientation, which allows you to specify whether the slider should be horizontal or vertical. To set this option for a slider on your page, you just pass it in as an argument, like this:

$('#mySliderDiv').slider({

      orientation: 'vertical'

});

You can pass as many different options as you'd like by following each one with a comma (except the last one):

$('#mySliderDiv').slider({

      orientation: 'vertical',

      min: 0,

      max: 150,

      value: 50

});

Just remember to surround your options with curly brackets { }, and you're well on your way.

 

 

 

四、相关控件的使用

 

1.按钮

 

 

Button enhances standard form elements like button, input of type submit or reset or anchors to themable buttons with appropiate mouseover and active styles.

 

<script>

$(function() {

$( "input:submit, a, button", ".demo" ).button();

$( "a", ".demo" ).click(function() { return false; });

});

</script>

 

 

 

<div class="demo">

 

<button>A button element</button>

 

<input type="submit" value="A submit button">

 

<a href="www.nuoya66.com">An anchor</a>

 

</div><!-- End demo -->

 

 

 

<div class="demo-description" style="display: none; ">

<p>Examples of the markup that can be used for buttons: A button element, an input of type submit and an anchor.</p>

</div><!-- End demo-description -->

 

 

 

2.对话框

 

 

A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default.

 

If the content length exceeds the maximum height, a scrollbar will automatically appear.

 

A bottom button bar and semi-transparent modal overlay layer are common options that can be added.

 

A call to

$(foo).dialog()

will initialize a dialog instance and will auto-open the dialog by default. If you want to reuse a dialog, the easiest way is to disable the "auto-open" option with:

$(foo).dialog({ autoOpen: false })

and open it with

$(foo).dialog('open')

. To close it, use

$(foo).dialog('close')

转载于:https://www.cnblogs.com/zhcj0929/p/4428579.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_30768175/article/details/94895596

智能推荐

逆序打印c语言程序不用循环,C语言实现双向非循环链表(不带头结点)的逆序打印..._梦嘻笔弹的博客-程序员宝宝

我在上一篇博客中《C语言实现双向非循环链表》实现了如何构造一个双向非循环链表,并实现了正向打印。我还在之前一篇博客《C语言实现单链表的逆序打印》中实现了单链表的逆序打印。这篇博客我们来实现对双向非循环链表进行逆序打印,实现起来非常的简单。代码已经上传至 https://github.com/chenyufeng1991/ReverseDoubleLinkedList。核心代码如下://打印非循环...

获取iframe子页面内容高度给iframe动态设置高度_Y15005449875的博客-程序员宝宝

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt; &lt;title&gt;客户...

Ubuntu 播放在线视频显示“没有找到支持的视频格式和 MIME 类型”的解决方案_团子大圆帅的博客-程序员宝宝_没有找到视频格式和mime类型

Ubuntu 播放视频显示“没有找到支持的视频格式和 MIME 类型”的解决方案Ubuntu 播放视频显示“没有找到支持的视频格式和 MIME 类型”的解决方案0. 背景说明1. 解决方案1.1 原因1.2 安装解码器1.3 安装 Firefox 的 flashplayer 插件2. 参考资料0. 背景说明软件环境如下:系统: Ubun...

LearnOpenGL学习笔记—入门03:Hello Triangle_清清!的博客-程序员宝宝

LearnOpenGL学习笔记—入门03:Hello Triangle0 前言1 图形渲染管线2 顶点输入3 VAO,VBO3.1 VAO建立3.2 VBO建立4 shader5 绘制三角形6 绘制四边形(数组绘制/背面剔除)7 用EBO绘制四边形/OpenGL的状态机概念0 前言本节笔记对应的内容 你好,三角形在入门01中我们配置好了环境在入门02中我们可以检测输入并出现一个有颜色的窗口本节我们将可以实现在窗口中画出一个三角形1 图形渲染管线在OpenGL中,事物都是处在3D空间中的,但是我

随便推点

acm新人常见问题_cschenlu的博客-程序员宝宝_艾庆兴 acm

貌似新人们总会遇到几个问题,提一下吧。1. 64Bit整型的问题2. 大数组RE的问题3. cin/cout的TLE危险4. scanf的/n遗留问题以及gets的RE问题5. 精度问题6. 其它还有一些建议--1. 64Bit整型的问题这个东西比较纠结阿。一般来说在VC下面,定义的时候要用__int64用g++/gcc的时候,则应该用long long定义在Windows下面,输入输出的时候要用

WEB性能测试三种介绍_Sunshine_girl_coder的博客-程序员宝宝_性能测试三种

WEB性能测试工具主要分为三种,一种是测试页面资源加载速度的,一种是测试页面加载完毕后页面呈现、JS操作速度的,还有一种是总体上对页面进行评价分析,下面分别对这些工具进行介绍,如果谁有更好的工具也请一起分享下。  Firebug:  Firebug 是firefox中最为经典的开发工具,可以监控请求头,响应头,显示资源加载瀑布图:  HttpWatc

【图神经网络】图神经网络(GNN)学习笔记:基于GNN的图表示学习_镰刀韭菜的博客-程序员宝宝_gnn-lstm

本文主要就基于GNN的无监督图表示学习进行详解。在实际的应用场景中,大量的数据标签往往具有很高的获取门槛,研究如何对图数据进行高效的无监督表示学习具有十分重要的价值。

XenAPI (C#) Tips_any2mobile的博客-程序员宝宝_xenapi c#

Create a XenServer virtual machine from a template using XAPI

双电阻差分电流采样_矢量控制中的常见电流检测方式_weixin_39992417的博客-程序员宝宝

矢量控制技术中,一个关键的技术环节是相电流的采集和重构。电流采集方式有多种,但是鉴于成本和易用性的考虑,目前应用较多的电流采集方式只有三种。单电阻法、双电阻法以及三电阻法。1单电阻采集方案,成本低,只需要一个采样电阻和一个运算放大电路即可。由于采用单分流电阻,三相电流的测量电路相同,不需要为每一相电路做单独校准处理。但是单电阻采样方案的程序实现相对复杂,在一个PWM周期中需要进行两次采样。并且在有...

OsgEarth —— 笔记7 - 地球加入飞机并飞行(附源码)_信必诺的博客-程序员宝宝_osgearth 飞机飞行

效果  源码double Project::GetDis(osg::Vec3 form, osg::Vec3 to){ return sqrt(pow((to.x() - form.x()), 2) + pow((to.y() - form.y()), 2) + pow((to.z() - form.z()), 2));}double Project::GetRunTim