JQuery Overlay必须使用rel这种属性才能使用吗?

arwind gao 2012-09-13 06:10:43
Hi,
现在我实现了一些基本Overlay的功能,但是这里的代码和Demo似乎都需要加上rel="#yesno"类似的自定义属性在HTML标签才可以使用,而且这样做还带来的问题是当我从其他的子view中插入一段HTML代码的时候,却失效了。

http://jquerytools.org/documentation/overlay/index.html#effects

我看到这里有介绍说Overlay有自己的event和API例如:load(),close()等方法,但是当我使用$("#id").overlay().close()方法的时候,编译器报Overlay方法不存在。

我想知道各位对于这个问题怎么看? 有没有什么方法来做到?

目前我已经加入了2个必要的JQuery Library
<script src="../../Scripts/Overlay/jquery.overlay.min.js" type="text/javascript"></script>
<script src="http://cdn.jquerytools.org/1.2.7/tiny/jquery.tools.min.js" type="text/javascript"></script>
...全文
500 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
Go 旅城通票 2012-09-14
  • 打赏
  • 举报
回复
你调用close的那个选择器没有初始化过overlay事件吧。。所以为空
arwind gao 2012-09-14
  • 打赏
  • 举报
回复
还有人能帮忙看下吗?
arwind gao 2012-09-14
  • 打赏
  • 举报
回复
问题已解决 谢谢 需要先初始化,多谢showdo。
附下我的解决方案,让有类似问题的人看看:
Load事件:
$("#trggierID").click(function () {
$("#divID").overlay().load();
});

$("#divID").overlay({
mask: {

// you might also consider a "transparent" color for the mask
color: '#fff',

// load mask a little faster
loadSpeed: 200,

// very transparent
opacity: 0.5
},
closeOnClick: false
});
Close()事件
function test1() {
$('#close').click(function () {
$('#yesno').overlay().close();
});
}
如果你需要通过从其他的view中加入具有load和close功能的按钮,请注意要在加入那段HTML中执行初始化,否则可能会造成延迟,例如这是一段需要注入到主页面的partitial view,你需要添加在ready事件中,如果只是在主view中写的话,关闭事件可能要点击几次才会执行:
<script type="text/javascript">
$(document).ready(function () {
$('#close').click(function () {
$('#yesno').overlay().close();
});

});
</script>
<p> Name:
@Html.TextBoxFor(model => model.ModelName)
</p>
<p> Active:
@Html.CheckBoxFor(model => model.ModelActive)
</p>
<p> Group:
@Html.DropDownListFor(model => model.ModelGroupID, Model.groupList)
</p>
<button type="submit"> Submit </button>
<button onclick="test1();" id="close">close2</button>
泡泡鱼_ 2012-09-13
  • 打赏
  • 举报
回复
那是调用插件的方法。别人的插件不是可以意念所至便能随心所欲的,或许你可以去修改插件达到你的功能吧
arwind gao 2012-09-13
  • 打赏
  • 举报
回复
不是很确定完全理解你的意思了 你的意思是通过overlay({target:'#yesno'})这种方式去加上标签到指定的HTML元素吗? 目前我不是很想继续使用这种自定义属性或者是指定的class名称来做了,只是想通过直接调用load(),close()这种API直接调用。还不知道怎么解决
arwind gao 2012-09-13
  • 打赏
  • 举报
回复
是这样的 还有一个情况 比如close这个问题吧,需要设置<div class="close"></div>这样可以实现,如果我使用$("id").overlay().close(),就不能实现,这里是没有rel参数的,那么怎么解决呢?
泡泡鱼_ 2012-09-13
  • 打赏
  • 举报
回复
加多个target参数
比如你之前需要附加rel="#yesno"
那么你不想加这个在元素上,就指定target参数即可
$('#id').overlay({target:'#yesno'})
如scrollable的学习,首先给出操作的html目标代码: 代码如下:<button rel=”#overlay”>Open overlay</button> <button rel=”#overlay2″>Other overlay</button>
jquery日历控件 <em>jQuery</em> UI Datepicker - Default functionality <script src="jquery-1.7.2.js">

Date:

The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.

$(function() { var $mybook = $('#mybook'); var $bttn_next = $('#next_page_button'); var $bttn_prev = $('#prev_page_button'); var $loading = $('#loading'); var $mybook_images = $mybook.find('img'); var cnt_images = $mybook_images.length; //alert(cnt_images); var loaded = 0; //preload all the images in the book, //and then call the booklet plugin $mybook_images.each(function(){ var $img = $(this); var source = $img.attr('src'); $('').load(function(){ ++loaded; if(loaded == cnt_images){ $loading.hide(); $bttn_next.show(); $bttn_prev.show(); $mybook.show().booklet({ name: null, // name of the booklet to display in the document title bar width: 800, // container width height: 500, // container height speed: 600, // speed of the transition between pages direction: 'LTR', // direction of the overall content organization, default LTR, left to right, can be RTL for languages which read right to left startingPage: 0, // index of the first page to be displayed easing: 'easeInOutQuad', // easing method for complete transition easeIn: 'easeInQuad', // easing method for first half of transition easeOut: 'easeOutQuad', // easing method for second half of transition closed: true, // start with the book "closed", will add empty pages to beginning and end of book closedFrontTitle: null, // used with "closed", "menu" and "pageSelector", determines title of blank starting page closedFrontChapter: null, // used with "closed", "menu" and "chapterSelector", determines chapter name of blank starting page closedBackTitle: null, // used with "closed", "menu" and "pageSelector", determines chapter name of blank ending page closedBackChapter: null, // used with "closed", "menu" and "chapterSelector", determines chapter name of blank ending page covers: false, // used with "closed", makes first and last pages into covers, without page numbers (if enabled) pagePadding: 10, // padding for each page wrapper pageNumbers: true, // display page numbers on each page hovers: false, // enables preview pageturn hover animation, shows a small preview of previous or next page on hover overlays: false, // enables navigation using a page sized overlay, when enabled links inside the content will not be clickable tabs: false, // adds tabs along the top of the pages tabWidth: 60, // set the width of the tabs tabHeight: 20, // set the height of the tabs arrows: false, // adds arrows overlayed over the book edges cursor: 'pointer', // cursor css setting for side bar areas hash: false, // enables navigation using a hash string, ex: #/page/1 for page 1, will affect all booklets with 'hash' enabled keyboard: true, // enables navigation with arrow keys (left: previous, right: next) next: $bttn_next, // selector for element to use as click trigger for next page prev: $bttn_prev, // selector for element to use as click trigger for previous page menu: null, // selector for element to use as the menu area, required for 'pageSelector' pageSelector: false, // enables navigation with a dropdown menu of pages, requires 'menu' chapterSelector: false, // enables navigation with a dropdown menu of chapters, determined by the "rel" attribute, requires 'menu' shadows: true, // display shadows on page animations shadowTopFwdWidth: 166, // shadow width for top forward anim shadowTopBackWidth: 166, // shadow width for top back anim shadowBtmWidth: 50, // shadow width for bottom shadow before: function(){}, // callback invoked before each page turn animation after: function(){} // callback invoked after each page turn animation }); //Cufon.refresh(); } }).attr('src',source); }); });
How to use 1. Setup Include nessesary JS files (FancyBox uses pngFix to fix IE png transparency). --------------------------- /* required */ <script type="text/javascript" src="js/jquery.js"> -------------------------------------------- 2. Add your images Add images and wrap them with a link to the zoomed version -------------------------------------------- -------------------------------------------- Optional: Use the title attribute if you want to show a caption Optional: Use the rel attribute to group images 3. Use the plugin Sample examples: -------------------------------------------- $(document).ready(function() { $("p#test1 a").fancybox(); $("p#test2 a").fancybox({ 'hideOnContentClick': true }); $("p#test3 a").fancybox({ 'zoomSpeedIn': 0, 'zoomSpeedOut': 0, 'overlayShow': true }); }); ------------------------------------------- Available options hideOnContentClick Hides FancyBox when cliked on zoomed item (false by default) zoomSpeedIn Speed in miliseconds of the zooming-in animation (no animation if 0) zoomSpeedOut Speed in miliseconds of the zooming-out animation (no animation if 0) frameWidth Default width for iframed and inline content frameHeight Default height for iframed and inline content overlayShow If true, shows the overlay (false by default) overlayOpacity Opacity of overlay (from 0 to 1) itemLoadCallback Custom function to get group items (see example on this page source) Comments

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧