SharePoint 2010 modal dialog extensions

by Kai 28. April 2012 02:26

Hi all. During digging into different sharepoint *.debug.js files I also investigating into sp.ui.dialog.debug.js. Out of the box modal dialog framework has some number of methods for manipulating dialog window, but some methods (that might be useful) missed. For example programmatically maximize or restore dialog window. Here is a couple of extension methods that I’ve created:

  • maximize -  maximizes modal dialog window
  • restore -  restores modal dialog window
  • toggleView – maximizes if modal dialog window is not maximized and vice versa
  • setSize – set size for modal dialog window (height, width in pixels)

Here is the code:

ExecuteOrDelayUntilScriptLoaded(function(){
	SP.UI.ModalDialog.prototype.toggleView = function () {
		this.$z(null);
	};
	SP.UI.ModalDialog.prototype.maximize = function (){
		if(!this.$S_0){
			this.$z(null);
		}
	}
	SP.UI.ModalDialog.prototype.restore = function (){
		if(this.$S_0){
			this.$z(null);
		}
	}
	SP.UI.ModalDialog.prototype.setSize = function (width, height){
		if(typeof width == "number" && typeof height == "number") {
			this.$Q_0(width, height);
		}
	}
}, "sp.ui.dialog.js");

Example of use:

var dlg = SP.UI.ModalDialog.get_childDialog();
dlg.toggleView();

Enjoy and good luck in spdevelopment.

Tags: , , , ,

SharePoint 2010 | JavaScript

SharePoint 2010 developer tools

by Kai 3. February 2012 10:27

Hi all! Questions about sharepoint tools rather popular and I decided to wrote this post about sharepoint 2010 tools, that I use. You, in comments may suggest any other tools that are not listed here and you are using it.

I divide all tools into 2 categories: directly sharepoint related, and common tools that used with sharepoint development. Ok, lets start.

Directly SharePoint related tools.

1. SharePoint Manager 2010.

image

Codeplex page.May be the most used tool ever. I won’t describe all possibilities, simply must have tool.

More...

Tags: , , , ,

SharePoint 2010

ColorBox extension for blogengine.net

by Kai 28. April 2011 09:13

Hi2all!
Today I want to share with you nice lightbox-like javascript plugin named "Colorbox" for BlogEngigne.NET. I found that is very simple to write extensions for BlogEngigne and first of all I created my lightbox clone :).
Colorbox popular extension, that can be fully customizable and support many settings. This is a very simple extension, because this is my first extension for BlogEngigne. How to install it: simply copy
files to corresponding locations in your BlogEngine site. File \User controls\ColorBox\js\starter.js used to activate ColorBox in a page. If have knwoledges in JavaScript you can modify
default behavior. You can use many of out of the box settings that ColorBox ships with.
Here is an example how to use it:

<a class="colorbox" href="/image.axd?picture=2011%2f4%2fimg1.jpg">
<img src="/image.axd?picture=2011%2f4%2fimg1_thum.jpg" alt="" /></a>

where href is a path to full-sized image, and image html tag inside a tag is thumnbail image. Additional reference and documentation you can find here.

Two things that I should mentioned:
1. If you want to see overlay around you image, out must make some changes in html and css. By default, in masterpage of BlogEngigne body have fixed width, thats why all lightbox-like plugins are not displayed correctly.I cut styles from body and insert their in div #container, that play role of body. And now overlay displayed correctly.
2. You may encounter with javascript errors in IE7 or 8. This case that ColorBox (and some other plugins) conflicts with AlexGorbatchev SyntaxHighlighter when you use jQuery version 1.4+. I like Alex's highlighter
and have to use jQuery 1.3.2 and all work well.
Be aware about this and feel free to ask any question. 

My plugin you can download here (21.02 kb).

Tags: , ,

blogengine.net | Extensions