$('.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.