其它组件范例

详情信息窗
图片缩放依赖:(开启图片缩放后,自动加载)
<script src="../js/plugins/jquery-zoom/jquery.zoom.min.js"></script>
默认配置:(详见手册)
var _defaults={
	hideTime_:300, //隐藏的延时时间 毫秒
	showTime_:400, //显示的延时时间 毫秒
	html:true,
	imageZoom:false,
	placement:'left', //显示位置 top | bottom | left | right | auto
	trigger:'manual',
	container:'body',
	maxHeight:'',
	maxWidth:'276px',
	title:'',
	content:function(){
		return callback ? callback($(this)) : '';
	}
};
范例:
COM_TOOLS.infoTipsFn('.demo-box','#demo1-btn1',
	function(){
		return '<img src="../images/login_page_bg.png"/>'+
		'<p>文字内容文字内容文字内容文字内容</p>'+
		'<p>文字内容文字内容文字内容文字内容</p>'+
		'<p>文字内容文字内容文字内容文字内容</p>'+
		'<p>文字内容文字内容文字内容文字内容</p>'+
		'<p>文字内容文字内容文字内容文字内容</p>';
	},
	{
		placement:'right',
		maxHeight:'300px',
		imageZoom:true
	}
);
//无
数字显示插件(小数位、千分位、进位-四舍五入)(实时录入格式化、显示格式化)
//需引入jquery.number.min.js
//基本数字格式:
$.number( 5020.2364, [小数位数,默认(0),] [小数分隔符,默认(.),] [千分位分隔符,默认(,)]);
$.number(5020.2364,2) //输出 5,020.24

//初始化回显或实时输入
$('.selector').number( true, 2 );

//将数字写入元素的文本值中(非input,只对text()生效)
$('.selector').number( 1234, 2 );

原创组件(效果有点lower,凑合用吧),借鉴于:https://github.com/customd/jquery-number(对中文输入法支持不好)

PS:请使用英文输入法输入,否则无法有效识别小数点, 火狐、IE可给input添加 样式 ime-mode-disabled,阻止中文输入


<label>实时输入格式化(火狐下不可切换输入法): </label><input class="form-control input-sm ime-mode-disabled" id="demo2-element1"/> 
<label>文本框初始化值格式化: </label><input class="form-control input-sm" id="demo2-element2" value="12345678"/> 
<label>其它标签初始化值格式化: </label><label id="demo2-element3" class="text-danger">12345678</label>
<button class="btn btn-info" id="demo2-element4">点击输出$.number(5020.2364,2)</button>

$('#demo2-element1').number(true,2);
$('#demo2-element2').number(true,2);
$('#demo2-element3').number(true,2);
$('#demo2-element4').click(function(){
	alert($.number(5020.2364,2));
});
多种菜单效果演示
1.bootstrap默认菜单
需要在目标上添加 class="dropdown-toggle" data-toggle="dropdown"
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">BS默认情况</a>
<ul class="dropdown-menu">
	<li><a href="javascript:void(0)">内容1</a></li>
	<li><a href="javascript:void(0)">内容2</a></li>
	<li><a href="javascript:void(0)">内容3</a></li>
</ul>

2.使用dropdownHover组件(以hover效果触发)
需要在目标上添加 data-hover="dropdown"
<a href="javascript:void(0)" data-hover="dropdown">hover组件情况</a>
<ul class="dropdown-menu">
	<li><a href="javascript:void(0)">内容1</a></li>
	<li><a href="javascript:void(0)">内容2</a></li>
	<li><a href="javascript:void(0)">内容3</a></li>
</ul>

3.使用submenupicker组件(多级菜单)
需要在目标上添加 class="dropdown-toggle" data-toggle="dropdown" data-submenu
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" data-submenu>多级菜单情况</a>
<ul class="dropdown-menu">
	<li><a href="javascript:void(0)">内容1</a></li>
	<li class="dropdown-submenu">
		<a href="javascript:void(0)">内容2</a>
		<ul class="dropdown-menu">
			<li><a href="javascript:void(0)">内容21</a></li>
			<li class="dropdown-submenu">
				<a href="javascript:void(0)">内容22</a>
				<ul class="dropdown-menu">
					<li><a href="javascript:void(0)">内容221</a></li>
					<li><a href="javascript:void(0)">内容222</a></li>
				</ul>
			</li>
			<li><a href="javascript:void(0)">内容22</a></li>
		</ul>
	</li>
	<li><a href="javascript:void(0)">内容3</a></li>
</ul>

4.使用dropdownHover组件 及 submenupicker组件(hover多级菜单)
<a href="javascript:void(0)" data-hover="dropdown" data-submenu>hover组件及多级菜单情况</a>
<ul class="dropdown-menu">
	<li><a href="javascript:void(0)">内容1</a></li>
	<li class="dropdown-submenu">
		<a href="javascript:void(0)">内容2</a>
		<ul class="dropdown-menu">
			<li><a href="javascript:void(0)">内容21</a></li>
			<li class="dropdown-submenu">
				<a href="javascript:void(0)">内容22</a>
				<ul class="dropdown-menu">
					<li><a href="javascript:void(0)">内容221</a></li>
					<li><a href="javascript:void(0)">内容222</a></li>
				</ul>
			</li>
			<li><a href="javascript:void(0)">内容22</a></li>
		</ul>
	</li>
	<li><a href="javascript:void(0)">内容3</a></li>
</ul>
1.bootstrap默认不需要添加任何js代码
2.使用dropdownHover组件以hover方式是需要添加:$('[data-hover="dropdown"]').dropdownHover();
3.使用submenupicker组件,支持多级菜单时需要添加:$('[data-submenu]').submenupicker();
带树形组件的下拉菜单
//TODO
//TODO
//TODO
asd