-
右键菜单插件——contextmenu 右键菜单插件可以绑定页面中的任意元素，绑定后，选中元素，点击右键，便通过该插件弹出一个快捷菜单，点击菜单各项名称执行相应操作，调用代码如下： $(selector).contextMenu(menuId,{options}); ContextMenu支持设置对象中的以下属性: bindings:一个包含“id”的对象:函数对。所提供的功能是在关联项被单击时执行的操作。触发当前菜单的元素作为第一个参数传递给这个处理程序。 注意:这种行为已经从r1转变为“在id之前需要” menuStyle:一个包含styleName的对象:用于对包含的菜单进行样式化的值对。 itemStyle:一个包含styleName的对象:用于样式化元素的值对。 itemHoverStyle:一个包含styleName的对象:用于对元素的悬停行为进行样式化的值对。 shadow:boolean:默认为true eventPosX:允许您定义哪个单击事件用于确定放置菜单的位置。可能会有一些时间(特别是在IE6中)，您需要将其设置为“clientX”。默认为:“pageX” onContextMenu(event) :在显示上下文菜单之前运行的自定义事件函数。如果函数返回false，菜单将不会显示。这允许您将上下文菜单附加到一个大的块元素(或整个文档)，然后在右键单击是否显示上下文菜单时进行过滤。 onShowMenu(event, menu) :在菜单显示之前运行的一个定制事件函数。它通过对菜单元素的引用，并允许您在显示菜单之前操作输出。这允许您在向用户显示上下文菜单之前隐藏/显示选项或其他任何您可以想到的内容。这个函数必须返回菜单。查看全部
-
工具提示插件可以定制元素的提示外观，提示内容支持变量、Ajax远程获取，还可以自定义提示内容显示的位置，它的调用格式如下： $(selector).tooltip({options}); 其中selector为需要显示提示信息的元素，可选项参数options为tooltip()方法的配置对象，在该对象中，可以设置提示信息的弹出、隐藏时的效果和所在位置。 例如，将三个<a>元素与工具提示插件相绑定，当把鼠标移动在<a>元素内容时，以动画效果弹出对应的提示图片，移出时，图片自动隐藏，如下图所示：查看全部
-
菜单工具插件可以通过<ul>创建多级内联或弹出式菜单，支持通过键盘方向键控制菜单滑动，允许为菜单的各个选项添加图标，调用格式如下： $(selector).menu({options}); selector参数为菜单列表中最外层<ul>元素，options为menu()方法的配置对象。 例如，在页面中，通过<ul>元素内联的方式构建一个三层结构的导航菜单，并将最外层<ul>元素通过menu()方法绑定插件，实现导航菜单的功能，如下图所示：查看全部
-
拖曳排序插件的功能是将序列元素（例如<option>、<li>）按任意位置进行拖曳从而形成一个新的元素序列，实现拖曳排序的功能，它的调用格式为： $(selector).sortable({options}); selector参数为进行拖曳排序的元素，options为调用方法时的配置对象，查看全部
-
<div id="x" class="drag">沿x轴拖拽</div> <div id="y" class="drag">沿y轴拖拽</div> </div> <script type="text/javascript"> $(function () { $("#x").draggable({containment:"parent",axis:"x y") $("#y").draggable({containment:"parent",axis:"y"})查看全部
-
<div class="content"> 两数相减： <input id="Text1" type="text" class="txt" /> - <input id="Text2" type="text" class="txt" /> = <input id="Text3" type="text" class="txt" /> </div> </div> <script type="text/javascript"> $(function () { $("#btnCount").bind("click", function () { $("#Text3").val( $.subNum( $('#Text1').val(), $('#Text2').val() ) ); }); });查看全部
-
<div class="content"> <ul id="u1"> <li><span>橘子</span><span>水果</span></li> <li><span>芹菜</span><span>蔬菜</span></li> <li><span>香蕉</span><span>水果</span></li> </ul> </div> </div> <script type="text/javascript"> $(function () { $('#u1').focusColor('#ccc'); ////调用自定义的插件 })查看全部
-
<div id="divtest"> <div class="title"><span class="fl">点击右键</span></div> <div class="content"> <input id="btnSubmit" type="button" value="提交" /> <div class="tip"></div> </div> <div class="contextMenu" id="sysMenu"> <ul> <li id="Li3"><img src="http://img1.sycdn.imooc.com//52e4b34b0001bb6d00160016.jpg" alt="" />保存</li> <li id="Li4"><img src="http://img1.sycdn.imooc.com//52e4b3680001424900160016.jpg" alt="" />退出</li> </ul> </div> </div> $(function () { $("#divtest").contextMenu('sysMenu', { bindings: { 'Li3': function (Item) { $(".tip").show().html("您点击了“保存”项"); }, 'Li4': function (Item) { $(".tip").show().html("您点击了“退出”项"); }}); });查看全部
-
<input id="txtSearch" name="txtSearch" type="text" /> <script type="text/javascript"> $(function () { var arrUserName = ["王五", "刘明", "李小四", "刘促明", "李渊", "张小三", "王小明"]; $('#txtSearch').autocomplete(arrUserName,{ minChars: 0, //双击空白文本框时显示全部提示数据 formatItem: function (data, i, total) { return "<I>" + data[0] + "</I>"; //改变匹配数据显示的格式 }, formatMatch: function (data, i, total) { return data[0]; }, formatResult: function (data) { return data[0]; } }).result(SearchCallback); function SearchCallback(event, data, formatted) { $(".tip").show().html("您的选择是：" + (!data ? "空" : formatted)); } });查看全部
-
<span class="fl">邮箱：</span><br /> <input id="email" name="email" type="text" /><br /> <input id="chksave" type="checkbox" />是否保存邮箱 </div> </div> <script type="text/javascript"> $(function () { if ($.cookie("email")) { $("#email").val(?); } $("#btnSet").bind("click", function () { if ($("#chksave").is(":checked")) { $.cookie("username",$("#username".val(), { path: "/", expires: 7 }) } else { $.cookie("username",null, { path: "/" }) } }); });查看全部
-
<div id="divtest"> <div class="title"> <span class="fl">图片放大镜</span> </div> <div class="content"> <a href="http://img1.sycdn.imooc.com//52e4aec90001924d06800599.jpg" id="jqzoom" title="小兔子乖乖"> <img src="http://img1.sycdn.imooc.com//52e4aee700012df702130212.jpg" alt=""/> </a> </div> </div> <script type="text/javascript"> $(function () { $("#jqzoom").jqzoom({ //绑定图片放大插件jqzoom zoomWidth: 333, //小图片所选区域的宽 zoomHeight:333, //小图片所选区域的高 zoomType: 'reverse' //设置放大镜的类型 }); });查看全部
-
自定义获取焦点时的背景颜色查看全部
-
$(selector).menu({options}); selector参数为菜单列表中最外层<ul>元素，options为menu()方法的配置对象。查看全部
-
jQuri查看全部
-
搜索插件的功能是通过插件的autocomplete()方法与文本框相绑定，当文本框输入字符时，绑定后的插件将返回与字符相近的字符串提示选择，调用格式如下： $(textbox).autocomplete(urlData,[options]);查看全部
举报
0/150
提交
取消