$('.micromodal').microModal({
autoPositioning: true, // set true if you wish to center the modal window (default: true)
overlay: {
show: true, // set true if you wish to how an overlay (default: true)
color: '#fff', // set the colour of the overlay (default: '#fff')
opacity: 0.8 // set the opacity of the overlay (default: 0.8)
}
});
<button class="micromodal target-changecolor">Let's change the background colour!</button>
<div id="changecolor" class="dialog">
Do you really want to do this?
<br /><br />
<button onclick="$.fn.microModal.dialogs['#changecolor'].close();">No way!</button>
<button onclick="$('body').css('background-color', '#fedcba');$.fn.microModal.dialogs['#changecolor'].close();">Sure</button>
</div>
<div class="micro">
<a href="#">Title</a>
<div>Content</div>
</div>
$('.microtabs').microTabs({
selected: 1 // yeah this is the only option - which tab do you want to show on startup?
});
.microtabs { margin:20px 20px; max-width:800px;}
.microtabs-button {
padding: 10px;
background-color:#333;
color:#fff;
text-decoration:none;
font-family:Segoe UI, Helvetica, Arial;
}
.microtabs-button:hover { color:#abcdef; }
.microtabs-selected {
background-color: #fff;
color: #333;
border-right:1px solid black;
border-top:1px solid black;
border-left:1px solid black;
}
.microtabs-element {
background-color:#fff;
color:#555;
padding:10px;
}
.microtabs-header { margin-bottom: -1px; }
.microtabs-container { border: 1px solid black;
Hey guys, this morning (yeah, beginning 7.00) I tried to implement what seemed to be quite an easy task: Dragging files out of my app onto the desktop or into an open explorer Window.
It’s not quite easy. So let’s start this small tutorial. First (of course) you create an ListView – let’s call it “FileView”.
<ListView x:Name="FileView"
PreviewMouseLeftButtonDown="FileView_PreviewMouseLeftButtonDown"
MouseMove="FileView_MouseMove">
<ListView.View>
<GridView>
<!-- Put in here whatever you need -->
<GridViewColumn Header="Name" CellTemplate="{StaticResource file}" />
</GridView>
</ListView.View>
</ListView>
Now to the code behind the xaml. You might have noticed that I added two events to the ListView. The PreviewMouseLeftButtonDown (the dragging starts) and the MouseMove (the dragging is happening).
private Point start;
private void FileView_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
this.start = e.GetPosition(null);
}
private void FileView_MouseMove(object sender, MouseEventArgs e)
{
Point mpos = e.GetPosition(null);
Vector diff = this.start - mpos;
if (e.LeftButton == MouseButtonState.Pressed &&
Math.Abs(diff.X) > SystemParameters.MinimumHorizontalDragDistance &&
Math.Abs(diff.Y) > SystemParameters.MinimumVerticalDragDistance)
{
if (this.FileView.SelectedItems.Count == 0)
{
return;
}
// right about here you get the file urls of the selected items.
// should be quite easy, if not, ask.
//string[] files = ...;
string dataFormat = DataFormats.FileDrop;
DataObject dataObject = new DataObject(dataFormat, files);
DragDrop.DoDragDrop(this.FileView, dataObject, DragDropEffects.Copy);
}
}
Now that’s that, thanks for reading.
// =============================================================================
// System.Text.StringBuilder
// =============================================================================
// Implements a StringBuilder.
// Differs from C#! Capacity and Length properties have been removed.
// Prepend has been added.
var StringBuilder = function(string) {
var _str = (string == null) ? '' : string;
// Appends a string to the stringbuilders internal string.
this.append = function(string) {
_str += string;
};
// Appends a formatted string to the stringbuilders internal string.
this.appendFormat = function(string, array) {
for(var i = 0; i < array.length; i++) {
string = string.replace('{' + i + '}', array[i]);
}
_str += string;
};
// Inserts a string at a specified position inside a stringbuilders internal string.
this.insert = function(string, position) {
_str = _str.slice(0, position) + string + _str.slice(position, _str.length);
};
// Removes a substring of the stringbuilders internal string.
this.remove = function(start, end) {
_str = _str.slice(0, start) + _str.slice(end, _str.length);
};
// Replaces any substring inside the stringbuilders internal string.
// Replaces any substring inside the stringbuilders internal string with ''.
this.replace = function(oldValue, newValue) {
newValue = (newValue == null) ? '' : newValue;
while(_str.indexOf(oldValue) > -1) {
_str = _str.replace(oldValue, newValue);
}
};
// Returns the strinbuilders internal string.
this.toString = function() {
return _str;
};
};
Here we go with my newest JQuery Plugin called MicroView. The main purpose of MicroView is to provide an easy stylable component / widget to display data recieved by JSON or XML. To achieve this, MicroView isn't table based but uses div-nested spans to display the data. This different approach enables you to present your data in many different ways, as the first picture shows. Switching between views is easy as well - and can be triggered client side. By switching a view you can also change the columns you wish to display (and f course their width). And oh yes, as you see in te picture, you can edit your data in every view, as long as your template allows it.