jquery easyui在我的jsp页面中使用,需要引入那些c及引用的路径:
<%@ page language="java" contentType="text/html charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<link rel="stylesheet" type="text/css" href="css/test1.css">
<script type="text/javascript" src="js/jquery/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/jquery/jquery.easyui.min.js"></script>
<title>测试 JQuery</title>
</head>
<body>
<div class="AAA">show it.</div>
</body>
<script type="text/javascript">
$(function(){
alert("OK,JQuery is run.")
})
</script>
</html>.
jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。
jQuery EasyUI为提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,validatebox,datagrid,window,tree等等。
jQuery EasyUI是基于JQuery的一个前台ui界面的插件,功能相对没extjs强大,但页面也是相当好看的,同时页面支持各种themes以满足使用者对于页面不同风格的喜好。一些功能也足够开发者使用,相对于extjs更轻量。
1、在HBuilder软件中创建web项目,并在web项目指定的目录下创建静态页面select.html。
2、引入EasyUI插件核心css和js文件,并引入jQuery核心js文件。
3、下面开始编写ComboBox容器,该控件利用的是select标签元素构成的,设置ComboBox样式,如下图所示。
4、编辑js代码,获取ComboBox选中的值和文本,利用getValue和getText方法分别获取值和文本。
这个插件没有定义控件的高度的配置,控件也没有设置高度,依据内容的高度来确定控件整体高度,你可以给样式添加高度即可。不过还是修改源代码来实现高度控制好点,可以随便配置,而不用统一2者结合也可以
css覆盖部分,你也可以修改jquery.multiselect.css这个css文件增加style里面的样式
<link rel="stylesheet" type="text/css" href="../jquery.multiselect.css" />
<style>
.ui-multiselect{line-height:30pxheight:30px}
</style>
或者修改jquery.multiselect.js文件,增加一个cHeight配置,用来控制控件的高度,找到下面的这句,修改成这样
var button = (this.button = $('<button type="button"><span class="ui-icon ui-icon-triangle-1-s"></span></button>'))
===>改成这样,判断配置了cHeight增加增加style控制高度
var button = (this.button = $('<button type="button"'+(o.cHeight?' style="height:'+o.cHeight+'px"':'')+'><span class="ui-icon ui-icon-triangle-1-s"></span></button>'))
DEMO
$("select").multiselect({cHeight:40})
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)